热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

Vue添加请求拦截器及vue-resource拦截器使用

这篇文章主要介绍了Vue添加请求拦截器及vue-resource拦截器使用,需要的朋友可以参考下

一、现象

统一处理错误及配置请求信息

二、解决

1、安装 axios  , 命令: npm install axios --save-dev

2、在根目录的config目录下新建文件 axios.js  ,内容如下:

import axios from 'axios'
// 配置默认的host,假如你的API host是:http://api.htmlx.club
axios.defaults.baseURL = 'http://api.htmlx.club' 
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  return config
}, function (error) {
  // 对请求错误做些什么
return Promise.reject(error)
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error)
});

3、在main.js中进行引用,并配置一个别名($ajax)来进行调用:

import axios from 'axios'
import '../config/axios'
Vue.prototype.$ajax = axios

如图:

4、应用,一个登录的post如:

this.$ajax({
  method: 'post',
  url: '/login',
  data: {
    'userName': 'xxx',
    'password': 'xxx'
  }
}).then(res => {
  console.log(res)
})

ps:下面看下vue-resource 拦截器使用

在vue项目使用vue-resource的过程中,临时增加了一个需求,需要在任何一个页面任何一次http请求,增加对token过期的判断,如果token已过期,需要跳转至登录页面。如果要在每个页面中的http请求操作中添加一次判断,那么会是一个非常大的修改工作量。那么vue-resource是否存在一个对于任何一次请求响应捕获的的公共回调函数呢?答案是有的!

vue-resource的interceptors拦截器的作用正是解决此需求的妙方。在每次http的请求响应之后,如果设置了拦截器如下,会优先执行拦截器函数,获取响应体,然后才会决定是否把response返回给

then进行接收。那么我们可以在这个拦截器里边添加对响应状态码的判断,来决定是跳转到登录页面还是留在当前页面继续获取数据。

下边代码添加在main.js中

Vue.http.interceptors.push((request, next) => {
 console.log(this)//此处this为请求所在页面的Vue实例
 // modify request
 request.method = 'POST';//在请求之前可以进行一些预处理和配置
 // continue to next interceptor
  next((response) => {//在响应之后传给then之前对response进行修改和逻辑判断。对于token时候已过期的判断,就添加在此处,页面中任何一次http请求都会先调用此处方法
   response.body = '...';
    return response;
 });
});

在知道此方法之前,鄙人想了一个笨方法,但是也能在一定程度上降低修改工作量。方法是为Vue绑定一个this.$$http.get方法取代this.$http.get方法,每个页面的http请求添加个$在$http前即可。

// ajax.js
function plugin(Vue){
 Object.defineProperties(Vue.prototype,{
  $$http:{
   get(){
    return option(Vue);
   }
  }
 })
}
function option(Vue){
 let v = new Vue();
 return {
  get(a,b){
   let promise = new Promise(function(reslove,reject){
    v.$http.get(a,b).then((res)=>{
     reslove(res)
    },(err)=>{
            //处理token过期问题。
    })
   })
   return promise;
  }
 }
}
module.exports=plugin;
//main.js
import ajax from './ajax.js'
Vue.use(ajax)

总结

以上所述是小编给大家介绍的Vue添加请求拦截器及vue-resource 拦截器使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!


