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等方法同理可进行简单的封装。