Vue.js 是一款流行的 JavaScript 框架，用于构建现代化的 Web 应用程序。它提供了一种简洁、灵活、高效的方式来组织和构建用户界面。而 vue-axios 是一个基于 axios 封装的插件，用于在 Vue.js 应用程序中轻松处理 HTTP 请求和响应。
本文将介绍如何在 Vue.js 中使用 vue-axios 实现请求拦截和响应拦截。这些技术可以帮助您更好地处理 HTTP 请求和响应，并提高应用程序的可靠性和安全性。
请求拦截
请求拦截是指在发送 HTTP 请求之前对其进行拦截和修改。这可以用于添加身份验证令牌、设置请求头、检查参数等。在 Vue.js 中使用 vue-axios 实现请求拦截非常简单。您可以使用 axios 的拦截器来实现请求拦截。
// javascriptcn.com 代码示例
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
Vue.axios.interceptors.request.use(config => {
// 在发送请求之前做些什么
config.headers.Authorization = 'Bearer ' + localStorage.getItem('token')
return config
}, error => {
// 对请求错误做些什么
return Promise.reject(error)
})上述代码中，我们使用 Vue.use() 方法将 VueAxios 和 axios 添加到 Vue.js 中。然后，我们使用 Vue.axios.interceptors.request.use() 方法添加一个请求拦截器。在这个拦截器中，我们可以修改请求的配置，如添加身份验证令牌。在这个例子中，我们添加了一个名为 Authorization 的请求头，它的值是从 localStorage 中获取的身份验证令牌。
响应拦截
响应拦截是指在接收 HTTP 响应之前对其进行拦截和修改。这可以用于检查响应数据、处理错误、重定向等。在 Vue.js 中使用 vue-axios 实现响应拦截也非常简单。您可以使用 axios 的拦截器来实现响应拦截。
// javascriptcn.com 代码示例
Vue.axios.interceptors.response.use(response => {
// 对响应数据做些什么
return response
}, error => {
// 对响应错误做些什么
if (error.response.status === 401) {
// 如果返回 401 清除 token 并跳转到登录页面
localStorage.removeItem('token')
router.push('/login')
}
return Promise.reject(error)
})上述代码中，我们使用 Vue.axios.interceptors.response.use() 方法添加一个响应拦截器。在这个拦截器中，我们可以检查响应数据，处理错误，如清除身份验证令牌并重定向到登录页面。在这个例子中，我们检查响应状态是否为 401，如果是，我们清除 localStorage 中的身份验证令牌并重定向到登录页面。
示例代码
下面是一个完整的 Vue.js 应用程序，它演示了如何使用 vue-axios 实现请求拦截和响应拦截。
// javascriptcn.com 代码示例
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import router from './router'
Vue.use(VueAxios, axios)
Vue.axios.interceptors.request.use(config => {
// 在发送请求之前做些什么
config.headers.Authorization = 'Bearer ' + localStorage.getItem('token')
return config
}, error => {
// 对请求错误做些什么
return Promise.reject(error)
})
Vue.axios.interceptors.response.use(response => {
// 对响应数据做些什么
return response
}, error => {
// 对响应错误做些什么
if (error.response.status === 401) {
// 如果返回 401 清除 token 并跳转到登录页面
localStorage.removeItem('token')
router.push('/login')
}
return Promise.reject(error)
})
new Vue({
router,
render: h => h(App)
}).$mount('#app')总结
使用 vue-axios 实现请求拦截和响应拦截可以帮助您更好地处理 HTTP 请求和响应，并提高应用程序的可靠性和安全性。在 Vue.js 中使用 vue-axios 实现请求拦截和响应拦截非常简单，您只需使用 axios 的拦截器即可。本文提供了一个示例代码，希望能够帮助您更好地理解如何使用 vue-axios 实现请求拦截和响应拦截。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656c0c59d2f5e1655d46fbce