引： axios在專案中經常使用，但有次面試讓我把ajax封裝成axios形式，當時居然沒寫出來。看來還是不能停留在使用的表層。 回來研究promise覺得也並不是很難，關鍵是掌握Promise A+規範以及Promise寫法。
先看看axios如何實現的。
axios部分原始碼分析：
axios的自我介紹：Promise based HTTP client for the browser and node.js
即：
我，axios，就是基於Promise,服務於瀏覽器和node.js的的HTTP客戶端。
下面重點看我想了解的ajax部分。
axios中的adapters模組
The modules under adapters/ are modules that handle dispatching a request and settling a returned Promise once a response is received.
此模組主要處理分發請求，並在返回的Promise一旦有響應被接收的情況下進行處理。
原始碼中檢視：axios/lib/adapters/xhr.js有這樣一段讓我眼前一亮：
module.exports = function xhrAdapter(config) {
return new Promise(function dispatchXhrRequest(resolve, reject) {
})
}
複製程式碼找到promise大本營了！繼續看原始碼，接下來就是Promise內部處理ajax重要的 open, onreadystatechange, send幾處實現，照樣循規蹈矩，挑出來看：
// =>...omit config...
// step1=>
var request = new XMLHttpRequest();
// step2=>
request.open(config.method.toUpperCase(), buildURL(config.url, config.params, config.paramsSerializer), true);
// step3=>
request.onreadystatechange = function handleLoad() {
if (!request || request.readyState !== 4) {
return;
}
// The request errored out and we didn't get a response, this will be
// handled by onerror instead
// With one exception: request that using file: protocol, most browsers
// will return status as 0 even though it's a successful request
if (request.status === 0 && !(request.responseURL && request.responseURL.indexOf('file:') === 0)) {
return;
}
// Prepare the response
var responseHeaders = 'getAllResponseHeaders' in request ? parseHeaders(request.getAllResponseHeaders()) : null;
var responseData = !config.responseType || config.responseType === 'text' ? request.responseText : request.response;
var response = {
data: responseData,
status: request.status,
statusText: request.statusText,
headers: responseHeaders,
config: config,
request: request
};
settle(resolve, reject, response);
// Clean up request
request = null;
};
// =>...omit handle process...
// step4=>
request.send(requestData);
複製程式碼以上只是ajax的實現，但核心的then鏈式呼叫並沒有實現，真正的實現來看axios/lib/core/settle.js下的settle方法：
/**
* Resolve or reject a Promise based on response status.
*
* @param {Function} resolve A function that resolves the promise.
* @param {Function} reject A function that rejects the promise.
* @param {object} response The response.
*/
module.exports = function settle(resolve, reject, response) {
var validateStatus = response.config.validateStatus;
if (!validateStatus || validateStatus(response.status)) {
resolve(response);
} else {
reject(createError(
'Request failed with status code ' + response.status,
response.config,
null,
response.request,
response
));
}
};
複製程式碼關鍵的resolve和reject解決後，按照規定（Promise A+ 規範 ）
promise必須提供then方法來存取它當前或最終的值或者原因。
此時可以根據promise.then(onFulfilled, onRejected)，利用其中的兩個方法對返回做處理。
以上已經基本實現了ajax的功能。
下面仿照axios的思想封裝自己的promise_ajax
初步實現自己的P_ajax
function pajax({
url= null,
method = 'GET',
dataType = 'JSON',
async = true}){
return new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest()
xhr.open(method, url, async)
xhr.responseType = dataType
xhr.onreadystatechange = () => {
if(!/^[23]\d{2}$/.test(xhr.status)) return
if(xhr.readyState === 4) {
let result = xhr.responseText
resolve(result)
}
}
xhr.onerror = (err) => {
reject(err)
}
xhr.send()
})
}
複製程式碼預設呼叫JSON格式並測試成功
ajax({
url:'./test.json',
method: 'get'
}).then((result)=>{
console.log(result)
},(err)=>{
})
複製程式碼升級優化
針對不同請求型別，檔案型別，做不同的處理
- 新增判斷請求型別，請求為get時，針對快取做不同處理 cache為false即不設定快取，利用最簡單的加 _***解決，***為隨機數
// 判斷請求型別是否為GET
let isGet = /^(GET|DELETE|HEAD)$/i.test(method)
// 判斷url有沒有？，有的話就新增&
let symbol = url.indexOf('?')>-1 ? '&' : '?'
// GET系列請求才處理cache
if(isGet){
!cache ? url+= `${symbol}_${Math.random()}`: null
}
複製程式碼- 根據返回型別對result做不同處理
let result = xhr.responseText
// 根據dataType即不同的檔案型別，對返回的內容做處理
switch(this.dataType.toUpperCase()){
case 'TEXT':
case 'HTML':
break;
case 'JSON':
result = JSON.parse(result)
break;
case 'XML':
result = xhr.responseXML
}
複製程式碼- 處理data 當data為物件時轉化為str，方面get請求傳參
function formatData(data){
if(Object.prototype.toString.call(data)==='[object Object]'){
let obj = data
let str = ''
for(let key in obj){
if(obj.hasOwnProperty(key)){
str+=`${key}=${obj[key]}&`
}
}
// 去掉最後多加的&
str = str.replace(/&$/g,'')
return str
}
}
if(data !== null){
data = formatData(data)
if(isGet){
url += symbol + data
data = null
}
}
複製程式碼簡單測試結果：
pajax({
url:'./test.json',
method: 'get',
cache: false,
data:{
name:'jyn',
age:20
}
}).then((result)=>{
console.log(result)
},(err)=>{
console.log(err)
})
複製程式碼執行結果為：
Request URL: http://localhost:63342/june/HTTP_AJAX/test.json?_0.6717612341262227?name=jyn&age=20
目前靠譜，且then方法也能獲取到檔案資料。
cache設定為false時，每次重新整理獲取都是200，不走304，功能正常。
以上，基於Promise的簡易ajax就完工大吉啦！
Author: Yanni Jia
Nickname: 非常兔
Reference: axios原始碼：https://github.com/axios/axios