vue3封装request请求
时间: 2023-09-16 16:13:10 浏览: 151
Vue 3 封装 request 请求,可以使用 axios 或者 fetch,以下是使用 axios 的示例:
1. 安装 axios
```
npm install axios
```
2. 在 src 目录下创建 utils/request.js 文件,封装 axios 请求
```js
import axios from 'axios'
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 5000
})
service.interceptors.request.use(
config => {
// 在请求头中添加 token
if (localStorage.token) {
config.headers.Authorization = `Bearer ${localStorage.token}`
}
return config
},
error => {
console.log(error)
return Promise.reject(error)
}
)
service.interceptors.response.use(
response => {
const res = response.data
if (res.code !== 200) {
console.log(res.message || '请求失败')
return Promise.reject(new Error(res.message || '请求失败'))
} else {
return res
}
},
error => {
console.log(error)
return Promise.reject(error)
}
)
export default service
```
3. 在需要使用请求的组件中引入 request.js
```js
import request from '@/utils/request'
request({
url: '/api/user',
method: 'get'
}).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
```
以上是 Vue 3 封装 request 请求的基本流程,可以根据实际需求进行调整和修改。
阅读全文