axios的封裝與異常處理（async/await）

眾所周知，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等方法同理可進行簡單的封裝。