vue封装axios请求 代码举例说明

非常感谢您的提问！下面是一个基于Vue封装Axios请求的示例代码：
import axios from 'axios'
import { Message } from 'element-ui'

// 创建axios实例
const service = axios.create({
baseURL: 'http://api.example.com',
timeout: 5000 // 请求超时时间
})

// 请求拦截器
service.interceptors.request.use(
config => {
// 在发送请求之前添加一些请求头参数
config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('token')
return config
},
error => {
// 处理请求错误
console.log(error)
return 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(error)
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)

// 封装请求方法
const request = {
get(url, params) {
return service({
method: 'get',
url,
params
})
},
post(url, data) {
return service({
method: 'post',
url,
data
})
},
put(url, data) {
return service({
method: 'put',
url,
data
})
},
delete(url) {
return service({
method: 'delete',
url
})
}
}

export default request
登录后复制
当然，对于不同的项目和需求，具体的封装方式也可能会有所不同。希望这段代码能够帮助您进一步理解Vue中如何封装Axios请求。