axios的全局配置★拦截器

axios的全局配置

axios.defaults.baseURL=="http://localhost:2005/api/aab"//配置基础路径
axios.defaults.timeout=5000//配置请求时间如果在规定时间内没有返回结果就报错
// timeout设置最大响应时间,左边设置的是5秒。
// 就是如果向后端请求如果五秒都没有回来响应就会自动断开请求。

axios.get("http://localhost:2005/api/aab", {
    params: {
        id: "1",
        name: "马嘉宁"
    }
}).then(function (res) {
    console.log("axios.defaults.timeoutaxios.get", res)
}).catch((err)=>{
    console.log("axios.defaults.timeoutaxios.get错误",err)
})

const request = axios.create({
    // baseURL: '/dev-api',//设置基础路径
    baseURL: "http://localhost:2006/",//设置基础路径
    timeout: 5000,//设置最大响应时间,左边设置的是5秒。
    // 就是如果向后端请求如果五秒都没有回来响应就会自动断开请求。
    //工作后：设置请求头，设置token。后端才会响应数据
    // headers: {'Authorization': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkYXRhIjoiMTIzNDU2IiwiaWF0IjoxNTk1NTI0ODY3LCJleHAiOjE1OTYxMjk2Njd9.4jkcI0DMYv3A1REGXQsJmWtwsxBU7nuRvFO7NJz2pms'} 
  });

//拦截器

  module.exports = request;//request==axios 但是又比axios多了一些基础设置
可以导出多个axios基础配置,并且以对象的形式去导出

axios拦截器
axios给我们提供了两大类拦截器,一种是请求方向的拦截器(成功的请求,失败的请求)
另一种是响应方的(成功的,失败的)
axios拦截器的主要作用:用于我们在网络请求的时候在发起请求或者响应时对操作进行响应的处理

请求拦截器

        // axios.defaults.baseURL="http://localhost:2005/api/aab"//配置基础路径
    axios.defaults.timeout=5000//配置请求时间如果在规定时间内没有返回结果就报错

    axios.interceptors.request.use((config)=>{
        console.log("进入请求拦截器")
        console.log("拦截器打印的config",config)
//拦截器打印的config是你请求的信息
        // 注意拦截请求之后如果想请求还能发出一定要return config
        return config //这步操作是放行请求,如果没有这一步是不会发请求的
    },(err)=>{
        console.log("请求方向失败")
        console.log(err)
    })

    axios.get("http://localhost:2005/api/aab", {
        params: {
            id: "1",
            name: "马嘉宁"
        }
    }).then(function (res) {
        console.log("axios.get", res)
    })

响应拦截器

// 响应拦截器

axios.interceptors.response.use((config)=>{
    console.log("进入请求拦截器")
    console.log("拦截器打印的config",config)
    // 打印的config 是你响应回来的所有数据信息
    // 如果你想让响应拿到的是响应回来的data数据,而其他的数据又不想要
    // 就不要直接return 返回config 而是return config.data
    return config.data//这一步是放行响应,如果没有这一步就算请求发送成功,后端的响应给前端也是成功的,我们前端也拿不到响应的数据
},(err)=>{
    console.log("响应方向失败")
    console.log(err)
})

axios.get("http://localhost:2005/api/aab", {
    params: {
        id: "1",
        name: "马嘉宁"
    }
}).then(function (res) {
    console.log("axios.get", res)
})