推荐阅读
  • Django框架进阶教程:掌握Ajax请求的基础知识与应用技巧
    本教程深入探讨了Django框架中Ajax请求的核心概念与实用技巧,帮助开发者掌握异步数据交互的方法,提升Web应用的响应速度和用户体验。通过实例解析,详细介绍了如何在Django项目中高效实现Ajax请求,涵盖从基础配置到复杂场景的应用。 ... [详细]
  • 基于Node.js的高性能实时消息推送系统通过集成Socket.IO和Express框架,实现了高效的高并发消息转发功能。该系统能够支持大量用户同时在线,并确保消息的实时性和可靠性,适用于需要即时通信的应用场景。 ... [详细]
  • iOS开发中MVC架构模式的深入解析(第一部分)
    在iOS开发中,MVC架构模式是常用的设计模式之一。本文将深入解析MVC架构的第一部分,重点介绍View组件。View组件继承自UIView,主要负责内容的展示(如UILabel等视图类)和用户输入的处理(如UIButton等控件类)。通过详细的代码示例和实际应用,帮助开发者更好地理解和掌握View在MVC架构中的作用和实现方式。 ... [详细]
  • Node.js 教程第五讲:深入解析 EventEmitter(事件监听与发射机制)
    本文将深入探讨 Node.js 中的 EventEmitter 模块,详细介绍其在事件监听与发射机制中的应用。内容涵盖事件驱动的基本概念、如何在 Node.js 中注册和触发自定义事件,以及 EventEmitter 的核心 API 和使用方法。通过本教程,读者将能够全面理解并熟练运用 EventEmitter 进行高效的事件处理。 ... [详细]
  • 本文深入探讨了 iOS 开发中 `int`、`NSInteger`、`NSUInteger` 和 `NSNumber` 的应用与区别。首先,我们将详细介绍 `NSNumber` 类型,该类用于封装基本数据类型,如整数、浮点数等,使其能够在 Objective-C 的集合类中使用。通过分析这些类型的特性和应用场景,帮助开发者更好地理解和选择合适的数据类型,提高代码的健壮性和可维护性。苹果官方文档提供了更多详细信息,可供进一步参考。 ... [详细]
  • React组件是构成用户界面的基本单元,每个组件都封装了特定的功能和逻辑,具备高度的独立性和可复用性。通过将不同大小和功能的组件组合在一起,可以构建出复杂且功能丰富的页面,类似于拼图游戏中的各个部分,最终形成一个完整的视觉效果。 ... [详细]
  • 本文深入探讨了 Vue.js 中异步组件的应用与优化策略。首先,文章介绍了异步组件的基本概念及其在现代前端开发中的重要性。为了确保最佳实践,建议使用 Webpack 作为模块打包工具,因为 Browserify 默认不支持异步组件的加载。接着,详细解释了异步组件的使用方法,并提供了官方文档的相关链接以供参考。此外,文章还讨论了多种优化技巧,包括代码分割、懒加载和性能调优,以提升应用的整体性能和用户体验。 ... [详细]
  • 【前端开发】深入探讨 RequireJS 与性能优化策略
    随着前端技术的迅速发展,RequireJS虽然不再像以往那样吸引关注,但其在模块化加载方面的优势仍然值得深入探讨。本文将详细介绍RequireJS的基本概念及其作为模块加载工具的核心功能,并重点分析其性能优化策略,帮助开发者更好地理解和应用这一工具,提升前端项目的加载速度和整体性能。 ... [详细]
  • 本课程详细介绍了如何使用Python Flask框架从零开始构建鱼书应用,涵盖高级编程技巧和实战项目。通过视频教学,学员将学习到Flask的高效用法,包括数据库事务处理和书籍交易模型的实现。特别感谢AI资源网提供的课程下载支持。 ... [详细]
  • 探索JavaScript倒计时功能的三种高效实现方法及代码示例 ... [详细]
  • 需求:在指定的DIV区域内点击时,需展示该区域内的附加操作面板;而在区域外点击时,则应自动隐藏该附加操作面板。通过精准的事件监听与处理,确保用户交互体验的流畅性和直观性。 ... [详细]
  • HTML5大文件传输技术深度解析与实践分享
    本文深入探讨了HTML5在Web前端开发中实现大文件上传的技术细节与实践方法。通过实例分析,详细讲解了如何利用HTML5的相关特性高效、稳定地处理大文件传输问题,并提供了可供参考的代码示例和解决方案。此外,文章还讨论了常见的技术挑战及优化策略,旨在帮助开发者更好地理解和应用HTML5大文件上传技术。 ... [详细]
  • 如何在PHP中实现链接输出与字符串连接的操作技巧 ... [详细]
  • npm 发布 WhalMakeLink 包:链接管理与优化的新选择
    WhalMakeLink 是一个强大的 npm 工具,专为项目管理和优化而设计。它能够自动在项目的 README 文件中生成当前工程目录下所有子项目的链接地址,极大提升了开发效率和文档维护的便捷性。通过简单的 `npm init` 命令即可快速启动和配置该工具,适用于各种复杂项目结构。 示例演示了其基本用法和功能。 ... [详细]
  • 初次接触AJAX是在去年,当时主要是通过手动编写客户端代码来实现,还需处理被请求的页面,过程相当繁琐。尽管之前就听说过AJAX.NET,但一直没有机会深入了解。本文将作为初学者的指南,详细介绍AJAX.NET的基本概念、核心功能及其在实际项目中的应用技巧,帮助读者快速上手并掌握这一强大的开发工具。 ... [详细]
author-avatar
yyyy
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有