助你解析Axios原理之一：如何实现多种请求方式
自从Axios成功打入Vue全家桶之后，便开始火的一塌糊涂！截止到目前，其在github上的star即将突破80k！可以说Axios是当下前端界最流行的ajax请求库，可（jue）能（dui）没有之一！
即然Axios人气如此之高，那么阅读并研究它的源码也是非常有必要的，因为这样不仅可以让自己少走很多弯路，还会对作者多年的编程思想以及经验进行猎取，从中抽象出一些架构及模式性的高级内容，最终提高自己的实现能力和技巧，让自己变得更加强大！
(啰嗦句：阅读源码的换确确可以提升自身的编码水平，但需要你拥有一定相关经验基础以及相对领域的认知，否则看源码绝对是在浪费时间！为什么？因为你看不懂！)
本系列文章将会对Axios源码思想进行精简提炼，从而将大家所关心的一些内部原理问题进行解答。
一、封装一个简易版本的xhr + promise的异步ajax请求库
由于axios是一个基于xhr + promise的异步ajax请求库，所以咱们可以先单纯的封装一个：
function axios(config){
// 将请求方式全部转为大写
const method = (config.method || "get").toUpperCase();
// 返回Promise
return new Promise((resolve,reject)=>{
// 声明xhr
const xhr = new XMLHttpRequest();
// 定义一个onreadystatechange监听事件
xhr.onreadystatechange = function () {
// 数据全部加载完成
if(xhr.readyState === 4){
// 判断状态码是否正确
if(xhr.status >= 200 && xhr.status < 300){
// 得到响应体的内容
const data = JSON.parse(xhr.responseText);
// 得到响应头
const headers = xhr.getAllResponseHeaders();
// request 即是 xhr
const request = xhr;
// 状态码
const status = xhr.status;
// 状态码的说明
const statusText = xhr.statusText
resolve({
config,
data,
headers,
request,
status,
statusText
});
}else{
reject("请求失败"+xhr.status+xhr.statusText);
}
}
}
// 判断是否拥有params,且类型为object
if(typeof config.params === "object"){
// 将object 转为 urlencoded
const arr = Object.keys(config.params);
const arr2 = arr.map(v=>v+"="+config.params[v]);
const url = arr2.join("&");
config.url += "?" + url;
}
xhr.open(method,config.url);
// post put patch
if(method === "POST" || method === "PUT" || method === "PATCH"){
if(typeof config.data === "object")
xhr.setRequestHeader("content-type","application/json");
else if(typeof config.data === "string")
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.send(JSON.stringify(config.data));
}else{
xhr.send();
}
})
}
以上代码实现了axios(config)直接发起请求，例如：
axios({
method:"delete",
url:"data.json"
}).then(res=>console.log(res))
但是，如果我想通过axios.get(url[, config])、axios.delete(url[, config])、axios.post(url[, data[, config]])等请求方式就行不通了。
二、封装request
通过阅读源码得到一些启示：源码中有一个名为Axios的构造函数，而我们的xhr + promise封装在Axios.prototype.request函数中。另外我们所使用的axios.get、axios.post等也都是定义在Axios.prototype中。
根据这些启示将代码调整为：
// 构造函数
function Axios(){
}
Axios.prototype.request = function (config) {
// 将请求方式全部转为大写
const method = (config.method || "get").toUpperCase();
// 返回Promise
return new Promise((resolve,reject)=>{
// 声明xhr
const xhr = new XMLHttpRequest();
// 定义一个onreadystatechange监听事件
xhr.onreadystatechange = function () {
// 数据全部加载完成
if(xhr.readyState === 4){
// 判断状态码是否正确
if(xhr.status >= 200 && xhr.status < 300){
// 得到响应体的内容
const data = JSON.parse(xhr.responseText);
// 得到响应头
const headers = xhr.getAllResponseHeaders();
// request 即是 xhr
const request = xhr;
// 状态码
const status = xhr.status;
// 状态码的说明
const statusText = xhr.statusText
resolve({
config,
data,
headers,
request,
status,
statusText
});
}else{
reject("请求失败"+xhr.status+xhr.statusText);
}
}
}
// http://127.0.0.1/two?a=1&b=2
// 判断是否拥有params,且类型为object
if(typeof config.params === "object"){
// 将object 转为 urlencoded
const arr = Object.keys(config.params);
const arr2 = arr.map(v=>v+"="+config.params[v]);
const url = arr2.join("&");
config.url += "?" + url;
}
xhr.open(method,config.url);
// post put patch
if(method === "POST" || method === "PUT" || method === "PATCH"){
if(typeof config.data === "object")
xhr.setRequestHeader("content-type","application/json");
else if(typeof config.data === "string")
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.send(JSON.stringify(config.data));
}else{
xhr.send();
}
})
}
Axios.prototype.get = function (url,config) {
return this.request({
method:"get",
url,
...config
});
}
Axios.prototype.post = function (url,data) {
return this.request({
url,
method:"post",
data
})
}
// 其它请求delete,patch省略
export default new Axios();
这样我们终于可以通过axios.get(url[, config])、axios.post(url[, data[, config]])请求数据了。
import axios from "./Axios.js";
axios.post("data.json",{
a:1,
b:2
}).then(res=>{
console.log(res);
})
axios.get("data.json",{
params:{
a:1,
b:2
}
}).then(res=>{
console.log(res);
})
但是axios(config)又不行了。
三、createInstance函数
继续攻读源码发现：axios 本质不是Axios构造函数的实例，而是一个函数名字为createInstance的函数对象，在该函数中实例化了Axios。也就是说：我们所使用的axios并不是Axios的实例，而是Axios.prototype.request函数bind()返回的函数。
function createInstance(defaultConfig){
const context = new Axios(defaultConfig);
Axios.prototype.request.bind(context);
// instance 是一个函数。该函数是request,并且将this指向context.
var instance = Axios.prototype.request.bind(context);// 等同于上面那行代码
// 将Axios的原型方法放置到instance函数属性中
Object.keys(Axios.prototype).forEach(method=>{
instance[method] = Axios.prototype[method].bind(context)
})
Object.keys(context).forEach(attr=>{
instance[attr] = context[attr];
})
return instance;
}
export default createInstance;
四、axios实现多种请求方式原理完整代码：
// 构造函数
function Axios(){
}
Axios.prototype.request = function (config) {
// 将请求方式全部转为大写
const method = (config.method || "get").toUpperCase();
// 返回Promise
return new Promise((resolve,reject)=>{
// 声明xhr
const xhr = new XMLHttpRequest();
// 定义一个onreadystatechange监听事件
xhr.onreadystatechange = function () {
// 数据全部加载完成
if(xhr.readyState === 4){
// 判断状态码是否正确
if(xhr.status >= 200 && xhr.status < 300){
// 得到响应体的内容
const data = JSON.parse(xhr.responseText);
// 得到响应头
const headers = xhr.getAllResponseHeaders();
// request 即是 xhr
const request = xhr;
// 状态码
const status = xhr.status;
// 状态码的说明
const statusText = xhr.statusText
resolve({
config,
data,
headers,
request,
status,
statusText
});
}else{
reject("请求失败"+xhr.status+xhr.statusText);
}
}
}
// http://127.0.0.1/two?a=1&b=2
// 判断是否拥有params,且类型为object
if(typeof config.params === "object"){
// 将object 转为 urlencoded
const arr = Object.keys(config.params);
const arr2 = arr.map(v=>v+"="+config.params[v]);
const url = arr2.join("&");
config.url += "?" + url;
}
xhr.open(method,config.url);
// post put patch
if(method === "POST" || method === "PUT" || method === "PATCH"){
if(typeof config.data === "object")
xhr.setRequestHeader("content-type","application/json");
else if(typeof config.data === "string")
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.send(JSON.stringify(config.data));
}else{
xhr.send();
}
})
}
Axios.prototype.get = function (url,config) {
return this.request({
method:"get",
url,
...config
});
}
Axios.prototype.post = function (url,data) {
return this.request({
url,
method:"post",
data
})
}
function createInstance(defaultConfig){
const context = new Axios(defaultConfig);
Axios.prototype.request.bind(context);
// instance 是一个函数。该函数是request,并且内部this指向context.
var instance = Axios.prototype.request.bind(context);// 等同于上面那行代码
// 将Axios的原型方法放置到instance函数属性中
Object.keys(Axios.prototype).forEach(method=>{
instance[method] = Axios.prototype[method].bind(context)
})
Object.keys(context).forEach(attr=>{
instance[attr] = context[attr];
})
return instance;
}
export default createInstance;
发表评论 (审核通过后显示评论)：