axios的封裝與異常處理(async/await)
阿新 • • 發佈:2020-07-31
眾所周知,es新增了promise,避免了回撥地獄。而es7的async/await更加完美的將非同步實現為同步程式碼。
更多關於promise,async/await,推薦:阮一峰
在vue專案中,http請求我們更多用到的是axios,如果不進行封裝,那麼在業務程式碼中的每次請求都需要重複大量的axios請求程式碼,下面以get方法為例進行初步的封裝,新建http.js如下:
import axios from 'axios'; //攔截器 service.interceptors.response.use( response => { const { data: { code, message } } = response;if (code === 10){ return response; } else if (code === 20) { //錯誤處理 throw new Error(`response code = 20!, message: ${message}`); } }, error => { //異常處理 return Promise.reject(error.response.data); } ); get(url) { return new Promise((resolve,reject) => { service({ method:'get', url }) .then(response => { resolve(response.data); }) .catch(err => { reject(err); }) }); },
那麼我在業務程式碼中請求就很簡單了,
//vue-cli的main.js中 import http from './http.js'; //引入上面建立的http.js Vue.prototype.$http = http; //業務程式碼中 try { const res = await this.$http.get(url1); const res = await this.$http.get(url2); ... //成功處理 } catch (error) { console.error(error); //錯誤處理 }
另外post、put等方法同理可進行簡單的封裝。