-
Ajax是什么？
答：Ajax是一種可以在瀏覽器和服務(wù)器之間使用異步數(shù)據(jù)傳輸（HTTP請求）的技術(shù)。使用它可以讓頁面請求少量的數(shù)據(jù)，而不用刷新整個頁面。而傳統(tǒng)的頁面（不使用Ajax）要刷新部分內(nèi)容，必須重載整個網(wǎng)頁頁面。
-
Ajax基于什么？
答：它基于的是XMLHttpRequest（XHR）。這是一個比較粗糙的API，不符合關(guān)注分離的設(shè)計原則（Separation of Concerns），配置和使用都不是那么友好。
-
$.ajax的產(chǎn)生背景？
答：基于上面的原因，各種ajax庫引用而生，然而最有名的就是jQuery的API中的 $.ajax() 。 $.ajax() 它的一個優(yōu)勢異步操作，但jQuery的異步操作是基于事件的異步模型，沒有promise那么友好。
-
fetch產(chǎn)生的背景？
答：綜合上面所講的各種因素，fetch這個api應(yīng)運(yùn)而生。但好用歸好用，它存在著一些問題（這個問題下面詳講，并講解相對應(yīng)的解決方案），再加上兼容性問題（ie壓根不支持），所以很多開發(fā)者使用了axios這個第三方庫。
- 支持promise的庫（axios）？
答：axios 這個庫現(xiàn)在是一個比較通用的行業(yè)解決方案，axios 流行開來的一個原因是promise，另一個原因是基于數(shù)據(jù)操作的庫的流行（vue.js, angular.js, react.js等），而傳統(tǒng)的jQuery是基于dom操作的庫。但它也存在著缺陷，就是我們使用前，要保證這個庫已經(jīng)被引入。
其實(shí)，就我個人而言，我還是比較喜歡使用 fetch 的。在開發(fā)中遇到兼容性的問題，只需要同構(gòu)fetch即可，而不需要額外的引入一個庫。下面就重點(diǎn)說一下fetch。
fetch 的使用
fetch(url, options)
.then(response => console.log(responese))
.catch(err => console.log(err))
url：訪問地址
options：常用配置參數(shù)
response: 請求返回對象
請求參數(shù)配置 options 詳情可參考MDN fetch
fetch存在的問題及解決方案
- 得到數(shù)據(jù)你需要兩個步驟
fetch('https://api.github.com/users/lvzhenbang/repos')
.then(res => {
console.log(res)
return res.text()
}).then(data => {
console.log(data)
})
通過上面的代碼，可以發(fā)現(xiàn)直接打印返回的 Response 對象中壓根就沒有數(shù)據(jù)，要想獲取到所需的數(shù)據(jù)，必須經(jīng)一個中間的方法 response.text() （fetch提供了5中方法）
而反觀 axios 使用起來就要方便的多，它返回的 Response 對象中卻有數(shù)據(jù)，在 data 屬性內(nèi)。參考代碼如下：
axios.get('https://api.github.com/users/lvzhenbang/repos')
.then(res => console.log(res));
當(dāng)然，這也不算是一個大問題，就是使用略顯麻煩了點(diǎn)。
- fetch的請求默認(rèn)是不帶
cookie
解決這個問題，需要在 options 中配置 {credentials: 'include'}
- 并非所有的請求錯誤都會
reject
也就是說 catch 方法并不能捕獲所有的錯誤，當(dāng)錯誤可以用一個狀態(tài)碼（如：404，500等）的形式表示時，fetch 返回的 Promise 不會擁有reject，只有當(dāng)網(wǎng)絡(luò)故障或請求被阻止時 catch 才有效。
解決這個問題，我們可判斷 Response 對象中的 ok 是否為true，如果不是，用 Promise 手動添加一個 reject 即可。參考代碼如下：
fetch('https://api.github.com/usrs/lvzhenbang/repos')
.then(res => {
if (res.ok) {
return res.text()
} else {
return Promise.reject('請求失敗')
}
}).then(data => {
console.log(data)
}).catch(err => {
console.log(err)
})
如果不手動添加 reject 將打印出 undefined，而這并不是我們想要的，當(dāng)然使用 axios 則不需要考慮這個問題，代碼如下：
axios.get('https://api.github.com/usrs/lvzhenbang/repos')
.then(res => console.log(res))
.catch(err => console.log(err));
fetch 的優(yōu)化
由于 res.text() 方法返回的就是一個 promise ，所以可以直接調(diào)用 .then ；此外為了保證所有的錯誤都返回一個統(tǒng)一的格式（都返回一個 Promise），上面的代碼可以優(yōu)化如下：
fetch('https://api.github.com/usrs/lvzhenbang/repos')
.then(res => {
return res.text()
.then(data => {
if (res.ok) {
return data
} elese {
return Promise.reject(json)
}
})
}).then(data => {
console.log(data)
}).catch(err => {
console.log(err)
})
玩過express/koa的同學(xué)，或者對后端有一定了解的同學(xué)都知道，服務(wù)器在某些情況下也會返回一些提示信息，那么應(yīng)該如何處理呢？常見的錯誤提示包括一個狀態(tài)碼（status）和提示信息（msg），代碼修改如下：
server:
res.status(404).send({
err: 'not found'
})
client:
fetch('https://api.github.com/usrs/lvzhenbang/repos')
.then(handleResponse).then(data => {
console.log(data)
}).catch(err => {
console.log(err)
})
function handleResponse (res) {
return Promise.reject(Object.assign({}, res.text(), {
status: res.status,
msg: res.statusText
}))
}
兼容解決方案
以上問題解決并優(yōu)化fetch的使用后，發(fā)現(xiàn)fetch還是一個不錯的選擇。針對不同使用情況可以作如下處理：
首先，要引入 es5-shim 解決fetch這個新特性的同構(gòu)；
其次，要引入 es6-promise 解決promise的兼容問題；
然后，引入 fetch-ie8 解決fech的同構(gòu)問題；
最后，引入 fetch-jsonp 解決跨域問題。
當(dāng)然，你也不需要針對性的解決這些問題，GitHub團(tuán)隊提供了一個polyfill解決方案，你不需要一步步的是實(shí)現(xiàn)。只需要兩步：
-
安裝
fetchpackagenpm install whatwg-fetch --save
在使用的模塊引入
fetch
import 'whatwg-fetch'
window.fetch(url, options)
其他的使用和 fetch 則這個原生的API雷同。
哪些情況可以放棄使用fetch
獲取Promsie的狀態(tài)，如：isRejected, isResolved
如果使用習(xí)慣了jquery的progress方法的，或者使用deffered的一些方法
具體 fetch 實(shí)現(xiàn)了哪些與jquery類似的方法可參考whatwg-ftch 或者 fetch-issue
推薦：相關(guān)系列文章可關(guān)注我的github article
