实现简易的 axios

小草莓蹦蹦跳2024-04-01 13:12

1、实现逻辑

Promise + XMLHttpRequest 封装

① 返回一个 promise 实例

new XMLHttpRequest 并设置默认请求方式、请求根路径；

添加请求+响应事件；

根据状态码，对应执行成功或者失败的调用函数，并把结果传进去；

② 处理 params

如果有 params，就 new URLSearchParams() 对象，并把传进来的 params 传到对象里；

再用 toString 方法转成 URL 编码字符串，最后再拼接 url 来覆盖 url 默认值

③ 处理 data

如果有 data，就 xhr.setRequestHeader 设置请求头的请求数据类型；

比如 JSON 字符串，就还需要用 JSON.stringify 转成 JSON 字符串

最后传到 send 携带 JSON 字符串发起请求

2、封装代码

javascript 复制代码

  // 实现简易的axios   
  function myAxios(config) {
    return new Promise((resolve, reject) => {
      // 实例化xhr
      const xhr = new XMLHttpRequest()
      // 默认get请求
      let { methods = "get", url, params = "", headers = "", data = "" } = config
      // 将传入的params对象转成URL编码字符串
      if (params) {
        const parseParams = new URLSearchParams(params)
        url += `?${parseParams.toString()}`
      }
      // 设置请求方法+请求地址
      xhr.open(methods, url)
      // 设置请求头
      if (headers) {
        Object.keys(headers).forEach((key) => {
          xhr.setRequestHeader(key, headers[key])
        })
      } else {
        xhr.setRequestHeader("Content-Type", "application/json")
      }
      // 添加请求响应事件
      xhr.addEventListener("loadend", () => {
        if (xhr.status >= 200 && xhr.status < 300) {
          // 成功
          resolve(JSON.parse(xhr.response))
        } else {
          reject(new Error(xhr.response))
        }
      })
      // data对象
      if (data) {
        // 设置请求头，请求数据类型设置为 JSON 字符串
        xhr.setRequestHeader("Content-Type", "application/json") // 转 JSON 字符串
        // 构造参数
        const jsonDate = JSON.stringify(data)
        // 发起请求
        xhr.send(jsonDate)
      } else {
        // 发起请求
        xhr.send()
      }
    })
  }

3、使用

javascript 复制代码

  // 使用
  myAxios({
    methods: "get",
    url: "/1.json",
    headers: {
        "token": "123"
    },
    params: {
      name: "strawberry",
      age: 18,
    },
    // data: {
    //   name: "strawberry",
    //   age: 18,
    // },
  })
    .then((res) => {
      console.log("成功", res);
    })
    .catch((err) => {
      console.log("失败", err);
    });