axios的封装与异常处理（async/await）_axios 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);
    })
  });
 },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

那么我在业务代码中请求就很简单了,

//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);
	//错误处理
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

另外post、put等方法同理可进行简单的封装。