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


更多节点教程: