精华内容
下载资源
问答
  • 主要介绍了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)
    })

    三、总结

    统一处理方便

     

    展开全文
  • Vue axios 请求拦截器

    2020-11-21 16:56:26
    提示:项目中使用到的axios请求拦截器,在此仅仅是记录,以下附上全部代码。 1.引入axios js代码如下: import axios from "axios"; import { MessageBox } from 'element-ui' //可以不用,此处是使用elementUI 的...

    前言

    提示:项目中使用到的axios请求拦截器,在此仅仅是记录,以下附上全部代码。


    1.引入axios

    import axios from "axios";
    import { MessageBox } from 'element-ui'  //可以不用,此处是使用elementUI 的弹框
    

    2.设置请求基础路径

    axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
    

    3.挂载请求拦截器

    // request 拦截器
    //挂载请求拦截器 (相当于请求的预验证,请求到达服务器之前先验证这次请求)
    axios.interceptors.request.use(config => {
      //为请求头添加对象,添加token验证的Authorization字段
      config.headers.Authorization = window.sessionStorage.getItem("token");
      return config;
    });
    

    4.挂载响应拦截器

    // response 拦截器
    axios.interceptors.response.use(
      response => {
        const code = response.status;
        if (code == 504) {
          MessageBox.confirm("网络请求超时", "提示", {
            showCancelButton: false,
            type: "warning"
          });
          return Promise.reject(error);
        }
        if (code < 200 || code > 300) {
          MessageBox.confirm(response.message, "提示", {
            showCancelButton: false,
            type: "warning"
          });
          return Promise.reject("error");
        } else {
          // console.log(response.data, "拦截 请求的 response.data");
          if (response.data.status === -1) {
            let statusText = "";
            if (response.data.statusText) {
              if (response.data.statusText.indexOf(":") !== -1) {
                statusText = response.data.statusText.replace(":", "");
              }
            }
            if (statusText) {
              console.log(statusText, "44444");
              MessageBox.confirm(statusText, "提示", {
                showCancelButton: false,
                type: "warning"
              });
            } else {
              MessageBox.confirm(response.data.statusText, "提示", {
                showCancelButton: false,
                type: "warning"
              });
            }
            return Promise.reject(response.data);
          }
          return response;
        }
      },
      //响应错误拦截
      error => {
        let code = 0;
        try {
          code = error.response.status;
        } catch (e) {
          if (error.toString().indexOf("Error: timeout") !== -1) {
            MessageBox.confirm("网络请求超时", "提示", {
              showCancelButton: false,
              type: "warning"
            });
            return Promise.reject(error);
          }
          if (error.toString().indexOf("Error: Network Error") !== -1) {
            MessageBox.confirm("网络请求错误", "提示", {
              showCancelButton: false,
              type: "warning"
            });
            return Promise.reject(error);
          }
        }
        if (code === 401) {
          MessageBox.confirm("登录状态已过期,请重新登录", "系统提示", {
            confirmButtonText: "重新登录",
            showCancelButton: false,
            showClose: false,
            type: "warning"
          }).then(() => {
            // store.dispatch("LogOut").then(() => {
            //   location.reload(); // 为了重新实例化vue-router对象 避免bug
            // });
          });
        } else if (code === 403) {
          router.push({ path: "/401" });
        } else {
          const errorMsg = error.response.data.message;
          if (errorMsg !== undefined) {
            MessageBox.confirm(errorMsg, "提示", {
              confirmButtonText: "确定",
              showCancelButton: false,
              showClose: false,
              type: "warning"
            });
          }
        }
        return Promise.reject(error);
      }
    );
    export default axios;
    
    

    5.main.js中引入,挂载到vue原型上

    // 引入具有拦截请求的axios
    import xhrAxios from "./utils/xhrAxios";
    Vue.prototype.$http = xhrAxios;
    

    打包带走之前记得点赞啊!!!

    展开全文
  • 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)
    })
    
    展开全文
  • 原理 axios有一个请求拦截器机制,所有的axios请求在发出来之前都会经过请求拦截器, 在请求或响应被 then 或 catch 处理前拦截它们检查...// 添加请求拦截器 instance.interceptors.request.use(function (config) {

    原理

    axios有一个请求拦截器机制,所有的axios请求在发出来之前都会经过请求拦截器, 在请求或响应被 then 或 catch 处理前拦截它们检查vuex中是否有token信息,有就直接加在headers中。


    代码实现

    // 在普通的.js模块中去使用store需要import导入
    import store from '../store/index.js'
    
    // 添加请求拦截器
    instance.interceptors.request.use(function (config) {      
      const token = store.state.tokenInfo.token 
      // 如果有token就带上将token添加到config.headers.Authorization中
      if (token) {            
        config.headers.Authorization = `Bearer ${token}`
      }
      return config
    }, function (error) {
      return Promise.reject(error)
    })

     

    展开全文
  • vue中封装axios,添加请求拦截器,响应拦截器 首先在vue项目中src文件夹下新建request文件夹,关于接口封装文件都放在request文件夹中。 然后在request文件夹中创建index.js,url.js,api.js三个js文件。 url.js文件...
  • vue 中想给所有的请求的headers中都添加一个token, 需要设置拦截器添加, 在main.js中添加一下代码即可。 Vue.http.interceptors.push((request, next) => { if(!(request.url.indexOf('152.10.12.*') != -...
  • 1.安装vue cli,基于webpack模版 基于webpack模版初始化一个名称为admin的项目vue init webpack admin-vue 1 npm install -g vue-cli 2 vue init webpack my-project 3 cd my-project 4 npm install 5 npm...
  • Vue添加请求后端数据接口拦截器

    千次阅读 2020-04-08 14:00:49
    我们在请求后端接口的时候会遇到授权问题,就是后端接口需要一个认证,这个认证会在每个接口里返回,同时请求是也要携带,这个时候vue 里的拦截器就很好的做了这一点,统一处理错误及配置请求信息; 处理方案: 1、...
  • 这里只说原理,前端的请求,最终离不开Ajax,像VueVue-Resource、Axios,都只是对Ajax进行了统一的封装,它暴露出来的拦截器,其实就是写了一个方法,把Ajax写在这个方法里面(我们先说请求拦截器
  • 使用axios// 添加请求拦截器 每个请求体里加上token axios.interceptors.request.use( function (config) { // 在发送请求之前做些什么 return config; }, function (error) { // 对请求错误做些什么 return ...
  • 简介 前后端分离的项目中,前端需要通过发送请求获取数据,为了安全,需要保证前端发送...axios中有 interceptors 属性,其中有 request 成员,就是一个请求拦截器 再通过 use 挂载一个回调函数,只要有请求通过 axi
  • 已将 请求拦截器 封装,然后引入到 main.js 里面。看似没有问题,但是请求拦截器无法进去。 之后检查了一下,我在请求拦截器中二次使用 axios ,并没有执行。因为在上面我又给 axios重新定义了一个对象,所以下面的...
  • 上一篇文章中写到如何配置 axios 请求拦截,但是遗留下一个令人非常困扰的问题。各种配置都没什么问题,可是请求一直过不去。例:get 请求报错如下 -> 王德发~~~~,这是什么鬼,不要慌张,让我们仔细看报错信息...
  • 请求拦截器 请求拦截器的实际应用场景 在进行鉴权的时候;我们每个接口都需要携带token; 难道每次我们都需要手动拼接token; 这个时候拦截器就很有用了; 这时候就可以用拦截器来使token自动增加 import axios from '...
  • 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...
  • 在使用一些前后端会话时,需要在请求头中携带一些特殊请求头,这样,就需要设置请求拦截器和响应拦截器 我在开发项目时,由于后端使用了token令牌,登录后在前端保存,然后每次请求都要携带token,将这些配置写在...
  • err => { // 处理token过期问题 if (err.response && err.response.status === 401) { // token失效了,跳转到登录页 return router.push('/login') } return Promise.reject(err) }) // 请求拦截器 instance....
  • Vue http request 请求拦截器

    千次阅读 2021-01-14 11:00:29
    // 添加http request 请求拦截器,有token值则配置上token值 axios.interceptors.request.use( config => { // 在发送请求之前做些什么 const token = Cookies.get("token") ? Cookies.get("token") : ""; ...
  • 这里写自定义目录标题欢迎使用Markdown编辑新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、...
  • vue -- 请求拦截器

    2019-10-02 15:31:51
    所谓的拦截器,其实可以理解为请求拦截,意义就是在发送请求或者响应请求之前做一些我们需要判断的事情,比如发送登录请求时判断token是否过期,是否需要携带token值,都可以在请求之前配置 import axios from '...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,351
精华内容 4,540
关键字:

vue添加请求拦截器

vue 订阅