vue axios 请求拦截和响应式拦截

1、请求拦截：在我们发送请求给服务器前我们可以做的一些事

2、响应式拦截：请求完成服务器返回我们数据及请求状态，在这里可以对响应统一做处理

import axios from 'axios'
import router from '@/router'
import { MessageBox, Message,Loading } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'

引入 axios 如果需要进行页面的跳转及操作需引入 router 即可

store 状态管理 获取一些你需要用的到的值
getToken 获取 token

一、创建 axios 实例

//创建axios实例，在这里可以设置请求的默认配置
const service = axios.create({ 
    timeout: 60000, // 设置超时时间60s
    baseURL: process.env.NODE_ENV === 'production' ? '' : 'http://10.10.0.40:8000/' 
    //根据自己配置的反向代理去设置不同环境的baeUrl
})

一些其他的实例配置 可以按自己的需求来 跨域啊或其他的

二、配置请求拦截

service.interceptors.request.use(config => {
	if (store.getters.token) {
		const token = getToken();
		config.headers['Authorization'] =  `Bearer ${token}`;
        // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改 
	}
	return config;
}, error => {
	Message(error);
	return Promise.reject(error);
})

请求时，如果 token 存在， 将 token 作为唯一标识放在请求中，这个也是很常规的一个需求。

三、配置响应拦截

service.interceptors.response.use(response => {
		// loadingInstance.close() // 关闭转圈加载 这里我暂时不需要
		console.log(response)
		if (response.data.code === 1000) { 
			// 响应结果里的code: 1000是我与后台的约定，大家可以根据实际情况去做对应的判断 这里是请求成功时的处理
			return Promise.resolve(response) 
		}
	}, error => {
		// 有时 我们直接获取status 或者直接打印错误信息 是拿不到的或者拿到一个字符串 需要匹配拿到status(响应状态码)
		const status = Number(error.toString().match(/\d{3}/)[0]) 
		//我们拿到 响应状态码 进行业务规则的处理
		if (status) {
			/**
			 * 在这里：可以根据业务需求可以在请求失败后做什么。
			 * 根据请求失败的http状态码去给用户相应的提示
			 */
			// 根据状态码 你需要做的事
			return Promise.reject(error)
		} else {
			Message("请求失败")
			return Promise.reject(new Error('请求失败'))
		}
})
  

四、Vue 项目中使用

 request.js

//创建axios实例，在这里可以设置请求的默认配置
const service = axios.create({ 
    timeout: 60000, // 设置超时时间60s
    baseURL: process.env.NODE_ENV === 'production' ? '' : 'http://10.10.0.40:8000/' 
    //根据自己配置的反向代理去设置不同环境的baeUrl
})

service.interceptors.request.use(config => {
	if (store.getters.token) {
		const token = getToken();
		config.headers['Authorization'] =  `Bearer ${token}`;
        // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改 
	}
	return config;
}, error => {
	Message(error);
	return Promise.reject(error);
})

service.interceptors.response.use(response => {
		// loadingInstance.close() // 关闭转圈加载 这里我暂时不需要
		console.log(response)
		if (response.data.code === 1000) { 
			// 响应结果里的code: 1000是我与后台的约定，大家可以根据实际情况去做对应的判断 这里是请求成功时的处理
			return Promise.resolve(response) 
		}
	}, error => {
		// 有时 我们直接获取status 或者直接打印错误信息 是拿不到的或者拿到一个字符串 需要匹配拿到status(响应状态码)
		const status = Number(error.toString().match(/\d{3}/)[0]) 
		//我们拿到 响应状态码 进行业务规则的处理
		if (status) {
			/**
			 * 在这里：可以根据业务需求可以在请求失败后做什么。
			 * 根据请求失败的http状态码去给用户相应的提示
			 */
			// 根据状态码 你需要做的事
			return Promise.reject(error)
		} else {
			Message("请求失败")
			return Promise.reject(new Error('请求失败'))
		}
})

export default service;
  

api.js

import request from '@/utils/request'
export default {
    getUserList(params, data) {
        return request({
            url: '/user/info/list',
            method:"post",
            params,
            data
        })
    }
}

index.vue

export default {
    data() {
        return {

        };
    },
    mounted() {
        this.getInit();
    },
    methods: {
        async getInit() {
            try {
                let data = await this.$Api.getUserList({
                    page: 1,
                    pageSize: 10
                 });
                console.log(data);
            } catch (error) {
                console.log(error);
            }
        }
    }
}

首先需要把 api.js 注册到全局，通过访问 api.js 文件中的方法请求。

需要多个拦截的话，创建一个公用方法去调用。

拦截器到这里就讲完了，具体的细节就靠你了。