使用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手冊


更多節點教程: