axios封装拦截器

Axios简介

Axios 是一个基于 Promise 的 HTTP 客户端，可以用在浏览器和 node.js 中，本质是XMLHttpRequests请求即ajax请求。

拥有以下特性：

从浏览器中创建 XMLHttpRequests
 
从 node.js 创建 http 请求
 
支持Promise API;
 
能够拦截请求和响应；
 
能够转换请求和响应数据；
 
能够取消请求；
 
能够自定转化JSON数据；
 
客户端支持防御CSRF（XSRF）

封装拦截器

对请求或者响应拦截进行二次封装

需求分析

通常会使用 token 进行用户的身份认证。这就要求在认证通过后，我们需要在每个请求上都携带认证信息。针对这个需求，为了避免为每个请求单独处理，所以一般通过封装统一的 request 函数来为每个请求统一添加 token 信息。

但是如果响应进行统一处理的话，会越来越难维护，所以希望在接收到响应之后做一些额外的逻辑

因此，Axios 为我们提供了解决方案 —— 拦截器，作用如下：

请求拦截器：该类拦截器的作用是在请求发送前统一执行某些操作，比如在请求头中添加 token 字段。
 
响应拦截器：该类拦截器的作用是在接收到服务器响应后统一执行某些操作，比如发现响应状态码为 401 时，
自动跳转到登录页。

拦截器的使用方式如下：

在 axios 对象上有一个 interceptors 对象属性，该属性又有 request 和 response 2 个属性， axios.interceptors.request和 axios.interceptors.response 对象提供了 use 方法，就可以分别设置请求拦截器和响应拦截器：（use 方法支持 2 个参数，第一个参数类似 Promise 的 resolve 函数，第二个参数类似 Promise 的 reject 函数。我们可以在 resolve 函数和 reject 函数中执行同步代码或者是异步代码逻辑。）

axiosRequest.js

import axios from 'axios';

//每个请求的拦截器方法不一样时可写多个
class AjaxRequest {
	constructor() {
		//开发环境还是上线
		this.baseURL = process.env.NODE_ENV === 'development'? 'localhost:3000':'/'；
		this.timeout = 2000;
	}
	request(config) {			//用户请求设置的方法
		const instance = axios.create({
			baseURL: this.baseURL,
			timeout: this.timeout
		});
		//设置请求拦截器
		instance.interceptors.request.use(config => {
			config.headers.a = 1;			//例如给响应头 添加自定义属性,不能随便加 要与后台一致 不然报跨域
			return config;
		},err => Promise.reject(err));
		//设置响应拦截器
		instance.interceptors.response.use(res => res.data, err => Promise.reject(err));
		return instance(config);
	}
}

export default new AjaxRequest();