每日分享- 前端 Axios 攔截器常用的請求方法别名有哪些？

Axios 攔截器中常用的請求方法别名主要包括以下幾個：

1 axios.request(config)：該方法是發送所有類型的請求的基礎方法，可以傳遞一個配置對象作為參數，配置對象包含請求的 URL、請求方法、請求頭、請求體等資訊。這個方法可以被攔截器攔截，是以我們可以在請求發送前或響應接收後對請求和響應進行處理。例如，我們可以在請求頭中添加 token：

axios.interceptors.request.use(config => {
  config.headers.Authorization = `Bearer ${getToken()}`
  return config
})           

2 axios.get(url[, config])：該方法發送一個 GET 請求，可以傳遞一個 URL 和一個可選的配置對象。例如，發送一個擷取使用者資訊的請求：

axios.get('/api/user', {
  params: {
    userId: 123
  }
})           

3 axios.delete(url[, config])：該方法發送一個 DELETE 請求，可以傳遞一個 URL 和一個可選的配置對象。例如，發送一個删除使用者的請求：

axios.delete('/api/user/123')           

4 axios.head(url[, config])：該方法發送一個 HEAD 請求，可以傳遞一個 URL 和一個可選的配置對象。例如，發送一個擷取網頁标題的請求：

axios.head('https://www.example.com')           

5 axios.options(url[, config])：該方法發送一個 OPTIONS 請求，可以傳遞一個 URL 和一個可選的配置對象。例如，發送一個擷取支援的請求方法的請求：

axios.options('/api/user')           

6 axios.post(url[, data[, config]])：該方法發送一個 POST 請求，可以傳遞一個 URL、請求體資料和一個可選的配置對象。例如，發送一個添加使用者的請求：

axios.post('/api/user', {
  name: 'John',
  age: 18
})           

7 axios.put(url[, data[, config]])：該方法發送一個 PUT 請求，可以傳遞一個 URL、請求體資料和一個可選的配置對象。例如，發送一個更新使用者資訊的請求：

axios.put('/api/user/123', {
  name: 'John',
  age: 19
})           

8 axios.patch(url[, data[, config]])：該方法發送一個 PATCH 請求，可以傳遞一個 URL、請求體資料和一個可選的配置對象。例如，發送一個更新使用者部分資訊的請求：

axios.patch('/api/user/123', {
  age: 20
})           

這段代碼表示發送一個 PATCH 請求到 /api/user/123，請求體資料為 { age: 20 }，使用預設的配置。可以通過第二個可選參數 data 傳遞請求體資料，通過第三個可選參數 config 傳遞請求的配置選項，例如：

axios.patch('/api/user/123', { age: 20 }, {
  headers: {
    'Content-Type': 'application/json'
  }
})           

這段代碼表示發送一個 PATCH 請求到 /api/user/123，請求體資料為 { age: 20 }，使用自定義的請求頭 { 'Content-Type': 'application/json' }。

9 axios.all(iterable)：該方法可以同時發送多個請求，接收一個可疊代的請求數組或對象，并傳回一個 Promise，當所有請求都成功響應後，Promise 才會 resolve，響應資料以數組形式傳回。例如，同時擷取多個使用者資訊：

axios.all([
  axios.get('/api/user/1'),
  axios.get('/api/user/2'),
  axios.get('/api/user/3')
]).then(axios.spread((user1, user2, user3) => {
  console.log(user1.data)
  console.log(user2.data)
  console.log(user3.data)
}))           

10 axios.spread(callback)：該方法用于在 axios.all() 中的 Promise resolve 後，将響應的資料拆分為單獨的參數傳遞給回調函數。例如，在上面的例子中，我們使用了 axios.spread() 方法将響應資料拆分為三個參數。

11 axios.create([config])：該方法用于建立一個新的 axios 執行個體，可以傳遞一個配置對象作為參數，該執行個體具有與 axios 一樣的 API，但可以單獨配置攔截器、預設配置等選項。例如，我們可以建立一個帶有預設 base URL 和攔截器的 axios 執行個體：

const instance = axios.create({
  baseURL: 'https://api.example.com/',
  headers: {
    'X-Requested-With': 'XMLHttpRequest'
  }
})
instance.interceptors.request.use(config => {
  config.headers.Authorization = `Bearer ${getToken()}`
  return config
})           

以上就是常用的 Axios 請求方法别名及其使用舉例。通過攔截器和這些方法的靈活組合，我們可以很友善地實作請求和響應的預處理、日志記錄、錯誤處理等功能。