【Vue】學習筆記九：ES6 Promise、axios網絡請求封裝

---

Promise

簡介

Promise是ES6（ES2015）中的一個非常好用的工具類。

The Promise object is used for asynchronous computations. A Promise represents a single asynchronous operation that hasn’t completed yet, but is expected in the future.
譯文：Promise對象用於異步操作，它表示一個尚未完成且預計在未來完成的異步操作。

作用

1. 用於進行異步處理（網絡請求）
2. 可以將異步操作隊列化，按照期望的順序執行，返回符合預期的結果
3. 可以在對象之間傳遞和操作promise，幫助我們處理隊列

Promist的三種狀態

狀態	名稱	說明
pending	等待狀態	例如正在進行網絡請求,或者正在等待定時器觸發
fulfill	滿足狀態	當我們主動回調resolve時,就處於該狀態,並且回調.then()
reject	拒絕狀態	主動回調reject時,就處於該狀態,並且回調.catch()

封裝Promise

基本使用模擬

const pms = new Promise((resolve,reject)=>{
   //模擬異步操作
  setTimeout(()=>{
      //執行回調
      resolve('setTimeout data')
  },2000)
}).

--------------------------------------------

pms.then(res=>{
    //處理resolve
   console.log(res);
}).catch(err=>{
    //處理錯誤
    console.log(err);
});

一般來說都會把Promise對象return出去，然後掉用着接受並處理resolve回調結果。

並行處理
使用Promise的all函數，all(promiseArr[]).then(( resultArr[] )=>{})

new Promise((resolve,reject)=>{
  console.log('primise 回調');
  setTimeout(()=>{
      console.log('setTimeout success');
      resolve('setTimeout data')
  },2000)
  
}).then(res=>{
  console.log(res);
  
}).catch(err=>{
});
Promise.all([
  new Promise((resolve,reject)=>{
      //模擬異步操作
      setTimeout(()=>{
          //回調處理結果
          resolve("setTimeout 1")
      },1000)
  }),
  new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve("setTimeout 2")
    },1000)
  }),
]).then((resultArr)=>{
    //處理結果
    console.log(resultArr[0]);
    console.log(resultArr[1]);
})

axios

常用網絡請求方式

axios(config)

axios.request(config)

axios.get(url,config)

axios.delete(url[, config])

axios.head(url[, config])

axios.post(url[, data[, config]])

axios.patch(url[, data[, config]])

配置項

配置項	關鍵字	示例
請求地址	url	url: ‘/homeData’
請求類型	method	method: ‘get’, get可替換爲其他請求類型
請求根路徑	baseURL	baseURL:‘http://www.xxx.com/api’
超時設置	timeout	timeout:2000, 2秒鐘
請求前數據處理	transformRequest	transformRequest:[function(data){ }]
請求後的數據處理	transformResponse	transformResponse: [function(data){ }]
自定義請求頭	headers	headers:{‘x-Requested-With’:‘XMLHttpRequest’}
URL查詢對象	params	params: {id:1001}
查詢對象序列化函數	paramsSerializer	paramsSerializer: function(params){ }}
request body	data	data:{key:‘ddddd’}
跨域是否帶Token	withCredentials	withCredentials:false
自定義請求處理	adapter	adapter:function(resolve, reject, config){ }
身份驗證信息	auth	auth:{uname:‘xxx’, pwd:‘123’}
響應數據格式	responseType	responseType: ‘json’, 格式: json/blob/document/arraybuffer/text/stream

結合Promise進行網絡請求封裝

// 一般方案
export function myAxios(config){
 return new Promise((resolve,reject)=>{
     const axiosInstance = axios.create({
       baseURL:'http://www.xxx.com:8080/api',
       timeout:5000
     });
     //發送真正的網絡請求
     axiosInstance(config).then(res=>{
       //回調resolve
       resolve(res);
     }).catch(err=>{
       //回調異常
       reject(err)
     })
 })
 
//優化方案
export function myAxios(config){
 return new Promise((resolve,reject)=>{
     const axiosInstance = axios.create({
       baseURL:'http://www.xxx.com:8080/api',
       timeout:5000
     });
     //發送網絡請求, 因爲axios會返回Promise對象，所以不用再在內部返回
     return axiosInstance(config)
 })


//使用示例
myAxios({
 url:'/homeData'
}).then(res=>{
 //處理請求結果
 console.log(res)
}).catch(err=>{
 //處理異常
 console.log(err)
});

攔截器

axios提供了攔截器, 用於我們正在每次發送的request或着得到的response進行處理。

//配置請求和響應攔截
axiosInstance.interceptors.request.use(config=>{
    //config 爲request內容
    //todo
    return config;//處理後轉發
},err=>{
    //此處可以對攔截器中的err進行處理
    return err;
}); 

axiosInstance.interceptors.response.use(response=>{
    //config 爲response內容
    //todo
    return response;//處理後轉發
},err=>{
    //此處可以對攔截器中的err進行處理
    return err;
}); 

Q&A請指正！