Axios 是一个基于 Promise 的 HTTP 客户端请求库,可以在浏览器和 Node.js 环境下使用。它的功能强大且易于使用,能够帮助开发者轻松实现各种 HTTP 请求,本教程将从基础入门到高级使用,全面讲解 Axios 的各种功能和用法。
1. 什么是 Axios?如何使用 Axios?
Axios 是一个基于 Promise 的 HTTP 客户端请求库,既可以在浏览器中使用,也可以在 Node.js 环境下使用。它提供了一套简洁的 API 来发起 HTTP 请求,处理请求和响应,并支持各种高级功能如拦截器、取消请求、文件上传等。
![](https://apifox.com/apiskills/content/images/2023/06/-----.png)
2. Axios 的 GET 请求如何使用?传参写法有哪几种?
GET 请求是最常见的 HTTP 请求类型,Axios 提供了简单的方法来发起 GET 请求。可以通过 URL 参数、params 对象等多种方式传递参数:
axios.get('/user', {
params: {
ID: 12345
}
})
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});
![](https://apifox.com/apiskills/content/images/2023/07/axios-get-request.png)
3. Axios 的 POST 请求如何使用?传参写法有哪几种?
POST 请求通常用于提交数据,Axios 支持多种数据传递方式,包括普通对象、FormData 对象和 URLSearchParams 对象:
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});
![](https://apifox.com/apiskills/content/images/2023/07/how-to-use-axios-post.png)
4. Axios 的 PUT 请求如何使用?传参写法有哪几种?
PUT 请求用于更新资源,Axios 允许通过多种方式传递数据,例如拼接 URL、使用 params 参数或将数据作为请求体传递:
axios.put('/user/123', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});
![](https://apifox.com/apiskills/content/images/2023/07/axios-put-request.png)
5. Axios 的 DELETE 请求如何使用?传参写法有哪几种?
DELETE 请求用于删除资源,传参方式包括在 URL 中传递参数、使用 params 参数等:
axios.delete('/user/123')
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});
![](https://apifox.com/apiskills/content/images/2023/07/how-to-use-axios-delete-request.png)
6. Axios 中如何设置请求头(headers)
设置请求头可以在请求配置中添加 headers 字段,也可以通过默认 headers 全局配置:
axios.get('/user', {
headers: {
'Authorization': 'Bearer token'
}
})
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});
![](https://apifox.com/apiskills/content/images/2023/07/use-axios-headers.png)
7. Axios 的响应拦截器如何使用?
响应拦截器允许在请求得到响应后,对响应数据进行处理。例如,可以在响应发送回执行环境之前,修改、过滤响应数据:
axios.interceptors.response.use(response => {
// 对响应数据做点什么
return response;
}, error => {
// 对响应错误做点什么
return Promise.reject(error);
});
![](https://apifox.com/apiskills/content/images/2023/07/use-axios-interceptors.png)
8. Axios 的请求拦截器如何使用?
请求拦截器可以在请求发出之前对其进行处理,例如添加公共请求头、打印日志等:
axios.interceptors.request.use(config => {
// 在发送请求之前做些什么
return config;
}, error => {
// 对请求错误做些什么
return Promise.reject(error);
});
![](https://apifox.com/apiskills/content/images/2023/07/use-axios-interceptors.png)
9. Axios 的 baseURL 怎么配置?
baseURL 配置可以简化请求路径,四种配置方法包括全局配置、实例化配置、临时配置和通过拦截器动态配置:
axios.defaults.baseURL = 'https://api.example.com';
![](https://apifox.com/apiskills/content/images/2023/07/use-axios-baseurl.png)
10. Axios 如何取消重复请求?取消重复请求方法有哪几种?
通过请求拦截器与响应拦截器结合使用,或利用 Axios CancelToken 实现取消重复请求的方法:
const source = axios.CancelToken.source();
axios.get('/user/12345', {
cancelToken: source.token
});
// 取消请求
source.cancel('取消重复请求');
![](https://apifox.com/apiskills/content/images/2023/08/axios-repeated-request.png)
11. Axios 并发请求怎么实现?
实现并发请求的三种方法包括使用 Promise.all()、async/await 和 Axios 提供的 axios.all() 方法:
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
Promise.all([getUserAccount(), getUserPermissions()])
.then(response => {
console.log(response);
});
![](https://apifox.com/apiskills/content/images/2023/08/axios-all-requests.png)
12. Axios 怎么通过 FormData 对象上传文件?
通过 FormData 上传文件的两种方法:直接追加文件到 FormData 中和设置 Content-Type 为 multipart/form-data:
const formData = new FormData();
formData.append('file', fileInput.files[0]);
axios.post('/file/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});
![](https://apifox.com/apiskills/content/images/2023/08/axios-formdata-upload-file.png)
13. Axios 的流式(stream)请求怎么实现?
通过监听响应对象的 data 事件,可以实现流式请求,主要的写法有直接 pipe 流和手动监听事件:
axios({
method: 'get',
url: '/stream',
responseType: 'stream'
})
.then(response => {
response.data.pipe(fs.createWriteStream('response.txt'));
});
![](https://apifox.com/apiskills/content/images/2023/08/axios-stream.png)
14. Axios Blob 如何使用?
Blob(二进制对象)是一种表示二进制数据的方式,常用于处理文件和多媒体数据。可以在 Axios 请求中指定响应类型为 Blob:
axios.get('/file', { responseType: 'blob' })
.then(response => {
const blob = new Blob([response.data], { type: 'application/pdf' });
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = 'file.pdf';
link.click();
});
![](https://apifox.com/apiskills/content/images/2023/08/axios-blob.png)
15. Axios 跨域怎么解决?
解决跨域问题的常用方法有 CORS、JSONP、代理等。在开发环境中,可以通过代理服务器实现跨域:
axios.get('/api/data', {
proxy: {
host: '127.0.0.1',
port: 9000
}
})
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});
![](https://apifox.com/apiskills/content/images/2023/08/axios-cross-origin.png)
通过本合集,你可以从基础到进阶全面掌握 Axios 的各种用法和技巧,使你的项目开发更加高效和顺畅。
使用 Apifox 进行 API 测试与 Mock 数据
在开发过程中,测试和模拟 API 请求是非常重要的,这里我们介绍一个强大的工具:Apifox。
Apifox 是一个集 API 文档、测试、Mock、自动化测试于一体的工具,能够显著提升开发和测试的效率。它不仅支持管理 API,还支持快速生成 Mock 数据,并且可以直接生成代码,这对前后端分离开发非常有帮助。
你可以使用 Apifox 来测试 API 的响应,以校验数据的准确性。
![](https://apifox.com/apiskills/content/images/2024/05/image-112.png)
可以自动生成 Mock 数据,帮助前端开发者在后端 API 尚未完成时进行开发和测试。
![](https://apifox.com/apiskills/content/images/2024/05/image-113.png)
还可以通过【文档->生成代码】选项,快速生成接口请求代码和业务代码。
![](https://apifox.com/apiskills/content/images/2024/05/image-114.png)
![](https://apifox.com/apiskills/content/images/2024/05/image-115.png)
还有其他自动化测试、性能测试、在线文档分享、迭代分支等强大功能,快去试试吧!
![Apifox](https://apifox.com/apiskills/content/images/2024/01/image-30.png)