Interested in learning JavaScript? Get my ebook at jshandbook.com

有興趣學習JavaScript嗎？ 在jshandbook.com上獲取我的電子書

介紹 (Introduction)

Axios is a very popular JavaScript library you can use to perform HTTP requests. It works in both Browser and Node.js platforms.

Axios是一個非常流行JavaScript庫，可用于執行HTTP請求。 它可以在Browser和Node.js平臺中使用。

Is supports all modern browsers, including IE8 and higher.

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

It is promise-based, and this lets us write async/await code to perform XHR requests very easily.

它是基于Promise的，這使我們可以編寫異步/等待代碼來非常輕松地執行XHR請求。

Using Axios has quite a few advantages over the native Fetch API:

與本地Fetch API相比，使用Axios具有很多優勢：

• supports older browsers (Fetch needs a polyfill)
  支持較舊的瀏覽器(獲取需要使用polyfill)
• has a way to abort a request
  有辦法中止請求
• has a way to set a response timeout
  有辦法設置響應超時
• has built-in CSRF protection
  內置CSRF保護
• supports upload progress
  支持上傳進度
• performs automatic JSON data transformation
  執行自動JSON數據轉換
• works in Node.js
  在Node.js中工作

安裝 (Installation)

Axios can be installed using npm:

可以使用npm安裝Axios：

npm install axios

or yarn:

或紗線 ：

yarn add axios

or simply include it in your page using unpkg.com:

或使用unpkg.com將其包含在您的頁面中：

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

Axios API (The Axios API)

You can start an HTTP request from the axios object:

您可以從axios對象啟動HTTP請求：

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

but for convenience, you will generally use

但是為了方便起見，您通常會使用

• axios.get()

  axios.get()

• axios.post()

  axios.post()

(like in jQuery, you would use $.get() and $.post() instead of $.ajax())

(就像在jQuery中一樣，您將使用$.get()和$.post()而不是$.ajax() )

Axios offers methods for all the HTTP verbs, which are less popular but still used:

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

• axios.delete()

  axios.delete()

• axios.put()

  axios.put()

• axios.patch()

  axios.patch()

• axios.options()

  axios.options()

It also offers a method to get the HTTP headers of a request, discarding the body.

它還提供了一種獲取請求的HTTP標頭，丟棄正文的方法。

GET請求 (GET requests)

One convenient way to use Axios is to use the modern (ES2017) async/await syntax.

使用Axios的一種便捷方法是使用現代(ES2017)異步/等待語法。

This Node.js example queries the Dog API to retrieve a list of all the dog breeds, using axios.get(), and it counts them:

此Node.js示例使用axios.get()查詢Dog API以檢索所有犬種的列表，并對其進行計數：

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 ${Object.entries(breeds.data.message).length} breeds`) }}countBreeds()

If you don’t want to use async/await, you can use the Promises syntax:

如果您不想使用異步/等待，則可以使用Promises語法：

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 ${Object.entries(response.data.message).length} breeds` ) } }) .catch(error => { console.log(error) })}countBreeds()

向GET請求添加參數 (Add parameters to GET requests)

A GET response can contain parameters in the URL, like this: https://site.com/?foo=bar.

GET響應可以在URL中包含參數，例如： https://site.com/?foo=bar : https://site.com/?foo=bar 。

With Axios you can perform this by simply using that URL:

使用Axios，您只需使用以下URL即可執行此操作：

axios.get('https://site.com/?foo=bar')

or you can use a params property in the options:

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

axios.get('https://site.com/', { params: { foo: 'bar' }})

POST請求 (POST Requests)

Performing a POST request is just like doing a GET request, but instead of axios.get, you use axios.post:

執行POST請求就像做一個GET請求，但不是axios.get ，您使用axios.post ：

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

An object containing the POST parameters is the second argument:

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

axios.post('https://site.com/', { foo: 'bar' })

Interested in learning JavaScript? Get my ebook at jshandbook.com

有興趣學習JavaScript嗎？ 在jshandbook.com上獲取我的電子書

翻譯自: https://www.freecodecamp.org/news/simple-http-requests-in-javascript-using-axios-272e1ac4a916/

總結

以上是生活随笔為你收集整理的使用AxiosJavaScript中的简单HTTP请求的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。