vue2封装request请求
时间: 2023-09-16 15:12:20 浏览: 52
Vue2中封装request请求可以使用axios库,axios是一个基于Promise的HTTP客户端,可以用于浏览器和node.js中,支持拦截器、取消请求、自动转换JSON数据等功能。
以下是一个简单的封装request请求的示例:
1. 安装axios库
```
npm install axios --save
```
2. 创建request.js文件并封装request函数
```javascript
import axios from 'axios'
const request = axios.create({
baseURL: 'http://localhost:3000/api', // 接口基础路径
timeout: 5000 // 请求超时时间
})
// 请求拦截器
request.interceptors.request.use(config => {
// 可以在请求头中添加token等信息
return config
}, error => {
return Promise.reject(error)
})
// 响应拦截器
request.interceptors.response.use(response => {
// 对响应数据进行处理
return response.data
}, error => {
return Promise.reject(error)
})
export default request
```
3. 在组件中使用封装好的request函数
```javascript
import request from '@/utils/request'
export default {
methods: {
fetchData () {
request.get('/data').then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
}
}
}
```
以上代码中,封装了一个名为request的axios实例,通过拦截器对请求和响应进行处理,使得请求和响应的处理更加方便和灵活。在组件中使用时,只需要import封装好的request函数,即可方便地进行请求。
相关推荐
![](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)
![](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)
![](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)