zoukankan      html  css  js  c++  java
  • Vue添加请求拦截器

    一、现象

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

    二、解决

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

    5、当页面静止放置太久时,请求出现超时,点击页面不进行刷新数据时,可以响应拦截器处添加404的错误处理,如响应拦截器修改为:

    // 添加响应拦截器
    axios.interceptors.response.use(function (response) {
      // 对响应数据做点什么
      return response
    }, function (error) {
      // 对响应错误做点什么
      // 兼容处理超时时返回的404

      if (responseError && responseError.response && responseError.response.status === 404) {

        // 比如跳转到登录页

        router.push({ name: 'login' })

       }
    });

    三、总结

    统一处理方便

  • 相关阅读:
    vs2017 项目调试浏览器网页闪退Bug
    “WebPageBase”在未引用的程序集中定义。必须添加对程序集“System.Web.WebPages, Version=1.0.0.0,Culture=neutral....."的引用
    SQL Server判断日期是否为周六 周日
    获取各国的日期时间
    .net Api项目初步搭建并移除XML格式
    鼠标滚轮事件
    js中if表达式判断规则
    原生轮播图
    C# uri
    SqlServer 备份还原教程
  • 原文地址:https://www.cnblogs.com/waitingbar/p/7885028.html
Copyright © 2011-2022 走看看