Penny
May 30, 2023

《 Axios 》

Axios 是一個用於發送 HTTP 請求的 JavaScript 庫,在瀏覽器端和伺服器端都可以使用,開發者可以輕鬆地向伺服器發送各種類型的 HTTP 請求,例如 GET、POST、PUT 和 DELETE。

Axios提供了簡潔的 API、異步操作、取消請求、攔截器功能和跨瀏覽器支援等特點,使開發者能夠更輕鬆地進行網路請求的處理和管理。

➤ 步驟一:

建立一個資料夾,在路徑處打上cmd開啟終端機。

《 Axios套件安裝 》- 步驟一

➤ 步驟二:

在終端機輸入指令「cd 你的資料夾名稱」(我在這裡的資料夾名稱為vueJs04),接著輸入指令「npm init -y」,資料夾中就會創建一個「package.json」的檔案。(※如果專案中已經有package.json檔,即可忽略此步驟)

創建這個檔案的目的是,所有安裝的套件都會記錄在這個「package.json」的檔案中,可以方便之後用於查看專案中有安裝了哪些套件。

《 Axios套件安裝 》- 步驟二

➤ 步驟三:

在程式碼中開啟專案資料夾,並於終端機中輸入指令「npm install axios」將Axios套件進行下載(圖一),下載完成後就會看到程式碼中多了一個node_modules的資料夾(圖二),而Axios套件的程式碼就會裝在node_modules的資料夾中。(※注意:通常node_modules的資料都不會做版本控管)

《 Axios套件安裝 》- 步驟三 (圖一)
《 Axios套件安裝 》- 步驟三 (圖二)

➤ 步驟四:

接著可先自行創建一個js檔,並於檔案中放置以下js內容

[ Js ]

const axios = require('axios')
axios.get('https://jsonplaceholder.typicode.com/todos/1')
.then(response => console.log(response.data))

再開啟程式碼中的終端機,輸入指令「node 你創建的檔案名稱.js」(我在這裡的js檔案名稱為index),執行看看是否可以跑出資料,如果有跑出資料就表示安裝成功囉。

《 Axios套件安裝 》- 步驟四