携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情
上一篇文章中，我们实现了axios对象的创建，我们今天来实现一下axios的请求操作
其实axios中无论是get请求还是post的请求最后都是走的request这个请求方法，所以我们要对axios中的request进行操作即可,首先要了解一下axios在发送请求的过程中做了那些事情
接下来我们来实现一下axios中的request方法
Axios.prototype = {
// 请求方法
request(config = {}) {
// 声明一个成功的promise，使得返回config返回的是一个成功的promise
let promise =Promise.resolve(config);
// 声明一个数组,这里第二个参数声明一个undefined是为了做一个占位，如果没有这个值，运行会出现问题
let chains=[dispatchRequest,undefined]
// 调用then方法进行指定回调,这里指定成功和失败的回调，这里由于使用promise所有这个result接收的就是一个对象处理成功过后的返回实例
let result= promise.then(chains[0],chains[1]);
// 把promise返回出去
return result
}
}
dispatchRequest函数中做的就是一个request方法中的一个then成功的操作函数，通过xhrAdapter函数去发送请求，返回的是请求成功或失败的操作
// dispatchRequest 函数
function dispatchRequest(config){
// 这里通过then方法调用所以指明了xhrAdapter函数的返回值一定是一个promise对象，xhrAdapter函数作为我们的返回值，所以当前的dispatchRequest函数也一定是一个promise对象
return xhrAdapter(config).then(response=>{
// 对响应的结果进行返回
return response;
},error=>{
// 返回失败则抛出错误
throw error;
console.log(error);
})
}
xhrAdapter函数中包含的是一个通过promise对象封装原生XMLHttpRequest对象发送请求的操作，通过判断状态码和请求状态以此判定请求是否成功，如果请求状态是未返回状态则不进行操作，如果请求状态完成则进行判断状态码，如果状态码为成功的状态则进行返回resolve，否则返回reject
// 在这里，如果这个请求发送成功了，这个then方法中会去执行第一个回调函数，否则就会去执行第二个抛出错误
function xhrAdapter(config){
return new Promise((resolve,reject)=>{
// 发送xhr请求
const XHR=new XMLHttpRequest()
// 初始化请求
XHR.open(config.method,config.url);
// 发送请求
XHR.send()
// 绑定事件
XHR.onreadystatechange=function(){
// 判断请求状态是否成功
// 0:开始发送请求
// 1：正在发送请求
// 2：已经接收到全部响应内容
// 3：正在解析响应内容
// 4：请求完成
if(XHR.readyState==4){
// 判断请求是否发送成功,请求响应状态码大于或等于200且小于300则是成功否则就是失败
if(XHR.status>=200&&XHR.status<300){
// 成功,则返回promise的成功状态，以此后几个函数会因此继续往下运行,
// 先会让dispatchRequest函授接收到成功的值
resolve({
// 配置对象
config:XHR.config,
// 响应体
data:XHR.response,
// 响应头
headers:XHR.getAllResponseHeaders(),
// XHR请求对象
request:XHR,
// 响应的状态码
status:XHR.status,
// 响应状态字符串
statusText:XHR.statusText,
});
}else{
// 失败就抛出错误
reject(new Error('请求失败'))
}
}
}
})
}
我们来使用一下，看一下结果
完美运行
代码我放到码上掘金上了，大家可以去看看
坚持努力，无惧未来
