Vue 中 axios 请求封装详解
5星
- 浏览量: 0
- 大小:None
- 文件类型：PDF
简介：
在Vue.js应用中，广泛采用的实践是利用axios执行HTTP请求，因为axios作为一个功能强大的基于Promise的库，在browser和Node.js环境中均被广泛支持。Vue官方强烈推荐使用axios作为默认的HTTP客户端。为了增强代码的可维护性同时提升其灵活性，开发者通常会对其实现进行封装工作，以确保在调用API时能够更加简便且一致地访问各种资源。
为了在node.js环境中安装axios库，可以利用npm命令行工具进行操作。```bash
npm install axios
```
我们对axios进行了封装处理，并在其中导入axios库，在其中设置基础URL路径以便后续接口请求。由于开发、测试和生产环境中的网络地址可能有所差异，因此建议我们在代码运行环境中获取节点工作环境变量`process.env.NODE_ENV`的值来判断当前所处的具体场景：
在其中导入axios库，并设定基础URL路径。
然后根据不同的节点工作环境变量进行相应的设置：
如果节点工作环境变量为development，则将基础URL设为dev http://localhost:5000;
如果node工作环境变量为test，则将基础URL配置为tst http://localhost:8080;
如果处于production环境，建议将基础URL设定为prod http://api.example.com;
这样可以实现根据不同运行场景自动选择合适的网络地址。```javascript
import axios from axios;
if (process.env.NODE_ENV === development) {
axios.defaults.baseURL = http:dev.xxx.com;
} else if (process.env.NODE_ENV === production) {
axios.defaults.baseURL = http:prod.xxx.com;
}
```在开发阶段，由于跨域限制的原因，在配置代理方面通常需要进行相应的设置。对于使用Vue CLI 3构建的应用而言，在`vue.config.js`文件中进行相关的配置操作时，可以参考以下示例：```javascript
module.exports = {
devServer: {
proxy: {
proxyApi: {
target: http:dev.xxx.com,
changeOrigin: true,
pathRewrite: {
^proxyApi:
}
}
}
}
};
```这样，所有类型以`proxyApi`开头的请求会被转发至`http:dev.xxx.com`。在开发环境中，对配置文件`http.js$进行优化以使其符合代理设置的要求。```javascript
if (process.env.NODE_ENV === development) {
axios.defaults.baseURL = proxyApi;
} else if (process.env.NODE_ENV === production) {
axios.defaults.baseURL = http:prod.xxx.com;
}
```axios的拦截器力量十足，可实现统一管理请求与响应。具体而言，在请求拦截器中插入一个验证令牌即可。```javascript
请求拦截器
axios.interceptors.request.use(
config => {
const token = localStorage.getItem(token); 假设token存储在localStorage中
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
error => Promise.reject(error)
);
响应拦截器
axios.interceptors.response.use(
response => {
if (response.status === 200) {
根据返回的状态码和业务逻辑进行处理
if (response.data.code === 511) {
未授权，调取授权接口
} else if (response.data.code === 510) {
未登录，跳转登录页
} else {
return Promise.resolve(response);
}
} else {
return Promise.reject(response);
}
},
error => {
错误处理
return Promise.reject(error);
}
);
```通过该途径允许你将所有HTTP请求集成统一的处理逻辑。这使得在大型项目中实现了对HTTP请求的有效管理，简化了相关代码逻辑，并且显著提升了整体开发效率。此外，在经过封装后，AXIO还提供了高度量身定额化的功能模块，例如自定义化的错误响应设计、统一的状态负载控制等。在对AXIOX请求的封装过程中，可以实现自定义GET与POST请求处理方式，并通过这种方式实现更简便地进行HTTP客户端操作。```javascript
export function get(url, params) {
return axios.get(url, { params });
}
export function post(url, data) {
return axios.post(url, data);
}
```现在，你可以在Vue组件中通过引入自定义方法来发起HTTP请求，而不必每次都直接调用axios。这种做法使得代码更加模块化，并且提高了代码的可读性和可维护性。
全部评论 (0)
