什么是 axios
axios 是一个基于 Promise 的 HTTP 请求库，可以在浏览器和 Node.js 中使用。它支持请求和响应拦截器，可以用来统一处理请求和响应，实现全局性的错误处理、loading 状态显示等功能。
怎样使用 axios
在 Vue.js 中使用 axios 首先需要安装 axios：
npm install axios --save
然后在需要使用的组件中引入 axios：
import axios from 'axios';
发送请求
使用 axios 发送请求可以这样：
axios.get(url, {
params: {}
}).then(response => {
console.log(response);
}).catch(error => {
console.log(error);
});其中 url 是请求的地址，params 是请求的参数，这里使用了 ES6 的箭头函数来处理响应。
拦截请求
当我们需要在发送请求前做一些公共处理，比如添加 loading 状态或者添加 token，我们可以在 axios 实例上添加一个请求拦截器：
// 添加请求拦截器
axios.interceptors.request.use(config => {
// 在请求发送之前做一些事情
return config;
}, error => {
// 对请求错误做一些事情
return Promise.reject(error);
});在这个例子中，config 是带有请求信息的对象，我们可以通过给它添加一些属性来实现公共的处理。
拦截响应
当我们需要在接收到响应后做一些公共处理，比如关闭 loading 状态或者检查一些错误信息，我们可以在 axios 实例上添加一个响应拦截器：
// 添加响应拦截器
axios.interceptors.response.use(response => {
// 对响应数据做一些事情
return response;
}, error => {
// 对响应错误做一些事情
return Promise.reject(error);
});在这个例子中，response 是带有响应信息的对象，我们可以通过给它添加一些属性来实现公共的处理。
总结
使用 axios 拦截请求和响应可以实现统一的错误处理、loading 状态显示等功能。拦截器的使用不仅可以提高开发效率，还可以让项目更好维护。在实际开发中，需要根据具体需求进行配置。
示例代码
以下是 axios 拦截请求和响应的详细示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
-- -- ----- --
----- -------- - --------------
-------- ---------------------------
-------- ------
---
-- -------
---------------------------------------- -- -
-- ------------
---------------------------- - ------------------------------
------ -------
-- ----- -- -
-- ----------
------ ----------------------
---
-- -------
------------------------------------------- -- -
-- ----------
-- ---------------- --- --- -- ------------------ --- -- -
------ -------------------
- ---- -
------ ----------------------------------
-
-- ----- -- -
-- ----------
-- ---------------------- --- ---- -
---------------------------------
------------------
- ---- -
------ ----------------------
-
---
------ ------- ---------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f06eb8f6b2d6eab3a77d18