精华内容
下载资源
问答
  • 主要介绍了Vue添加请求拦截器及vue-resource 拦截器使用,需要的朋友可以参考下
  • Vue添加请求拦截器

    2019-11-08 08:31:41
    一、现象 统一处理错误及配置请求信息 二、解决 1、安装 axios , 命令:npm install axios --save-dev 2、在根目录的config目录下新建文件axios....

    一、现象

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

     

    二、解决

    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)
    })

    三、总结

    统一处理方便

     

    展开全文
  • 一、现象统一处理错误及配置请求信息二、解决1、安装 axios , 命令:npm install axios --save-dev2、在根目录的config目录下新建文件 axios.js ,内容如下:import axios from 'axios'// 配置默认的host,假如你的...

    一、现象

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

    二、解决

    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 拦截器使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

    展开全文
  • 一、现象统一处理错误及配置请求信息二、解决1、安装 axios , 命令:npm install axios --save-dev2、在根目录的config目录下新建文件axios.js ,内容如下:import axios from 'axios'// 配置默认的host,假如你的API...

    一、现象

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

    二、解决

    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)

    })

    三、总结

    统一处理方便

    例:

    使用iview框架,在main.js添加请求接口拦截器 loading

    axios.interceptors.request.use(function (config) {

    iView.LoadingBar.start()returnconfig

    }),function (error) {

    iView.LoadingBar.error()returnPromise.reject(error)

    }

    axios.interceptors.response.use(function (config) {

    iView.LoadingBar.finish()returnconfig

    }),function (error) {

    iView.LoadingBar.error()returnPromise.reject(error)

    }

    /**

    * @export

    * @param {any} request

    * @param {any} next

    * @returns*/import storefrom './vuex/store'

    //全局错误处理,全局loading

    import { setLoading, setTip } from './vuex/actions/doc_actions'exportdefaultfunction (request, next) {if (request.tip !== false) {

    setLoading(store,true)

    }

    next((res)=>{

    setLoading(store,false)

    let data=JSON.parse(res.data)if (res.status === 0) {

    setTip(store, {

    text:'网络不给力,请稍后再试'})

    }if (!data.success) {

    setTip(store, {

    text: data.error_msg

    })

    }

    })

    }

    展开全文
  • vue添加全局拦截器

    千次阅读 2019-02-20 11:00:33
    vue添加全局拦截器 为了统一处理错误及配置请求信息可以设置拦截器,本文是登录过期设置,过期后跳到登录页 安装 axios , 命令: npm install axios --save-dev 在根目录的config目录下新建文件 axios.js ,内容...

    vue添加全局拦截器

    为了统一处理错误及配置请求信息可以设置拦截器,本文是登录过期设置,过期后跳到登录页

    1. 安装 axios , 命令: npm install axios --save-dev
    2. 在src目录的新建config文件夹,并在config目录下新建文件 axiosConfig.js ,内容如下
    
    import axios from 'axios'
    import { Message } from 'element-ui'//引用elementui的信息提示框,根据个人选择可以不用
    import Router from '../router'
    
    // Add a request interceptor
    axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config
    }, function (error) {
    // Do something with request error
    Message.error({
    message: '请求错误:' + error.message
    })
    return Promise.reject(error)
    })
    
    // Add a response interceptor
    axios.interceptors.response.use(function (response) {
    // console.log('response')
    // Do something with response data
    // console.log(response)
    //返回参数是noLogin时,返回首页
    if (response.data.flag === 'noLogin') {
    Router.push('/')
    Message.error({
    message: '当前会话过期'
    })
    }
    return response
    }, function (error) {
    // Do something with response error
    let msg = error.message
    if (error.response.status === 401) {
    msg = '当前会话已过期。'
    Router.push('/')
    }
    Message.error({
    message: '响应错误:' + msg
    })
    return Promise.reject(error)
    })
    export default axios
    

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

    import Axios from '@/config/axiosConfig'
    
    Vue.prototype.$http = Axios
    

    4、post请求格式

    this.$http.post(url).then(res=>{
        console.log(res)
        }).catch(res=>{
     console.log(res)
    })
    
    展开全文
  • vue 中想给所有的请求的headers中都添加一个token, 需要设置拦截器添加, 在main.js中添加一下代码即可。 Vue.http.interceptors.push((request, next) => { if(!(request.url.indexOf('152.10.12.*') != -...
  • 我们在请求后端接口的时候会遇到授权问题,就是后端接口需要一个认证,这个认证会在每个接口里返回,同时请求是也要携带,这个时候vue 里的拦截器就很好的做了这一点,统一处理错误及配置请求信息; 处理方案: 1、...
  • 简介 前后端分离的项目中,前端需要通过发送请求获取数据,为了安全,需要保证前端发送...axios中有 interceptors 属性,其中有 request 成员,就是一个请求拦截器 再通过 use 挂载一个回调函数,只要有请求通过 axi
  • 使用axios// 添加请求拦截器 每个请求体里加上token axios.interceptors.request.use( function (config) { // 在发送请求之前做些什么 return config; }, function (error) { // 对请求错误做些什么 return ...
  • 上一篇文章中写到如何配置 axios 请求拦截,但是遗留下一个令人非常困扰的问题。各种配置都没什么问题,可是请求一直过不去。例:get 请求报错如下 -> 王德发~~~~,这是什么鬼,不要慌张,让我们仔细看报错信息...
  • vue 请求拦截器

    2019-04-24 16:50:58
    2.在utils文件夹下request.js中添加如下代码(以token过期,跳转至登录页为例) import axios from 'axios' import { Toast } from 'mint-ui' import router from '../router' const service...
  • // 添加http request 请求拦截器,有token值则配置上token值 axios.interceptors.request.use( config => { // 在发送请求之前做些什么 const token = Cookies.get("token") ? Cookies.get("token") : ""; ...
  • 本来是这样的,一开始的请求头 ![图片说明](https://img-ask.csdn.net/upload/202001/03/1578021736_737554.png) 这个是浏览器url地址的的请求参数 ![图片说明]...
  • http请求拦截器

    2018-03-01 17:05:00
    Vue添加请求拦截器 一、现象 统一处理错误及配置请求信息 二、解决 1、安装 axios , 命令:npm install axios --save-dev 2、在根目录的config目录下新建文件axios.js ,内容如下: import axios from '...
  • vue-resource拦截器

    千次阅读 2017-11-24 14:55:23
    vue-resource拦截器 拦截器能做什么? - 过滤重复请求 - 添加loading动画 - 统一添加header - 统一处理异常信息 下面是一个简单的拦截器案例 import Vue from 'vue' import VueResource from 'vue-resource...
  • vue项目之请求拦截器(接口响应之前默认给所有接口加上某些参数) 一、在request.js中的请求拦截器里面添加如下代码 service.interceptors.request.use( config => { //请求之前需要添加参数的方法 requestMethod...
  • vue项目axios拦截器

    2019-08-06 16:02:26
    拦截器:发送或响应请求之前,做一些需要判断的事情,比如发送某些请求需要携带token,可在请求拦截器中配置token;...// 添加请求拦截器 axios.interceptors.request.use(function (config) { /...
  • vue的axios拦截器使用

    2019-05-21 10:27:50
    axios拦截器 下载并使用axios后可以对全局进行拦截器设置。...添加请求拦截器 //定义一个请求拦截器 axios.interceptors.request.use(function(config){ Vue.$vux.loading.show(); //在请求发出之前进行一些操作 r...
  • 在开发vue项目中,请求是不可缺少的,在发送请求时常常需要统一处理一些请求头参数等设置与响应事件,这时利用请求拦截器再好不过。 这里以axios请求为例 实现了设置统一请求头添加token, 其中token在登录时被存入...
  • 所谓拦截器,就是对一些文件进行拦截,本文主要介绍了Vue添加请求拦截器及vue-resource 拦截器使用,需要的朋友可以参考下,希望能帮助到大家。一、现象统一处理错误及配置请求信息二、解决1、安装 axios , 命令: ...
  • vue-resource的interceptors拦截器的作用正是解决此需求的妙方。在每次http的请求响应之后,如果设置了拦截器如下,会优先执行拦截器函数,获取响应体,然后才会决定是否把response返回给then进行接收。那么我们
  • 一.引入axios import axios from "axios"; //创建实例 const service = axios.create({ ...//添加请求拦截器 service.interceptors.request.use(function(config){ //在发送请求之前做些什么 config.h

空空如也

空空如也

1 2 3 4 5 ... 14
收藏数 263
精华内容 105
关键字:

vue添加请求拦截器

vue 订阅