這篇文章就跟大家介紹$.ajax、 axios 、fetch分別是什麼，是大家可以詳細了解fetch的使用方法。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。
Ajax 是什麼？
答案：Ajax是一種可以在瀏覽器和伺服器之間使用非同步資料傳輸（HTTP請求）的技術。使用它可以讓頁面請求少量的數據，而不用刷新整個頁面。而傳統的頁面（不使用Ajax）要刷新部分內容，必須重載整個網頁頁面。
Ajax 基於什麼？
答案：它是基於的是XMLHttpRequest（XHR）。這是一個比較粗糙的API，不符合關注分離的設計原則（Separation of Concerns），配置和使用都不是那麼友善。
$.ajax 的產生背景？
答：基於上面的原因，各種ajax函式庫引用而生，然而最有名的就是jQuery的API中的 $.ajax() 。 $.ajax() 它的一個優勢非同步操作，但jQuery的非同步操作是基於事件的非同步模型，沒有promise那麼友善。
fetch 產生的背景？
答：綜合上面所講的各種因素，fetch這個api應運而生。但好用歸好用，它存在著一些問題（這個問題下面詳講，並講解相對應的解決方案），再加上兼容性問題（ie壓根不支持），所以很多開發者使用了axios這個第三方庫。
支援promise的函式庫（axios）？
答案：axios 這個函式庫現在是比較通用的產業解決方案，axios 流行開來的一個原因是promise，另一個原因是基於資料操作的函式庫的流行（vue.js, angular.js, react.js等），而傳統的jQuery是基於dom操作的函式庫。但它也存在著缺陷，就是我們使用前，要確保這個函式庫已經被引進。
其實，就我個人而言，我還是比較喜歡用 fetch 的。在開發上遇到相容性的問題，只需要同構fetch即可，而不需要額外的引進一個函式庫。下面就重點說fetch。
fetch(url, options) .then(response => console.log(responese)) .catch(err => console.log(err))
url：存取位址
options：常用設定參數
response: 要求回傳物件
請求參數設定 詳情可參考MDN fetch
#得到資料你需要兩個步驟
fetch('https://api.github.com/users/lvzhenbang/repos')
.then(res => {
console.log(res)
return res.text()
}).then(data => {
console.log(data)
})透過上面的程式碼，可以發現直接列印回傳的Response 物件中壓根就沒有數據，要想取得到所需的數據，必須經過一個中間的方法response.text() （fetch提供了5中方法）
而反觀axios 使用起來就要方便的多，它返回的Response 物件中卻有數據，在data 屬性內。參考程式碼如下：
axios.get('https://api.github.com/users/lvzhenbang/repos')
.then(res => console.log(res));當然，這也不算是一個大問題，就是使用略顯麻煩了點。
fetch的請求預設是不帶cookie
#解決這個問題，需要在options 中配置{credentials: 'include'}
#並非所有的請求錯誤都會reject
也就是說catch 方法並不能捕捉所有的錯誤，當錯誤可以用一個狀態碼（如：404，500等）的形式表示時，
不會擁有reject，只有當網路故障或要求被封鎖時catch 才有效。 解決這個問題，我們可判斷Response 物件中的ok 是否為true，如果不是，用
手動新增一個
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###，而這並不是我們想要的，當然使用###axios## # 則不需要考慮這個問題，程式碼如下：###axios.get('https://api.github.com/usrs/lvzhenbang/repos')
.then(res => console.log(res))
.catch(err => console.log(err));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)
})res.status(404).send({
err: 'not found'
})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
}))
}以上问题解决并优化fetch的使用后，发现fetch还是一个不错的选择。针对不同使用情况可以作如下处理：
首先，要引入 es5-shim 解决fetch这个新特性的同构；
其次，要引入 es6-promise 解决promise的兼容问题；
然后，引入 fetch-ie8 解决fech的同构问题；
最后，引入 fetch-jsonp 解决跨域问题。
当然，你也不需要针对性的解决这些问题，GitHub团队提供了一个polyfill解决方案，你不需要一步步的是实现。只需要两步：
安装 fetch package
npm install whatwg-fetch --save
在使用的模块引入 fetch
import 'whatwg-fetch' window.fetch(url, options)
其他的使用和 fetch 则这个原生的API雷同。
获取Promsie的状态，如：isRejected, isResolved
如果使用习惯了jquery的progress方法的，或者使用deffered的一些方法
具体 fetch 实现了哪些与jquery类似的方法可参考whatwg-ftch 或者 fetch-issue
以上是$.ajax、 axios 、fetch是什麼？詳解fetch的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
