Axios拦截器

axios拦截器的封装可以在main.js中进行，也可以新建一个js文件，单独对axios的拦截器进行分装，方式分别如下

一.在main.js中对axios拦截器进行封装

1.先安装axios

npm install axios --save

2.在mian.js中引入axios

import axios from 'axios'

3.挂载axios到vue全局上

Vue.prototype.$axios = axios

4.对axios添加拦截器（拦截内容的具体方式可以查看第二种方式）

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
	// 在发送请求之前做些什么
}, function (error) {
	// 对请求错误做些什么
})
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
	// 对响应数据做点什么
}, function (error) {
	// 对响应错误做点什么
})

二.在js文件中进行对axios拦截器的封装

1.在src目录下新建一个axios目录并添加一个request.js文件

2.在文件中分别引入

import axios from 'axios'

3.创建axios的实例

const service = axios.create({
	baseURL: process.env.BASE_API, // api的base_url
	timeout: 20000 // 请求超时时间
})

4.添加请求拦截器

service.interceptors.request.use(config => {
	if(){
		// 这里可以做一些其他判断，比如token是否存在
	}
	return config
}, error => {
	Promise.reject(error)
})

5.添加响应拦截器

service.interceptors.response.use(
	res => {
		if (res.status !== 200) {
			return Promise.reject('error')
		} else {
			if (!(res.data.code == 0 || res.data.code == 200 || res.data.error == "0")) {
				if (res.data.code == 403) {
					return Promise.reject(error)
				}
				if (res.data.code == 401) {
					if (location.pathname != '/login') {
						// 跳转到登陆页面
					}
				}
				return Promise.reject(res.data.message);
			} else {
				return res.data
			}
		}
	}, error => {
		let res = error.response
		if (res.status === 401) {
			if (location.pathname != '/login') {
				// 跳转到登陆页面
			}
		} else {
			return Promise.reject(error)
		}
	}
)

6.导出service实例

export default service

7.在需要使用实例的文件中引入service实例

import request from '@/axios/request.js'

request({
	url: `你请求的URL地址`,
	method: '你的请求方式',
}).then(res=>{
	console.log(res)
})