跳至主要内容

[note] axios 筆記

config

validateStatus

axios 會用 validateStatus 這個設定來決定要 resolve 或 reject 該請求的 Promise。預設當 HTTP response 的 statusCode 如下時,都會當成錯誤拋出:

  // 預設
validateStatus: function (status) {
return status >= 200 && status < 300; // default
},

使用 axios.create() 客製化 Axios

Axios 函式庫裡提供了 axios.create() 讓我們可以做客製化的設定。我們可以把需要的參數設定進來。

讓我們先來做一個設定檔,請你在 ./src/utils 資料夾中新增一支 helpers.js:

import axios from 'axios';

const baseURL = 'http://example.com';

export const apiHelper = axios.create({
baseURL,
});

axios.create() 方法會回傳一個自訂的 axios 實例,我們把它存到 apiHelper 變數裡,之後你會在實作中看到我們如何利用這個 apiHelper

使用 axios.interceptors 對請求做前處理

透過 interceptors 的使用,可以讓 axios 在當使用者有登入(有 token)的情況下,把所有發出去的請求都添加上 Authorization 的標頭:

import axios from 'axios';

const baseURL = 'http://example.com';

const axiosInstance = axios.create({
baseURL,
});

axiosInstance.interceptors.request.use(
(config) => {
// 從 localStorage 將 token 取出
const token = localStorage.getItem('token');

// 如果 token 存在的話,則帶入到 headers 當中
if (token) {
config.headers['Authorization'] = `Bearer ${token}`;
}
return config;
},
(err) => Promise.reject(err),
);

export const apiHelper = axiosInstance;