axios使用拦截器统一处理所有的http请求的方法_axios.create

axios

http

153 浏览量更新于2023-05-11 评论收藏 40KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

axios使用拦截器统一处理所有的使用拦截器统一处理所有的http请求的方法请求的方法

主要介绍了axios使用拦截器统一处理所有的http请求的方法,通过一段实例代码给大家介绍了axios拦截器使用，

代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下

axios使用拦截器使用拦截器

在请求或响应被 then 或 catch 处理前拦截它们。

http request拦截器拦截器

// 添加请求拦截器

axios.interceptors.request.use(function (config) {

// 在发送请求之前做些什么

return config;

}, function (error) {

// 对请求错误做些什么

return Promise.reject(error);

});

http respones拦截器拦截器

// 添加响应拦截器

axios.interceptors.response.use(function (response) {

// 对响应数据做点什么

return response;

}, function (error) {

// 对响应错误做点什么

return Promise.reject(error);

});

移除拦截器移除拦截器

var myInterceptor = axios.interceptors.request.use(function () {/*...*/});

axios.interceptors.request.eject(myInterceptor);

为自定义axios实例添加拦截器

var instance = axios.create();

instance.interceptors.request.use(function () {/*...*/});

PS：下面看下：下面看下axios拦截器使用拦截器使用

import axios from 'axios' // axios引用

import store from '../../store' // store引用

const serivce = axios.create({ // 创建服务

baseURL: 'http://test.api.rujiaowang.net', // 基础路径

timeout: 5000 // 请求延时

})

serivce.interceptors.request.use( // 请求拦截

config => {

if (store.getters.userToken) {

config.headers['X-Token'] = store.getters.userToken

config.headers['User-Type'] = store.getters.userType ? store.getters.userType : '' // 请求头中存放用户信息

config.onUploadProgress = (progressEvent) => {

var complete = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%'

store.dispatch('setupLoadPercent', complete)

}

return config

error => {

return Promise.reject(error)

}

)

serivce.interceptors.response.use( // 回复拦截，主要针对部分回掉数据状态码进行处理

response => {

return response

error => {

return Promise.reject(error)

}

)

export default serivce

总结总结

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

zcharzon

粉丝: 6
资源: 934

会员权益专享

axios使用拦截器统一处理所有的http请求的方法

评论0

会员权益专享

最新资源

axios使用拦截器统一处理所有的http请求的方法

评论0

解决Vue在封装了Axios后手动刷新页面拦截器无效的问题

vue axios登录请求拦截器

axios封装，使用拦截器统一处理接口，超详细的教程（推荐）

react axios请求拦截器封装

axios请求拦截器

axios请求拦截器封装

axios响应拦截器的使用方法

axios的拦截器功能

axios封装 拦截器

axios拦截器封装

axios拦截器的作用

在进行登录页面时怎么触发到axios 的拦截器

vueaxios配置拦截器

vue3在axios封装拦截器

Axios拦截器是用来做什么的

谈一谈axios的拦截器有哪些?你的项目里设置了什么?

axios 响应拦截器 不进入catch

axios拦截器的好处

axios响应拦截器-数据剥离

axios请求拦截器和vue-router的前置路由守卫有什么异同

会员权益专享

最新资源

axios封装拦截器

axios 响应拦截器不进入catch