Vue 3 自定义 axios 获取、放置、发布

Question

我想用 axios 自定义我的 get、post、put 函数。 在执行 axios.create() 操作后，当我执行 get 操作时，我希望它每次都执行 then 和 catch 操作。

import axios from "axios";

export default (apiName = "") => {
    let headers = {
        "Content-Type": "application/json"
    };

    let token = JSON.parse(localStorage.getItem("token") || "{}");

    if (token && token !== "") {
        headers.Authorization = `Bearer ${token.AccessToken}`;
    }
    const instance = axios.create({
        baseURL:
            apiName === ""
                ? process.env.VUE_APP_API_URL
                : process.env.VUE_APP_API_URL + apiName,
        withCredentials: false,
        headers: headers
    });
    return instance;
};

axios.post('/api/Export/CopyShippingPlan/', plan)
            .then(handleResponse)
            .catch((error) => {
                console.log(error);
            });

我想在 axios.create 之后在这里定义 axios.post ，然后在我调用 axios.post 动作的任何地方都可以捕捉动作。 所以我不想每次都使用 then 并抓住我使用 axios 的地方。

Answer 1

我认为您正在寻找interceptors ：

• 每个 axios 响应都会调用响应拦截器
• 请求拦截器将在每个 axios 请求之前调用

例子：

const ApiService = axios.create()

ApiService.interceptors.response.use(
    config => {
        //your code

        return config
    },
    error => {
        console.log(error)
        return Promise.reject(error)
    })


ApiService.interceptors.request.use(
    config => {
        //your code
        
        return config
    },
    error => {
        console.log(error)
        return Promise.reject(error)
    })

设置它们后，您不需要做任何特别的事情，只需调用axios.get 、 axios.post等。