/

使用Axios进行HTTP请求

使用Axios进行HTTP请求

Axios是一个非常受欢迎的JavaScript库，可用于执行HTTP请求，并可在浏览器和Node.js平台上运行。

介绍Axios

Axios是一个非常受欢迎的JavaScript库，可用于执行HTTP请求，并可在浏览器和Node.js平台上运行。

它支持所有现代浏览器，包括对IE8及更高版本的支持。

它基于Promise，这使得我们可以使用async/await代码来轻松地执行XHR请求。

与原生的Fetch API相比，使用Axios有很多优势：

  • 支持较旧的浏览器（Fetch需要一个polyfill）
  • 支持中止请求的方式
  • 支持设置响应超时的方式
  • 内置的CSRF保护
  • 支持上传进度
  • 执行自动的JSON数据转换
  • 在Node.js中工作

安装

可以使用npm在Node.js中安装Axios：

1
npm install axios

在浏览器中，可以使用unpkg.com将其包含在页面中：

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

需要注意的是，API调用必须启用CORS，以便在浏览器中访问，否则请求将失败。

Axios API

可以从”axios”对象开始一个HTTP请求：

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

这将返回一个promise。您可以使用async/await来解析该promise以获取响应对象：

1
2
3
4
5
6
7
8
;(async () => {
  const response = await axios({
    url: 'https://dog.ceo/api/breeds/list/all',
    method: 'get'
  })

  console.log(response)
})()

为方便起见，通常会使用以下方法：

  • axios.get()
  • axios.post()

与jQuery中的$.ajax()相比，它们提供了更简洁的语法。例如：

1
2
3
4
;(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中使用axios.get()向Dog API查询以获取所有狗品种列表的示例，并对它们进行计数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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(`共获取到 ${Object.entries(breeds.data.message).length} 个品种`)
  }
}

countBreeds()

如果您不想使用async/await，可以使用Promise语法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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(`共获取到 ${Object.entries(response.data.message).length} 个品种`)
      }
    })
    .catch(error => {
      console.log(error)
    })
}

countBreeds()

给GET请求添加参数

GET响应可以在URL中包含参数，例如：https://site.com/?name=Flavio。

使用Axios可以通过在URL中使用该参数进行实现：

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

或者您可以在选项中使用params属性：

1
2
3
4
5
axios.get('https://site.com/', {
  params: {
    name: 'Flavio'
  }
})

POST请求

执行POST请求与执行GET请求类似，只是将axios.get替换为axios.post：

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

第二个参数是一个包含POST参数的对象：

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

tags: [“http requests”, “Axios”, “JavaScript”]