當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

使用AxiosJavaScript中的简单HTTP请求

發布時間：2023/11/29 javascript 45 豆豆

生活随笔收集整理的這篇文章主要介紹了使用AxiosJavaScript中的简单HTTP请求小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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將其包含在您的頁面中：

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' })