使用Axios的HTTP請求

Axios是一個非常流行的JavaScript庫，可用於執行HTTP請求，該庫在Browser和Node.js平台中均可使用

Axios簡介

Axios是一個非常流行的JavaScript庫，您可以使用它來執行HTTP請求，該庫在瀏覽器和Node.js平台。

它支持所有現代瀏覽器，包括對IE8和更高版本的支持。

它基於承諾，這使我們可以編寫異步/等待代碼來執行XHR要求非常容易。

與本機相比，使用Axios具有許多優勢提取API：

支持較舊的瀏覽器（獲取需要使用polyfill）
有一種方法可以中止請求
有辦法設置響應超時
內置CSRF保護
支持上傳進度
自動執行JSON格式數據轉換
在Node.js中工作

影片教學

觀看此視頻，在該視頻中我創建一個提供POST端點的Express服務器，並向其發出Axios請求以發布數據：

安裝

可以使用以下方法將Axios安裝為可在Node.js中使用：npm：

npm install axios

在瀏覽器中，可以使用unpkg.com將其包含在頁面中：

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

記住必須啟用API調用CORS可以在瀏覽器中訪問，否則請求將失敗。

Axios API

您可以從發起HTTP請求axios目的：

axios({
  url: 'https://dog.ceo/api/breeds/list/all',
  method: 'get'
})

這返回一個承諾。您可以使用async / await來解決對響應對象的承諾：

;(async () => {
  const response = await axios({
    url: 'https://dog.ceo/api/breeds/list/all',
    method: 'get'
  })
console.log(response)
})()

為了方便起見，您通常會使用以下方法

axios.get()
axios.post()

對於舊版本，例如在jQuery中，您將使用$.get()和$.post()代替$.ajax()

它們提供了更簡單的語法。例如：

;(async () => {
  const response = await axios.get('https://dog.ceo/api/breeds/list/all')
  console.log(response)
})()

Axios提供了用於所有HTTP動詞的方法，這些方法不太流行，但仍在使用：

axios.delete()
axios.put()
axios.patch()
axios.options()

以及獲取請求的HTTP標頭，丟棄正文的方法，axios.head()。

GET請求

此Node.js示例查詢狗API使用以下方法檢索所有犬種的列表axios.get()，並且計算在內：

const axios = require('axios')
const getBreeds = async () => {
try {
return await axios.get(‘https://dog.ceo/api/breeds/list/all’)
} catch (error) {
console.error(error)
}
}
const countBreeds = async () => {
const breeds = await getBreeds()
if (breeds.data.message) {
console.log(Got </span><span style="color:#e6db74">${</span>Object.<span style="color:#a6e22e">entries</span>(<span style="color:#a6e22e">breeds</span>.<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">message</span>).<span style="color:#a6e22e">length</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> breeds)
}
}
countBreeds()

如果您不想使用異步/等待，則可以使用承諾句法：

const axios = require('axios')
const getBreeds = () => {
try {
return axios.get(‘https://dog.ceo/api/breeds/list/all’)
} catch (error) {
console.error(error)
}
}
const countBreeds = async () => {
const breeds = getBreeds()
.then(response => {
if (response.data.message) {
console.log(
Got </span><span style="color:#e6db74">${</span>Object.<span style="color:#a6e22e">entries</span>(<span style="color:#a6e22e">response</span>.<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">message</span>).<span style="color:#a6e22e">length</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> breeds
)
}
})
.catch(error => {
console.log(error)
})
}
countBreeds()

向GET請求添加參數

GET響應可以在URL中包含參數，如下所示：https://site.com/?name=Flavio。

使用Axios，您可以使用以下URL來執行此操作：

axios.get('https://site.com/?name=Flavio')

或者您可以使用params選項中的屬性：

axios.get('https://site.com/', {
  params: {
    name: 'Flavio'
  }
})

POST請求

執行POST請求就像執行GET請求一樣，但不是axios.get，你用axios.post：

axios.post('https://site.com/')

包含POST參數的對像是第二個參數：

axios.post('https://site.com/', {
  name: 'Flavio'
})

免費下載我的Node.js手冊