axios 簡(jiǎn)介：

Axios 是一個(gè)基于 promise 網(wǎng)絡(luò)請(qǐng)求庫，作用于node.js 和瀏覽器中。 它是 isomorphic 的(即同一套代碼可以運(yùn)行在瀏覽器和node.js中)。在服務(wù)端它使用原生 node.js http 模塊, 而在客戶端 (瀏覽端) 則使用 XMLHttpRequests。

axios的特性：

• 從瀏覽器創(chuàng)建 XMLHttpRequests
• 從 node.js 創(chuàng)建 http 請(qǐng)求
• 支持 Promise API
• 攔截請(qǐng)求和響應(yīng)
• 轉(zhuǎn)換請(qǐng)求和響應(yīng)數(shù)據(jù)
• 取消請(qǐng)求
• 自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)
• 客戶端支持防御XSRF

概述：什么是請(qǐng)求響應(yīng)攔截器？

所謂的攔截器就是 在請(qǐng)求或響應(yīng)被 then 或 catch 處理前攔截它們。簡(jiǎn)單的來說就是，當(dāng)我們發(fā)起一個(gè)請(qǐng)求前，如果設(shè)置了請(qǐng)求攔截器，則會(huì)優(yōu)先執(zhí)行攔截器里面的方法，我們可以在請(qǐng)求正式發(fā)向后端服務(wù)器之前，對(duì)此次的請(qǐng)求 進(jìn)行“二次加工”, 然后再放行給后端服務(wù)器，同理，響應(yīng)攔截器就是對(duì)請(qǐng)求回來的數(shù)據(jù)，做統(tǒng)一處理，如解構(gòu)等，然后再把處理好的數(shù)據(jù)，返回給頁面，頁面就可以直接收到，處理好的數(shù)據(jù)，同時(shí)，攔截器還能夠?qū)?，錯(cuò)誤請(qǐng)求或錯(cuò)誤響應(yīng)，做出統(tǒng)一的管理提示，可以理解成，攔截器就是我們和服務(wù)器交互請(qǐng)求時(shí)的，安全保障員。

配置使用請(qǐng)求響應(yīng)攔截器：

import axios from "axios";   //導(dǎo)入原始 axios 方法 ，并在后面為其關(guān)聯(lián)上攔截器


// 添加請(qǐng)求攔截器
axios.interceptors.request.use(config => {  //接收一個(gè)參數(shù)，可以拿到我此次請(qǐng)求的所有信息
    // 在發(fā)送請(qǐng)求之前做些什么
    config.timeout = 90000 // 例如配置添加超時(shí)時(shí)間
    return config;        //最后將 處理好的請(qǐng)求信息返回出去，就代表放行
  },error => {              //請(qǐng)求錯(cuò)誤時(shí)，會(huì)觸發(fā)這里，同樣能拿到請(qǐng)求錯(cuò)誤的信息
    // 對(duì)請(qǐng)求錯(cuò)誤做些什么
    return Promise.reject(error);
  });





// 添加響應(yīng)攔截器
axios.interceptors.response.use(response => {
    // 2xx 范圍內(nèi)的狀態(tài)碼都會(huì)觸發(fā)該函數(shù)。
    // 對(duì)響應(yīng)數(shù)據(jù)做點(diǎn)什么
    return response;
  }, error=> {
    // 超出 2xx 范圍的狀態(tài)碼都會(huì)觸發(fā)該函數(shù)。
    // 對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么

  if (error.response.status === 404) {        //例如，在這里面可以配置，后臺(tái)響應(yīng)錯(cuò)誤的數(shù)據(jù)處理提示
       Message({
        message: "請(qǐng)求地址出錯(cuò)",
        type: "warning"
      })
    } else (error.response.status === 500) {
      Message({
        message: "請(qǐng)求接口出錯(cuò) 500",
        type: "warning"
      })
    }
    // return Promise.reject(error.response) // 返回接口返回的錯(cuò)誤信息
    
    return new Promise(() => { })         //這里如果，直接返回一個(gè) new Promise ，則在頁面中，不會(huì)收到任何返回值，
    //不論是，請(qǐng)求成功還是敗，都不會(huì)返回，這樣一來，頁面中調(diào)用，axios 請(qǐng)求方法時(shí)，就不用再定義 then 和 catch  方法了，因?yàn)椋绻?qǐng)求錯(cuò)誤，就沒有返回值，有返回值，
    //就代表一定請(qǐng)求成功，這樣，會(huì)是的頁面里的代碼更加精簡(jiǎn) 
  });

總結(jié)

好了以上，就是給大家?guī)淼?axios 請(qǐng)求響應(yīng)攔截器的使用，感謝小伙伴的閱讀支持！

???♂? 博主座右銘：向陽而生，我還在路上！
——————————————————————————————
??博主想說：將持續(xù)性為社區(qū)輸出自己的資源，同時(shí)也見證自己的進(jìn)步！
——————————————————————————————
???♂? 如果都看到這了，博主希望留下你的足跡！【??收藏！??點(diǎn)贊！??評(píng)論！】
——————————————————————————————文章來源地址http://www.zghlxwxcb.cn/news/detail-597162.html

到了這里，關(guān)于axios 中使用請(qǐng)求響應(yīng)攔截器的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！