npm-axios [NOTE]

Posted on Edited on In

install

1
$ npm install axios

起手式

快速暴力的先使用了在說

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import axios from "axios";

axios.defaults.baseURL = [YOUR_DOMAIN];

axios.interceptors.request.use(
  (request) => {
    return request;
  },
  (error) => {
    return Promise.reject(error);
  }
);

axios.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default axios;

validateStatus

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

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

小技巧

當你的 method 是 GET 的時候，可用 params 來帶入 query 的資料，用物件的方式就不用自已組字串

1
2
3
4
5
6
7
8
axios
  .get("/user", {
    params: { ID: 12345 },
    // 完全等於 '/user?ID=12345'
  })
  .then(function (response) {
    console.log(response);
  });

使用 axios.create() 客製化 Axios

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

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

1
2
3
4
5
6
7
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 的標頭：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import axios from "axios";

const baseURL = [YOUR_DOMAIN];

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;