简易版axios实现-基于promise+XMLHttpRequest

专职2024-03-06 12:06
javascript 复制代码
    /**
     * 目标：封装_简易axios函数_获取省份列表
     *  1. 定义myAxios函数，接收配置对象，返回Promise对象
     *  2. 发起XHR请求，默认请求方法为GET
     *  3. 调用成功/失败的处理程序
     *  4. 使用myAxios函数，获取省份列表展示
    */
    function myAxios(config) {
      return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()
        // 查询参数支持
        if (config.params) {
          config.url += `?${new URLSearchParams(config.params).toString()}`
        }
        xhr.open(config.method || "GET", config.url)
        xhr.addEventListener("loadend", () => {
          if (xhr.status >= 200 && xhr.status < 300) {
            resolve(JSON.parse(xhr.response))
          } else {
            reject(new Error(xhr.response))
          }
        })
        // 请求体参数支持
        if (config.data) {
          xhr.setRequestHeader("Content-Type", "application/json")
          xhr.send(JSON.stringify(config.data))
        } else {
          xhr.send()
        }
      })
    }

    myAxios({
      url: "https://ajax.itheima.net/api/register",
      method: "post",
      data: {
        username: "mayanan04",
        password: "123456"
      }
    }).then(ret => {
      document.querySelector("p").innerHTML = ret.message
    }).catch(err => {
      document.querySelector("p").innerHTML = err.message
    })