vue2的axios通用封装
时间: 2023-10-03 15:07:30 浏览: 41
在Vue2中,可以使用axios来进行网络请求,并进行通用的封装以简化使用。下面是一个示例:
首先,安装axios依赖:
```
npm install axios
```
然后,创建一个名为api.js的文件,用于封装axios的通用请求方法:
```javascript
import axios from 'axios';
const instance = axios.create({
baseURL: 'https://api.example.com', // 设置基础URL,根据实际情况修改
timeout: 5000, // 设置请求超时时间,根据实际情况修改
});
// 请求拦截器
instance.interceptors.request.use(
config => {
// 在请求发送之前做一些处理,例如添加token等
相关问题
vue对axios的封装使用
对于Vue对axios的封装使用,通常可以按照以下步骤进行:
1. 首先,在项目中安装axios和vue-axios插件。可以通过以下命令来安装:
```
npm install axios vue-axios
```
2. 在main.js文件中引入axios和vue-axios,并将其配置为Vue的全局属性:
```javascript
import axios from 'axios';
import VueAxios from 'vue-axios';
Vue.use(VueAxios, axios);
```
3. 创建一个api.js或者request.js文件,用来封装axios的一些请求方法。这个文件中可以定义一些通用的请求拦截器和响应拦截器,以及一些常用的请求方法。例如:
```javascript
import axios from 'axios';
// 请求拦截器
axios.interceptors.request.use(config => {
// 在发送请求之前做些什么,比如添加token到请求头部
return config;
}, error => {
// 对请求错误做些什么
return Promise.reject(error);
});
// 响应拦截器
axios.interceptors.response.use(response => {
// 对响应数据做些什么
return response.data;
}, error => {
// 对响应错误做些什么
return Promise.reject(error);
});
// 封装GET请求方法
export function get(url, params) {
return axios.get(url, { params });
}
// 封装POST请求方法
export function post(url, data) {
return axios.post(url, data);
}
```
4. 在组件中使用封装好的请求方法。例如,在某个组件的方法中使用GET请求:
```javascript
import { get } from '@/api';
export default {
methods: {
fetchData() {
get('/api/data').then(response => {
// 处理接口返回的数据
}).catch(error => {
// 处理接口请求失败
});
}
}
}
```
通过以上步骤,你可以在Vue项目中对axios进行封装和使用,以便于统一管理和处理接口请求。当然,具体的封装方式可以根据项目需求进行调整和扩展。
vue通用axios封装 get put post delete
Vue通常使用Axios作为Http库来发送HTTP请求。下面是一个通用的Axios封装,可以用于发送get、put、post和delete请求。
首先,我们需要在项目中安装Axios依赖。可以使用npm或yarn命令来安装:
```
npm install axios
```
或者
```
yarn add axios
```
然后,我们可以在项目中创建一个utils文件夹,并在其中创建一个http.js文件。在http.js文件中,我们可以编写通用的Axios封装代码:
```javascript
import axios from 'axios';
// 创建一个axios实例
const instance = axios.create({
baseURL: 'http://api.example.com' // 设置请求的默认基本URL
});
// 请求拦截器,可以在请求发送之前做一些处理,比如添加请求头
instance.interceptors.request.use(
config => {
// 在请求发送之前添加一个Authorization请求头(如果需要)
config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('token');
return config;
},
error => {
return Promise.reject(error);
}
);
// 响应拦截器,可以在请求返回之后做一些处理,比如处理错误信息
instance.interceptors.response.use(
response => {
// 在请求成功返回之后处理响应数据
return response;
},
error => {
// 在请求失败返回之后处理错误信息
return Promise.reject(error.response.data);
}
);
// 封装get请求
export const get = (url, params) => {
return instance.get(url, { params });
};
// 封装put请求
export const put = (url, data) => {
return instance.put(url, data);
};
// 封装post请求
export const post = (url, data) => {
return instance.post(url, data);
};
// 封装delete请求
export const del = url => {
return instance.delete(url);
};
```
以上是一个简单的对Axios进行封装的例子。你可以根据自己的项目需求进行相应的修改和扩展。在组件中使用get、put、post和delete方法来发送不同类型的请求。示例代码如下:
```javascript
import { get, put, post, del } from '@/utils/http';
// 使用get请求
get('/api/users').then(response => {
console.log(response.data);
}).catch(error => {
console.error(error);
});
// 使用put请求
put('/api/user/1', { name: 'John', age: 30 }).then(response => {
console.log(response.data);
}).catch(error => {
console.error(error);
});
// 使用post请求
post('/api/user', { name: 'John', age: 30 }).then(response => {
console.log(response.data);
}).catch(error => {
console.error(error);
});
// 使用delete请求
del('/api/user/1').then(response => {
console.log(response.data);
}).catch(error => {
console.error(error);
});
```
以上就是一个通用的Axios封装,可以用于发送get、put、post和delete请求。通过这种封装,可以简化和统一项目中的HTTP请求处理。