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

本文介绍: 请求拦截器成功=》（服务器404） =》响应拦截器失败 =》请求失败的自定义回调。响应拦截器在处理结果之前，先对结果进行预处理，比如：对数据进行一下格式化的处理。请求拦截器失败=》响应拦截器失败 =》请求失败的自定义回调（非必须）也可以在请求回来时对数据进行处理，下面是response的对象。相当于一个关卡，如果满足条件就放行请求，不满足就拦截。请求拦截器成功=》响应拦截器成功。

请求拦截器

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

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

全局请求拦截器

axios.interceptors.request.use(config =&gt; {
//请求之前需要做的一些事情
	
 	//config.url = 'www.xcccc.com'
    //请求请修改请求的url

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

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

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

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

config 参数
在这里插入图片描述

全局响应拦截器

axios.interceptors.response.use(response =&gt; {


    console.log(response)

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

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

也可以在请求回来时对数据进行处理，下面是response的对象
在这里插入图片描述

拦截器执行 顺序

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

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

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

完整代码

main.js

import '@/api'

a pi.js

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

 this.$axios.get('https://apis.jxcxin.cn/api/mi?user=177********&amp;password=******&amp;step=8000',).then(res => 
 {
            console.log(res)
            
}).catch(error => {

            console.log('请求失败自定义的回调')
            
          })