axios二次封装及使用
时间: 2023-08-12 17:04:10 浏览: 53
使用Promise二次封装Axios可以更方便地处理异步请求。我们可以将Axios的请求封装成Promise对象,这样就可以使用Promise的then和catch方法来处理请求的成功和失败。
具体实现方法如下:
1. 安装Axios和Promise
```
npm install axios
```
2. 创建一个封装Axios的Promise对象
```javascript
const axiosPromise = (url, method, data) => {
return new Promise((resolve, reject) => {
axios({
url: url,
method: method,
data: data
}).then(response => {
resolve(response.data);
}).catch(error => {
reject(error);
});
});
};
```
3. 使用封装的Promise对象发送请求
```javascript
axiosPromise('/api/user', 'get', {}).then(data => {
console.log(data);
}).catch(error => {
console.log(error);
});
```
这样就可以更方便地处理异步请求了。
相关问题
axios二次封装及使用携带token
Axios 是一个基于 Promise 的 HTTP 请求库,可以在浏览器和 Node.js 中使用。二次封装 axios 主要是为了方便使用和统一管理请求,通常我们会在二次封装中加入一些通用的处理逻辑,例如添加请求头、统一处理错误等。
以下是一个简单的 axios 二次封装示例:
```javascript
import axios from 'axios';
const instance = axios.create({
baseURL: 'https://api.example.com',
timeout: 5000,
});
// 添加请求拦截器
instance.interceptors.request.use(
config => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
error => {
return Promise.reject(error);
}
);
// 添加响应拦截器
instance.interceptors.response.use(
response => {
return response.data;
},
error => {
return Promise.reject(error.response.data);
}
);
export default instance;
```
在这个示例中,我们通过 create 方法创建了一个 axios 实例,设置了基础 URL 和超时时间。然后通过添加请求拦截器,我们可以在每次请求中携带 token,以便后端验证用户身份。最后,通过添加响应拦截器,我们可以统一处理错误响应,返回对应的错误信息。
使用这个二次封装后的 axios,我们可以直接调用它的 get、post 等方法,例如:
```javascript
import request from './request';
request.get('/users').then(data => {
console.log(data);
}).catch(error => {
console.log(error);
});
```
在这个示例中,我们通过 import 引入了之前封装好的 axios 实例,然后调用了它的 get 方法,请求了 /users 接口。如果请求成功,会输出响应数据,否则会输出错误信息。
需要注意的是,这里的 token 是从 localStorage 中获取的,你也可以从 cookie 或其他地方获取。同时,这个示例中还使用了 Promise.reject 方法,让错误信息可以继续向下传递,方便统一处理。
vue配置proxy代理 以及axios二次封装及使用
要在Vue项目中配置proxy代理以解决跨域问题,并且使用Promise二次封装Axios发送请求,你可以按照以下步骤进行操作:
1. 在项目的根目录下创建一个 `vue.config.js` 文件。
2. 在 `vue.config.js` 文件中添加以下代码:
```javascript
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://api.example.com', // 设置你想要代理的目标地址
changeOrigin: true, // 开启跨域
pathRewrite: {
'^/api': '' // 将请求地址中的 '/api' 替换为空字符串
}
}
}
}
};
```
3. 安装Axios和Promise
```
npm install axios
```
4. 创建一个封装Axios的Promise对象
```javascript
import axios from 'axios';
const axiosPromise = (url, method, data) => {
return new Promise((resolve, reject) => {
axios({
url: url,
method: method,
data: data
}).then(response => {
resolve(response.data);
}).catch(error => {
reject(error);
});
});
};
export default axiosPromise;
```
5. 在需要发送请求的组件中使用封装的Promise对象
```javascript
import axiosPromise from '@/utils/axiosPromise';
axiosPromise('/api/user', 'get', {}).then(data => {
console.log(data);
}).catch(error => {
console.log(error);
});
```
请确保将 `http://api.example.com` 替换为你真实的后端API地址,并根据你的项目结构和需求进行相应的配置。
这样就可以在Vue项目中配置proxy代理以解决跨域问题,并使用封装的Promise对象发送请求了。