vue是当前前端开发中最常用的框架之一，而ajax请求又是前端开发中非常关键的一环。为了方便开发者使用，vue社区中出现了许多对ajax请求库axios进行封装的实践。本文将介绍vue中对axios进行封装的最佳实践，帮助您更好地理解如何在vue项目中使用axios。
- 封装axios
在Vue项目中，我们需要把axios进行封装以方便使用。这里介绍一个标准的axios封装：
import axios from 'axios'
import store from '@/store'
import router from '@/router'
// 创建axios实例
const service = axios.create({
timeout: 10000, // 请求超时时间
baseURL: process.env.VUE_APP_BASE_API // api请求的baseURL
})
// request拦截器
service.interceptors.request.use(
config => {
// 发送请求前进行token鉴权
if (store.getters.token) {
config.headers['Authorization'] = 'Bearer ' + store.getters.token
}
return config
},
error => {
console.log(error)
Promise.reject(error)
}
)
// response拦截器
service.interceptors.response.use(
response => {
const res = response.data
if (res.code !== 20000) {
// 抛出异常信息
return Promise.reject(new Error(res.message || '错误'))
} else {
return res
}
},
error => {
console.log('err' + error)
if (error.response.status === 401) {
// 跳转到登录页
router.push({ path: '/login' })
}
return Promise.reject(error)
}
)
export default service上述代码创建了一个axios实例，并对其进行了request和response拦截器的配置。在request拦截器中，我们可以通过store获取用户token，并将其添加到请求头中进行鉴权。在response拦截器中，我们处理了服务器响应异常和未授权的请求，以及对返回数据的处理。
- 对http请求进行封装
在使用axios时我们通常需要对http请求进行进一步的封装以便于进行统一管理。下面我们为各种http请求创建一个封装。
get请求：
立即学习“前端免费学习笔记（深入）”；
import http from '@/utils/http'
export default {
get(url, params) {
return http.get(url, {
params: params
})
}
}post请求：
import http from '@/utils/http'
export default {
post(url, data) {
return http.post(url, data)
}
}delete请求：
import http from '@/utils/http'
export default {
delete(url) {
return http.delete(url)
}
}put请求：
import http from '@/utils/http'
export default {
put(url, data) {
return http.put(url, data)
}
}通过以上的封装，我们可以在使用http请求时直接调用对应的方法即可。
- 在Vue项目中使用
在Vue项目中使用封装的axios和http请求，需要进行以下操作：
首先，我们需要在main.js文件中引入axios和封装好的http请求：
import axios from 'axios' import http from '@/utils/http' Vue.prototype.$axios = axios Vue.prototype.$http = http
其次，在组件中使用：
import api from '@/api/api'
export default {
name: 'Demo',
data() {
return {
dataList: []
}
},
mounted() {
this.getData()
},
methods: {
getData() {
let params = {
// 请求参数
}
api.get('/data', params).then(res => {
console.log(res)
this.dataList = res.data
})
}
}
}这里我们将api封装的http请求引入，并在mounted生命周期中调用getData方法发起http请求，最终将结果展示在页面中。
- 结语
本文介绍了在Vue中对axios进行封装的最佳实践，这些实践在提高开发效率、降低代码重复等方面都有很好的作用。对于那些刚接触Vue的开发者来说，这些技巧能够轻松学习和理解，在实际开发中也能够发挥更大的作用。
