一、拦截器的概念和作用
搞定Vue的网络请求，别忘了看看拦截器这个神奇的东西。说白了，拦截器就像是给请求和回复事先打了个招呼，让我们可以随心所欲地干预。无论是开始请求，还是发送过程中，甚至是收到答案后，都能用得到。这样一来，常用的功能就能轻松实现。比如对于Vue开发特别实用，可以帮我们将复杂的业务逻辑提取出来，避免繁琐的代码，提高我们的工作效率！
二、创建axios实例
要想实现网络请求的拦截和统一处理，首先得用axios创建一个实例来进行请求~至于Vue项目，一般会在主页面main.js里加点代码弄出来这个 axois 实例。然后你可以设置一些全局变量，之后想拦截请求或响应都不是问题了。
三、请求拦截器
这个全能的请求拦截器，就是在你连网打招呼的那一刻开始起作用哒！我们只要给axios加点料，把拦截器套上去，这样就能在发送请求之前干点儿啥了，比如改动下请求头信息检查身份啥的。还能趁此机会添油加醋，让你发出去滴请求更好玩儿！没准儿在拦截过程中突然出个错，不用慌，直接用Promise.reject()抛出来就行，后面肯定有人帮你搞定滴~
四、响应拦截器
别忘了，响应拦截器很重要。它能在收到后台回复后添加点儿东西。比如说，我们可以给后台的数据加点料——搞个犯错提醒。这就像给我们的数据穿个新衣裳，而且数据还看起来很规整！
import axios from 'axios'
const service = axios.create({
// 在这里可以进行一些全局的配置
// ...
})
export default service
五、统一错误处理
import service from './service'
service.interceptors.request.use(
config => {
// 在发送请求之前做一些处理
// ...
return config
},
error => {
// 请求错误时做一些处理
// ...
Promise.reject(error)
}
)
那个叫”响应拦截器”，就是遇到了啥事儿都不怕，全都拿下！看下后台给的状态码是咋回事儿，判断下到底怎么了？简单来说，就是用element-ui库里面的Message推出个错信息，让大家立马明白发生什么事了，也好赶紧想办法解决问题呀。
六、业务逻辑封装
不只是阻止网络请求和单次处理？其实，咱还能用别的招数解决问题！首先，我们可以在service.js里加上各种业务规则，加上之前说过的拦截器，保证能玩儿出新花样来！这么一来，不仅代码重复使用率提高了，整个项目的结构也更加清晰易懂~
七、灵活调整与扩展
service.interceptors.response.use(
response => {
// 在接收到响应后做一些处理
// ...
return response
},
error => {
// 响应错误时做一些处理
// ...
return Promise.reject(error)
}
)
说实话，网络请求拦截和统一处理这个事儿没有固定套路哈。具体怎么做，还得看实际情况，每个项目都有自己的特殊要求，开发时间也各不相同。咱们要随机应变好好利用现有的功能，发挥最大的作用。要是又有新的需求出现，那就加点特别的策略；若是新接口上线了，修改下代码就能直接用上去。所以捏，优化和调整 Vue 里的网络请求功能是非常重要且有益的事情！
八、总结与展望
看完这篇文章，你就能学会用Vue怎么搞定网络请求~网络请求是咱们前端开发必不可少的环节~别忘了使用拦截器不仅能确保项目稳定运行，还方便后期维护。学以致用，相信你的技能也将更上层楼喽！
import { Message } from 'element-ui'
service.interceptors.response.use(
response => {
// 在接收到响应后做一些处理
// ...
return response
},
error => {
// 响应错误时做一些处理
if (error.response) {
switch (error.response.status) {
case 401:
// 鉴权失败
// ...
break
case 404:
// 请求资源不存在
// ...
break
// 其他错误处理
// ...
}
}
// 在页面显示错误信息
Message.error(error.message)
return Promise.reject(error)
}
)
。
评论0