天天看點

axios基礎(五):axios攔截器

請求攔截器與響應攔截器的概念

  • 請求攔截器:相當于一種請求檢測機制,隻有通過該檢測的請求才能被發送。
  • 響應攔截器:相當于一種響應檢測機制,隻有通過該檢測的響應才能被傳回。

https://link.juejin.cn/?target= 請求攔截器有什麼作用?

  • 請求攔截器可以給請求添加參數
axios基礎(五):axios攔截器

攔截器的執行順序是什麼?

  • 請求攔截器是誰在定義的最後,誰先攔截,相應攔截器則是誰先定義誰先攔截。
axios基礎(五):axios攔截器

模闆代碼

// 設定請求攔截器
axios.interceptors.request.use(function (config) {
    console.log("請求攔截器 攔截成功 1号");
    config.params = {a: 666666};    
    return config;
    // throw new Error;
}, function (error) {
    console.log("請求攔截器 攔截失敗 1号");
    return Promise.reject(error);
});

axios.interceptors.request.use(function (config) {
    console.log("請求攔截器 攔截成功 2号");
    return config;
    // throw new Error;
}, function (error) {
    console.log("請求攔截器 攔截失敗 2号");
    return Promise.reject(error);
});
// 設定響應攔截器
axios.interceptors.response.use(function (response) {
    console.log("響應攔截器 成功 1号");
    // console.log(response);
    return response.data;
}, function (error) {
    console.log("響應攔截器 default 1号");
    return Promise.reject(error);
});

axios.interceptors.response.use(function (response) {
    console.log("響應攔截器 成功 2号");
    return response;
}, function (error) {
    console.log("響應攔截器 default 2号");
    return Promise.reject(error);
});

// 使用axios發送請求
axios({
    method: 'GET',
    url: 'http://localhost:3000/posts'
}).then((response => {console.log(response)})).catch(reason => {console.log("自定義回調錯誤");});
      

繼續閱讀