任何與後端服務(wù)器通信的Web 應(yīng)用程序都離不開(kāi)HTTP 請(qǐng)求。前端需要數(shù)據(jù)，因此它通過(guò)網(wǎng)絡(luò)HTTP 請(qǐng)求（或通常所說(shuō)的Ajax）請(qǐng)求數(shù)據(jù)，服務(wù)器返回答案。如今幾乎每個(gè)網(wǎng)站都以某種方式執(zhí)行此操作。

對(duì)於大型網(wǎng)站，我們可以預(yù)期會(huì)看到更多這樣的請(qǐng)求。更多數(shù)據(jù)、更多API 和更多特殊情況。隨著網(wǎng)站規(guī)模的增長(zhǎng)，保持組織性非常重要。一個(gè)經(jīng)典的概念是DRY（Don't Repeat Yourself，不要重複自己），它指的是抽象代碼以防止重複的過(guò)程。這是理想的，因?yàn)樗ǔＴ试S我們編寫一次代碼，在多個(gè)地方使用它，並在單個(gè)位置進(jìn)行更新，而不是在每個(gè)實(shí)例中進(jìn)行更新。

我們還可以使用庫(kù)來(lái)幫助我們。對(duì)於Ajax，axios 是一個(gè)流行的選擇。您可能已經(jīng)熟悉它，甚至在開(kāi)發(fā)過(guò)程中將其用於獨(dú)立的POST 和GET 請(qǐng)求。

安裝和基礎(chǔ)知識(shí)

可以使用npm（或yarn）安裝它：

 npm install axios

使用Axios 的獨(dú)立POST 請(qǐng)求如下所示：

 axios.post('https://axios-app.firebaseio.com/users.json', formData)
  .then(res => console.log(res))
  .catch(error => console.log(error))

原生JavaScript 也有多種方法可以執(zhí)行JavaScript 代碼。值得注意的是，fetch()。那麼為什麼還要使用庫(kù)呢？首先，fetch 的錯(cuò)誤處理非常奇怪。從一開(kāi)始，使用axios 就會(huì)輕鬆很多。如果您想查看比較，我們有一篇文章同時(shí)介紹了這兩種方法，還有一篇文章討論了這種抽象方法的價(jià)值。

另一個(gè)使用axios 的原因？它為我們提供了更多DRY 的機(jī)會(huì)，所以讓我們來(lái)看看。

全局配置

我們可以設(shè)置一個(gè)全局配置（例如，在我們的main.js 文件中），使用標(biāo)準(zhǔn)配置處理所有應(yīng)用程序請(qǐng)求，該配置通過(guò)axios 附帶的默認(rèn)對(duì)象設(shè)置。

此對(duì)象包含：

• baseURL:用作所有請(qǐng)求前綴的相對(duì)URL，每個(gè)請(qǐng)求都可以附加URL
• headers:可以根據(jù)請(qǐng)求設(shè)置的自定義標(biāo)頭
• timeout:請(qǐng)求中止的時(shí)間點(diǎn)，通常以毫秒為單位。默認(rèn)值為0，表示不適用。
• withCredentials:指示是否應(yīng)使用憑據(jù)進(jìn)行跨站點(diǎn)訪問(wèn)控制請(qǐng)求。默認(rèn)為false。
• responseType:指示服務(wù)器將返回的數(shù)據(jù)類型，選項(xiàng)包括json（默認(rèn)）、arraybuffer、document、text 和stream。
• responseEncoding:指示用於解碼響應(yīng)的編碼。默認(rèn)值為utf8。
• xsrfCookieName:用作XSRF 令牌值的Cookie 的名稱，默認(rèn)值為XSRF-TOKEN。
• xsrfHeaderName:承載XSRF 令牌值的HTTP 標(biāo)頭的名稱。默認(rèn)值為X-XSRF-TOKEN。
• maxContentLength:定義允許的HTTP 響應(yīng)內(nèi)容的最大大?。ㄒ宰止?jié)為單位）
• maxBodyLength:定義允許的HTTP 請(qǐng)求內(nèi)容的最大大?。ㄒ宰止?jié)為單位）

