Axios 拦截器 请求拦截器 响应拦截器

请求拦截器

相当于一个关卡,如果满足条件就放行请求,不满足就拦截

响应拦截器 在处理结果之前,先对结果进行预处理,比如:对数据进行一下格式化的处理

全局请求拦截器

javascript 复制代码
axios.interceptors.request.use(config => {
//请求之前需要做的一些事情
	
 	//config.url = 'www.xcccc.com'
    //请求请修改请求的url

    //config.timeout = 2000
    //请求前修改超时时间

    //config.method = 'POST'
    //修改请求方式

    return config //请求成功必须返回
}, error => {

    return Promise.reject(error) //请求失败时的函数
 
}

config 参数


全局响应拦截器

javascript 复制代码
axios.interceptors.response.use(response => {


    console.log(response)

    //return response.data
    //直接将 res.data数据返回
	return response
}, error => {

    console.log('响应数据失败')
    return Promise.reject(error)
    //请求失败时的函数
}
)

也可以在请求回来时对数据进行处理,下面是response的对象


拦截器执行顺序

请求拦截器成功=》响应拦截器成功


请求拦截器失败=》响应拦截器失败 =》请求失败的自定义回调(非必须)


请求拦截器成功=》(服务器404) =》 响应拦截器失败 =》请求失败的自定义回调


完整代码

main.js

javascript 复制代码
import '@/api'

api.js

javascript 复制代码
import axios from "axios";
import Vue from "vue";

//请求拦截器 表示请求要发出时需要的操作
axios.interceptors.request.use(config => {

    // config.url = 'www.xcccc.com'
    // //请求请修改请求的url

    // config.timeout = 2000
    // //请求前修改超时时间

    // config.method = 'POST'
    // //修改请求方式


    console.log('请求时发送成功')

    return config //请求成功必须返回
}, error => {

    console.log('请求时发送失败')
    return Promise.reject(error)
    //请求失败时的函数
})

axios.interceptors.response.use(response => {

    return response
    //直接将 res.data数据返回
}, error => {

    console.log('响应数据失败')
    return Promise.reject(error)
}
)

Vue.prototype.$axios = axios
javascript 复制代码
 this.$axios.get('https://apis.jxcxin.cn/api/mi?user=177********&password=******&step=8000',).then(res => 
 {
            console.log(res)
            
}).catch(error => {

            console.log('请求失败自定义的回调')
            
          })
相关推荐
知识分享小能手5 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one5 小时前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲5 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
TomCode先生5 小时前
c#动态树形表达式详解
开发语言·c#
mCell5 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
高-老师6 小时前
基于R语言的物种气候生态位动态量化与分布特征模拟
开发语言·r语言·物种气候
大翻哥哥6 小时前
Python 2025:量化金融与智能交易的新纪元
开发语言·python·金融
weixin_437830947 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
超级无敌攻城狮7 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
鹿鹿学长7 小时前
2025年全国大学生数学建模竞赛(C题) 建模解析|婴儿染色体数学建模|小鹿学长带队指引全代码文章与思路
c语言·开发语言·数学建模