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、封装代码
// 实现简易的axios function myAxios(config) {return new Promise((resolve, reject) => {// 实例化xhrconst 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、使用
// 使用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);});