大多數(shù)情況下，您只會(huì)使用baseURL、header 和可能還有timeout。其餘的不太常用，因?yàn)樗鼈冇兄悄苣J(rèn)值，但如果您需要修復(fù)請(qǐng)求，了解它們的存在是很好的。

這就是DRY 的作用。對(duì)於每個(gè)請(qǐng)求，我們不必重複API 的baseURL 或重複我們可能在每個(gè)請(qǐng)求中都需要的重要標(biāo)頭。

這是一個(gè)示例，其中我們的API 有一個(gè)基址，但它也有多個(gè)不同的端點(diǎn)。首先，我們?cè)O(shè)置一些默認(rèn)值：

 // main.js
import axios from 'axios';

axios.defaults.baseURL = 'https://axios-app.firebaseio.com' // URL 前綴axios.defaults.headers.get['Accept'] = 'application/json' // 所有GET 請(qǐng)求的默認(rèn)標(biāo)頭axios.defaults.headers.post['Accept'] = 'application/json' // 所有POST 請(qǐng)求的默認(rèn)標(biāo)頭// 然後，在一個(gè)組件中，我們可以更簡(jiǎn)潔地使用axios，不需要設(shè)置這些標(biāo)頭，但仍然有機(jī)會(huì)自定義最終的URL 端點(diǎn)：

// form.js 組件import axios from 'axios';

export default {
  methods: {
    onSubmit() {
      // URL 現(xiàn)在是https://axios-app.firebaseio.com/users.json
      axios.post('/users.json', formData)
        .then(res => console.log(res))
        .catch(error => console.log(error))
    }
  }
}

注意：此示例在Vue 中，但此概念擴(kuò)展到任何JavaScript 環(huán)境。

自定義實(shí)例

設(shè)置“自定義實(shí)例”類似於全局配置，但作用域限定為指定的組件。因此，它仍然是一種DRY 技術(shù)，但具有層次結(jié)構(gòu)。

我們將在一個(gè)新文件中設(shè)置我們的自定義實(shí)例（讓我們將其命名為authAxios.js），並將其導(dǎo)入到“關(guān)注”組件中。

 // authAxios.js
import axios from 'axios'

const customInstance = axios.create({
  baseURL: 'https://axios-app.firebaseio.com'
})
customInstance.defaults.headers.post['Accept'] = 'application/json'

// 或像這樣...
const customInstance = axios.create({
  baseURL: 'https://axios-app.firebaseio.com',
  headers: {'Accept': 'application/json'}
})

然後我們將此文件導(dǎo)入表單組件：

 // form.js 組件// 從我們的自定義實(shí)例導(dǎo)入import axios from './authAxios'

export default {
  methods: {
    onSubmit() {
      axios.post('/users.json', formData)
        .then(res => console.log(res))
        .catch(error => console.log(error))
    }
  }
}

攔截器

攔截器可以處理全局配置或自定義實(shí)例可能過(guò)於通用的情況，這意味著如果您在其對(duì)像中設(shè)置了標(biāo)頭，則它將應(yīng)用於受影響組件中每個(gè)請(qǐng)求的標(biāo)頭。攔截器能夠動(dòng)態(tài)更改任何對(duì)象屬性。例如，我們可以根據(jù)我們?cè)跀r截器中選擇的任何條件發(fā)送不同的標(biāo)頭（即使我們?cè)趯?duì)像中設(shè)置了標(biāo)頭）。

攔截器可以在main.js 文件或自定義實(shí)例文件中。請(qǐng)求在發(fā)送後被攔截，並允許我們更改響應(yīng)的處理方式。

 // 添加請(qǐng)求攔截器axios.interceptors.request.use(function (config) {
  // 在發(fā)送請(qǐng)求之前執(zhí)行某些操作，例如，我們只為具有特定baseURL 的請(qǐng)求插入超時(shí)if (config.baseURL === 'https://axios-app.firebaseio.com/users.json') {
    config.timeout = 4000
  } else {
    return config
  }
  console.log(config)
  return config;
}, function (error) {
  // 對(duì)請(qǐng)求錯(cuò)誤執(zhí)行某些操作return Promise.reject(error);
});

