vue-resource拦截器

最新推荐文章于 2024-02-06 20:23:21 发布

原创最新推荐文章于 2024-02-06 20:23:21 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue-resour #vue #http

vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用 Vue-resource 实现请求拦截器来过滤重复请求、添加 loading 动画、统一设置 header 和处理异常信息。通过示例代码展示了如何自定义请求头并处理不同响应状态。

vue-resource拦截器

拦截器能做什么？
- 过滤重复请求
- 添加loading动画
- 统一添加header
- 统一处理异常信息

下面是一个简单的拦截器案例

import Vue from 'vue'
import VueResource from 'vue-resource'
Vue.use(VueResource)
const httpLockArr = {} //请求锁，避免同一条请求重复发送

Vue.http.interceptors.push(function (request, next) {
  let lastRequest = httpLockArr[request.url]
  request.url = Vue.prototype.base_url+request.url
  if (lastRequest) {
    return false
  }
  httpLockArr[request.url] = request
  //请求头设置
  request.headers.set('Content-Type', 'application/json;charset=utf-8')
  next(function (response) {
    httpLockArr[request.url] = null
    if (response.ok) {
      let data = response.data
      if (data.code == 0) {
        response.data = data.data
      } else if (data.code == 304) {
        alert('页面重定向')
      }else if(data.code == '401'){
        alert('根据需要处理')
      } else {
        showToast(data.msg, 2000)
        response.ok = false
      }
      return response
    } else {
    }
  })
})