vue的axios封装
时间: 2023-09-25 22:06:21 浏览: 85
详解vue中axios的封装
axios是一个基于Promise用于浏览器和node.js的HTTP客户端,可以用于实现HTTP请求和响应。下面是一种简单的Vue的axios封装:
1. 创建一个axios实例
```javascript
import axios from 'axios'
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // api的base_url
timeout: 5000 // 请求超时时间
})
```
2. 添加请求拦截器
```javascript
service.interceptors.request.use(
config => {
// 在发送请求之前做些什么
if (store.getters.token) {
// 让每个请求携带token
config.headers['Authorization'] = 'Bearer ' + getToken()
}
return config
},
error => {
// 对请求错误做些什么
console.log(error) // for debug
Promise.reject(error)
}
)
```
3. 添加响应拦截器
```javascript
service.interceptors.response.use(
response => {
const res = response.data
if (res.code !== 20000) {
Message({
message: res.message,
type: 'error',
duration: 5 * 1000
})
if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
// token失效
MessageBox.confirm(
'你已经被登出,可以取消继续留在该页面,或者重新登录',
'确定登出',
{
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
store.dispatch('FedLogOut').then(() => {
location.reload()// 重载页面
})
})
}
return Promise.reject('error')
} else {
return response.data
}
},
error => {
console.log('err' + error) // for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
```
4. 封装get和post方法
```javascript
export function fetch(url, params) {
return new Promise((resolve, reject) => {
service.get(url, {
params: params
}).then(response => {
resolve(response.data)
}).catch(err => {
reject(err)
})
})
}
export function post(url, data) {
return new Promise((resolve, reject) => {
service.post(url, data).then(response => {
resolve(response.data)
}).catch(err => {
reject(err)
})
})
}
```
这就是一个简单的Vue的axios封装。你可以根据自己的需求进行修改和扩展。
阅读全文