Vue 中统一处理 ajax 请求错误

通常说, ajax 请求错误有两种, 一种是网络问题或者代码问题所造成的 400, 500错误等, 另外一种是请求参数后端通不过验证, 由后端抛出的错误

第二种根据不同的后端框架或者程序猿又可以分成两种, 一种是直接返回 json, 用一个 特别的 code 来区别正常请求返回的数据, 如:

还有一种就是抛出 http 404 之类的, 然后把错误原因放在 header 里.

在组件写调用 ajax时, 通常都是这么写(这里以 axios 为例):


随着请求越来越多, 这么写也就显得麻烦...所以我们需要封装下, 做一些预处理
下面代码以 axios 为例:

1. 创建 api.js 文件

引入我们需要的两个库, 为什么需要用到 qs, 后面会说到

2. 利用拦截器做预处理

请求时的拦截器

请求完成后的拦截器

这里的return response返回的是一个对象, 内容如下:

做 api 封装

这里一般封装两种方法, 一个是 get 请求, 一个是 post 请求, 有其他情况也可以自行添加

这里的 data 为什么需要用qs.stringify(data)包一下, 主要是配合下面headers里的Content-Type, 转成表单提交, 让后端可以直接用 $_POST 拿到数据
这样, 一个大概的封装就完成了

4. 数据统一处理

我们先处理来自网络或者服务器的错误, 定义一个checkStatus函数

再来处理来自程序端的错误, 创建一个checkCode的函数

5. 最终代码

6. 在组件中使用

发表评论

电子邮件地址不会被公开。 必填项已用*标注