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:

npm install axios

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

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

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

Axios API

可以从"axios"对象开始一个HTTP请求:

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

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

;(async () => {
  const response = await axios({
    url: 'https://dog.ceo/api/breeds/list/all',
    method: 'get'
  })

  console.log(response)
})()

为方便起见,通常会使用以下方法:

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

与jQuery中的$.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中使用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(`共获取到 ${Object.entries(breeds.data.message).length} 个品种`)
  }
}

countBreeds()

如果您不想使用async/await,可以使用Promise语法:

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中使用该参数进行实现:

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