vue中axios封装
时间: 2024-08-14 18:03:15 浏览: 49
在 Vue 项目中,Axios 是一个基于 Promise 的 HTTP 客户端,用于浏览器和 node.js 环境。它非常适合与 Vue.js 搭配使用,因为它们都是基于 Promise 的。封装 Axios 的主要目的是为了简化 HTTP 请求的代码,提高代码的复用性,同时可以统一处理请求和响应的拦截。
以下是一个简单的 Axios 封装示例:
1. 安装 Axios:
```
npm install axios
```
2. 创建一个 `request.js` 文件来进行 Axios 的封装:
```javascript
import axios from 'axios';
// 创建axios实例
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // api的base_url
timeout: 5000 // 请求超时时间
});
// 请求拦截器
service.interceptors.request.use(
config => {
// 在发送请求之前做些什么
// 例如设置token
const token = localStorage.getItem('token');
if (token) {
config.headers['Authorization'] = token;
}
return config;
},
error => {
// 对请求错误做些什么
console.error(error); // 在控制台输出错误信息
return Promise.reject(error);
}
);
// 响应拦截器
service.interceptors.response.use(
response => {
// 对响应数据做点什么
const res = response.data;
if (res.code !== 200) {
// 根据code码进行相应的业务处理
console.error(res.message); // 在控制台输出错误信息
return Promise.reject(res.message);
} else {
return res;
}
},
error => {
// 对响应错误做点什么
console.error(error); // 在控制台输出错误信息
return Promise.reject(error);
}
);
export default service;
```
3. 在 Vue 组件中使用封装后的 Axios:
```javascript
<template>
<!-- Your template -->
</template>
<script>
import request from '@/utils/request.js';
export default {
name: 'YourComponent',
methods: {
fetchData() {
request({
url: '/your/api/url',
method: 'get'
}).then(response => {
console.log(response);
}).catch(error => {
console.log(error);
});
}
},
mounted() {
this.fetchData();
}
};
</script>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)