// 添加響應(yīng)攔截器axios.interceptors.response.use(function (response) {
  // 對(duì)響應(yīng)數(shù)據(jù)執(zhí)行某些操作，例如console.log、更改標(biāo)頭，或者像我們?cè)谶@裡所做的那樣添加條件行為，根據(jù)響應(yīng)狀態(tài)更改路由或彈出警報(bào)框if (response.status === 200 || response.status === 201) {
    router.replace('homepage')
  } else {
    alert('異常行為')
  }
  console.log(response)
  return response;
}, function (error) {
  // 對(duì)響應(yīng)錯(cuò)誤執(zhí)行某些操作return Promise.reject(error);
});

攔截器顧名思義，攔截請(qǐng)求和響應(yīng)，以根據(jù)提供的任何條件採(cǎi)取不同的行為。例如，在上面的請(qǐng)求攔截器中，我們只在請(qǐng)求具有特定baseURL 時(shí)插入條件超時(shí)。對(duì)於響應(yīng)，我們可以攔截它並修改我們返回的內(nèi)容，例如更改路由或顯示警報(bào)框，具體取決於狀態(tài)代碼。我們甚至可以根據(jù)不同的錯(cuò)誤代碼提供多個(gè)條件。

隨著項(xiàng)目規(guī)模的擴(kuò)大，您開(kāi)始擁有許多路由和嵌套路由，所有這些路由都基於不同的觸發(fā)器與服務(wù)器通信，攔截器將非常有用。除了我在上面設(shè)置的條件之外，還有許多其他情況可能需要使用攔截器，具體取決於您的項(xiàng)目。

有趣的是，我們可以彈出攔截器以阻止其產(chǎn)生任何影響。我們必須將攔截器分配給一個(gè)變量，並使用恰當(dāng)命名的彈出方法將其彈出。

 const reqInterceptor = axios.interceptors.request.use(function (config) {
  // 在發(fā)送請(qǐng)求之前執(zhí)行某些操作，例如，我們只為具有特定baseURL 的請(qǐng)求插入超時(shí)if (config.baseURL === 'https://axios-app.firebaseio.com/users.json') {
    config.timeout = 4000
  } else {
    return config
  }
  console.log(config)
  return config;
}, function (error) {
  // 對(duì)請(qǐng)求錯(cuò)誤執(zhí)行某些操作return Promise.reject(error);
});

// 添加響應(yīng)攔截器const resInterceptor = axios.interceptors.response.use(function (response) {
  // 對(duì)響應(yīng)數(shù)據(jù)執(zhí)行某些操作，例如console.log、更改標(biāo)頭，或者像我們?cè)谶@裡所做的那樣添加條件行為，根據(jù)響應(yīng)狀態(tài)更改路由或彈出警報(bào)框if (response.status === 200 || response.status === 201) {
    router.replace('homepage')
  } else {
    alert('異常行為')
  }
  console.log(response)
  return response;
}, function (error) {
  // 對(duì)響應(yīng)錯(cuò)誤執(zhí)行某些操作return Promise.reject(error);
});

axios.interceptors.request.eject(reqInterceptor);
axios.interceptors.request.eject(resInterceptor);

雖然不太常用，但可以將攔截器放入條件語(yǔ)句中，或者根據(jù)某些事件將其刪除。

希望這能讓你很好地了解axios 的工作方式，以及如何在應(yīng)用程序中使用它來(lái)保持API 請(qǐng)求的DRY 原則。雖然我們通過(guò)列出常見(jiàn)用例和配置來(lái)觸及表面，但axios 還有許多其他優(yōu)點(diǎn)，您可以在文檔中探索，包括取消請(qǐng)求和防止跨站點(diǎn)請(qǐng)求偽造的能力，以及其他令人驚嘆的可能性。

以上是使用AXIOS進(jìn)行API請(qǐng)求保持乾燥的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！