axios发送常见请求方式以及拦截器的封装

EntyIU2023-10-24 12:16

一，常见请求

javascript 复制代码

//1.get--传递params

            axios.get("/test",{
                params:{
                    
                }
            })

//2.post--传递params

                 axios.post("/test",{},{
                params:{
                    
                }
            })
//3.post--传递body

                  axios.post("/test",{

                     name:""

                      })

二，封装请求拦截器

javascript 复制代码

import axios  from "axios";

const  _axios=axios.create({
    baseURL:"http://localhost:8088",

})

_axios.interceptors.request.use(
    function (config){
        //统一请求添加token
      config.headers={
        Authorization:"wlb-wlb123456"
      }
      return config;
    },
    function  (error){
       return Promise.reject(error)
    }
)

_axios.interceptors.response.use(
    function (config){
      return config;
    },
    function  (error){
       //可以在这里做统一的响应状态判断
       if(error.status===400){
         return Promise.resolve(400)
       }else if(error.status===401){
        //未授权跳转到登录页面
       }
       //如果上边没有处理对应的状态，那么异常还是会抛出给浏览器，所以，可以通过
       //每个状态判断完成以后Promise.resolve(400)，告诉浏览器自己已经解决了问题，就不会再抛出去了
       return Promise.reject(error)
    }
)

export default _axios;

请求拦截器可以帮我们做请求携带token，响应拦截器可以帮我们做响应状态判断，做对应的逻辑