axios內(nèi)部運(yùn)作流程大致如下axios入口-

->axios構(gòu)造函數(shù)-

->interceptors請(qǐng)求攔截器-

->dispatchRequest方法-

->transformRequest請(qǐng)求轉(zhuǎn)換器-

->adapter適配器-

->transformResponse響應(yīng)轉(zhuǎn)換器-

->interceptors響應(yīng)攔截器

具體模擬實(shí)現(xiàn)axios使用dispatchRequest方法，以及adapter適配器發(fā)送一個(gè)異步請(qǐng)求的核心代碼//模擬axios發(fā)送請(qǐng)求

//1、聲明構(gòu)造函數(shù)

function Axios(config){

this.config = config;

}

//為Axios的原型對(duì)象添加request方法,axios(),axios.get()等，核心就是調(diào)axios.request()方法

Axios.prototype.request = function(config){

//創(chuàng)建一個(gè)promise對(duì)象

let promise = Promise.resolve(config);

//聲明一個(gè)數(shù)組，保存promise的then方法的兩個(gè)參數(shù)

let chains = [dispatchRequest, undefined]; //undefined作用是占位

//調(diào)用then方法，指定回調(diào)

let result = promise.then(chains[0],chains[1]);

//返回promise的結(jié)果

return result;

}

//2、dispatchRequest函數(shù)

function dispatchRequest(config){//該函數(shù)的返回結(jié)果必須是一個(gè)promise對(duì)象

//調(diào)用適配器發(fā)送請(qǐng)求

return xhrAdapter(config).then(response => {

//省略對(duì)響應(yīng)結(jié)果進(jìn)行轉(zhuǎn)換處理

return response;

},error=>{

throw error;

})

}

//3、adapter適配器

function xhrAdapter(config){ //該函數(shù)的返回值也是promise

return new Promise((resolve,reject)=>{

//不考慮請(qǐng)求體的發(fā)送，創(chuàng)建一個(gè)異步請(qǐng)求

let xhr = new XMLHttpRequest();

xhr.open(config.method, config.url);

xhr.send();

//綁定事件

xhr.onreadystatechange = function(){

if(xhr.readyState === 4) {

if(xhr.status >= 200 && xhr.status < 300) {

resolve({

//自定義返回?cái)?shù)據(jù)

config: config, //配置對(duì)象

data: xhr.response, //響應(yīng)體

headers: xhr.getAllResponseHeaders(),

request: xhr,//請(qǐng)求對(duì)象

status: xhr.status,//響應(yīng)狀態(tài)碼

statusText: xhr.statusText //響應(yīng)狀態(tài)字符串

})

} else {

reject(new Error('請(qǐng)求失敗狀態(tài)碼為'+xhr.status))

}

}

}

})

}

//測(cè)試創(chuàng)建axios函數(shù)

let axios = Axios.prototype.request.bind(null)

//用axios發(fā)送請(qǐng)求

axios({

method:'GET',

url:'http://localhost:3000/posts'

}).then(res=>{

console.log(res)

})

總結(jié)

以上是生活随笔為你收集整理的php使用axios发送请求,axios源码之模拟实现axios发送请求的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。