vue2中对 Axios 进行更加细致的封装,例如封装 get、post 等方法,统一处理错误信息等。
时间: 2024-01-22 14:20:20 浏览: 23
Vue2 中对 Axios 进行细致的封装可以通过创建一个 Axios 实例来实现。下面是一个简单的封装示例:
```javascript
import axios from 'axios'
import { Message } from 'element-ui'
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 5000
})
// 请求拦截器
service.interceptors.request.use(
config => {
// 在发送请求之前做些什么
return config
},
error => {
// 对请求错误做些什么
console.log(error) // for debug
Promise.reject(error)
}
)
// 响应拦截器
service.interceptors.response.use(
response => {
// 对响应数据做点什么
const res = response.data
if (res.code !== 200) {
Message({
message: res.message || 'Error',
type: 'error',
duration: 5 * 1000
})
return Promise.reject(new Error(res.message || 'Error'))
} else {
return res
}
},
error => {
// 对响应错误做点什么
console.log('err' + error) // for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default service
```
在这个示例中,我们首先导入了 Axios 和 Element UI 的 Message 组件。接着创建了一个 Axios 实例 `service`,并设置了基本的配置项,如请求的基础 URL 和超时时间。然后,我们对请求和响应进行了拦截处理,统一处理了错误信息,并通过 Promise.reject 返回了错误信息。
在 Vue 组件中使用这个封装好的 Axios 实例,只需要导入即可:
```javascript
import request from '@/utils/request'
export function fetchList(query) {
return request({
url: '/list',
method: 'get',
params: query
})
}
export function createItem(data) {
return request({
url: '/create',
method: 'post',
data
})
}
```
在这个示例中,我们通过 `request` 方法来发送 HTTP 请求,而不是直接使用 Axios。`request` 方法会自动将参数传递给 Axios 实例,从而实现了对 Axios 的细致封装。