linkAxios

參考資料：Getting Started | Axios Docs

Axios 在伺服端使用 Node.js 的 http 原生模組，在客戶端 (瀏覽器) 使用 XMLHttpRequest。寫法類似 Fetch，並提供更強大、更有彈性的功能。

link第一步：向伺服器發出請求 (request)

link使用 Axios 套件

在 Node.js 環境中，要先安裝套件才能在 JS 檔案中引用套件

1linknpm install axios

1linkconst axios = require('axios');

或是在 HTML 檔案中引用 CDN 檔案

1link<script src="https://unpkg.com/axios@1.1.2/dist/axios.min.js"></script>

link使用 Axios 方法

axios() 的參數只有一個列出各項設定的物件，以下是一些常用設定，預設值標上*號

• method：HTTP 請求方法，例如 *GET, POST, PUT, DELETE，大小寫都可以
• headers：標頭，例如 { 'Content-Type': 'application/json' }
• data：任何想要送出去的資料，格式必須和 header 的 Content-Type 相同，例如 JSON.stringify(data), URLSearchParams, FormData。如果 method 是 'PUT', 'POST', 'DELETE', 還有 'PATCH' 才能用這個設定

實際寫法舉例如下

1link

2linkaxios('data.json')

3link

4linkaxios({

5link    url: 'data.json',

6link    method: 'post',

7link    headers: {

8link        'Content-Type': 'application/json',

9link    },

10link    data: { name: value }

11link})

也可用 HTTP 動詞對應的方法

1linkaxios.post('data.json',

2link    { name: value },

3link    headers: {

4link        'Content-Type': 'application/json',

5link    }

6link)

link第二步：接收伺服器回傳的資料 (response)、

link第三步：取得回傳的資料 (data)

根據需要使用下列方法

1link    // common function syntax

2link    .then(function (response) {

3link        // 回傳成功

4link        console.log(response);

5link    })

6link    .catch(function (error) {

7link        // 處理錯誤

8link        console.log(error);

9link    })

10link    .finally(function () {

11link        // 一定會執行

12link    });

13link

14link    // or arrow function syntax

15link    .then((response) =>

16link        // 回傳成功

17link        console.log(response);

18link    )

19link    .catch((error) =>

20link        // 處理錯誤

21link        console.log(error);

22link    )

23link    .finally(() =>

24link        // 一定會執行

25link    );

link基本寫法

綜合上述三個步驟的最小可行程式碼：

1linkconst axios = require('axios');

2link

3link// common function syntax

4linkaxios.get('data.json')

5link    .then(function (response) {

6link        console.log(response);

7link    })

8link

9link// or arrow function syntax

10linkaxios.get('data.json')

11link    .then((response) => console.log(response));