轉載自：ajax、Promise、axios總結 - 知乎 (zhihu.com)
ajax
AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）
AJAX 不是新的編程語言，而是一種使用現有標準的新方法，
AJAX 最大的優點是在不重新加載整個頁面的情況下，可以與服務器交換資料并更新部分網頁內容，
AJAX 不需要任何瀏覽器插件，但需要用戶允許JavaScript在瀏覽器上執行，
//手寫實作ajax
var request = new XMLHttpRequest()
request.open('GET', '/a/b/c?name=ff', true);
request.onreadystatechange = function () {
if(request.readyState === 4 && request.status === 200) {
console.log(request.responseText);
}};
request.send();
Promise
1.Promise的作用
主要用于異步計算
可以將異步操作佇列化，按照期望的順序執行，回傳符合預期的結果
可以在物件之間傳遞和操作promise，幫助我們處理佇列
2.理解
promise是一個物件，物件和函式的區別就是物件可以保存狀態，函式不可以（閉包除外）
并未剝奪函式return的能力，因此無需層層傳遞callback，進行回呼獲取資料
代碼風格，容易理解，便于維護
多個異步等待合并便于解決
3.案例
new Promise(
function (resolve, reject) {
// 一段耗時的異步操作
resolve('成功') // 資料處理完成
// reject('失敗') // 資料處理出錯
}
).then(
(res) => {console.log(res)}, // 成功
(err) => {console.log(err)} // 失敗
)
resolve作用是，將Promise物件的狀態從“未完成”變為“成功”（即從 pending 變為 resolved），
在異步操作成功時呼叫，并將異步操作的結果，作為引數傳遞出去；
reject作用是，將Promise物件的狀態從“未完成”變為“失敗”（即從 pending 變為 rejected），
在異步操作失敗時呼叫，并將異步操作報出的錯誤，作為引數傳遞出去
處，
4.promise有三個狀態
pending[待定]初始狀態
fulfilled[實作]操作成功
rejected[被否決]操作失敗
當promise狀態發生改變，就會觸發then()里的回應函式處理后續步驟，
promise狀態一經改變，不會再變
Promise物件的狀態改變，只有兩種可能：
從pending變為fulfilled
從pending變為rejected，
這兩種情況只要發生，狀態就凝固了，不會再變了
5.錯誤處理兩種做法
第一種：reject('錯誤資訊').then(() => {}, () => {錯誤處理邏輯})
第二種：throw new Error('錯誤資訊').catch( () => {錯誤處理邏輯})
推薦使用第二種方式，更加清晰好讀，并且可以捕獲前面所有的錯誤（可以捕獲N個then回呼錯誤）
6.API
Promise.all([promise1, promise2]).then(success1, fail1)
promise1和promise2都成功才會呼叫success1
Promise.race([promise1, promise2]).then(success1, fail1)
promise1和promise2只要有一個成功就會呼叫success1；
promise1和promise2只要有一個失敗就會呼叫fail1；
總之，誰第一個成功或失敗，就認為是race的成功或失敗，
7.手寫Promise
class Promise {
queue1 = [] // queue1 為了容納成功之后的函式們
queue2 = [] // queue2 為了容納失敗之后的函式們
constructor(fn){ // new Promise(fn)
const resolve = (data)=>{ // fn 接受 resolve 并在成功的時候呼叫
setTimeout(()=>{ // 要等一會，否則 queue1 和 queue2 為空
for(let i =0;i<this.queue1.length;i++){
this.queue1[i](data)
}
})
}
const reject = (reason)=>{
setTimeout(()=>{
for(let i =0;i<this.queue2.length;i++){
this.queue2[i](reason)
}
})
}
fn(resolve, reject)
}
then(s, e){
this.queue1.push(s)
this.queue2.push(e)
return this
}
}
p1 = new Promise((resolve, reject)=>{
console.log('hi2');
if(Math.random()>0.5){
resolve('大')
}else{
reject('小')
}
})
p1.then((data)=>{console.log('成功')}, (reason)=>{console.log('失敗')})
.then(()=>{console.log('成功2')}, ()=>{console.log('失敗2')})
.then(()=>{console.log('成功3')}, ()=>{console.log('失敗3')})
axios
1.作用
支持node端和瀏覽器端:同樣的API，node和瀏覽器全支持，平臺切換無壓力
支持 Promise:使用Promise管理異步，告別傳統callback方式
豐富的配置項:支持攔截器等高級配置
2.特性
從瀏覽器中創建 XMLHttpRequests
從 node.js 創建 http 請求
支持 Promise API
攔截請求和回應
轉換請求資料和回應資料
取消請求
自動轉換 JSON 資料
客戶端支持防御 XSRF
3.案例
//get請求
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
//post請求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
//并發多個請求
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// 兩個請求現在都執行完成
}));
4.axios API
axios(config)
// 發送 POST 請求
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
axios(url[, config])
// 發送 GET 請求（默認的方法）
axios('/user/12345');
列舉
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
5.創建實體
//axios.create([config])
const instance = axios.create({
baseURL: 'https://some-domain.com/api/',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});
列舉
axios#request(config)
axios#get(url[, config])
axios#delete(url[, config])
axios#head(url[, config])
axios#options(url[, config])
axios#post(url[, data[, config]])
axios#put(url[, data[, config]])
axios#patch(url[, data[, config]])
6.攔截器
// 添加請求攔截器
axios.interceptors.request.use(function (config) {
// 在發送請求之前做些什么
return config;
}, function (error) {
// 對請求錯誤做些什么
return Promise.reject(error);
});
// 添加回應攔截器
axios.interceptors.response.use(function (response) {
// 對回應資料做點什么
return response;
}, function (error) {
// 對回應錯誤做點什么
return Promise.reject(error);
});
7.移除攔截器
const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);
8.自定義 axios 實體添加攔截器
const instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});
9.錯誤處理
axios.get('/user/12345')
.catch(function (error) {
if (error.response) {
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
console.log(error.request);
} else {
console.log('Error', error.message);
}
console.log(error.config);
});
ajax、Promise、axios的對比
axios是通過promise實作對ajax技術的一種封裝，就像jQuery實作ajax封裝一樣
ajax技術實作了網頁的區域資料重繪，axios實作了對ajax的封裝
axios是ajax ajax不止axios
優缺點：
ajax：
本身是針對MVC的編程,不符合現在前端MVVM的浪潮
基于原生的XHR開發，XHR本身的架構不清晰，已經有了fetch的替代方案
JQuery整個專案太大，單純使用ajax卻要引入整個JQuery非常的不合理
（采取個性化打包的方案又不能享受CDN服務
axios：
從 node.js 創建 http 請求
支持 Promise API
客戶端支持防止CSRF
提供了一些并發請求的介面（重要，方便了很多的操作）
為什么vue不使用ajax用axios：
axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，本質上也是對原生XHR的封裝，
只不過它是Promise的實作版本，符合最新的ES規范，它本身具有以下特征：
從瀏覽器中創建 XMLHttpRequest
支持 Promise API
客戶端支持防止CSRF
提供了一些并發請求的介面（重要，方便了很多的操作）
從 node.js 創建 http 請求
攔截請求和回應
轉換請求和回應資料
取消請求
自動轉換JSON資料
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/296296.html
標籤：其他
下一篇：GWAS--Plink分析