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