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/