vue.js封装使用request.js

作者:神秘网友发布时间:2021-01-28 17:20:02

vue.js封装使用request.js

代码

import axios from 'axios';
import { MessageBox, Message } from 'element-ui';
import store from '@/store';
import router from '@/router';
import { setToken, getToken, removeToken } from "@/utils/cookies";

// create an axios instance
const service = axios.create({
    baseURL: store.state.baseDomain, // http://localhost:21021/
    // withCredentials: true, // send cookies when cross-domain requests
    //timeout: 5000 // request timeout
    //`xsrfCookieName`是要用作 xsrf 令牌的值的cookie的名称
    xsrfCookieName: 'XSRF-TOKEN', // default
    // `xsrfHeaderName`是携带xsrf令牌值的http头的名称
    xsrfHeaderName: 'X-XSRF-TOKEN', // default
})

// request interceptor
service.interceptors.request.use(
    config => {
        // do something before request is sent
        let token = getToken();
        if (token != undefined && token != '') {
            // let each request carry token
            // ['X-Token'] is a custom headers key
            // please modify it according to the actual situation
            config.headers['Authorization'] = 'Bearer ' + token;
        }
        return config
    },
    error => {
        // do something with request error
        // console.log(error) // for debug
        return Promise.reject(error)
    }
)

// response interceptor
service.interceptors.response.use(
    /**
       * If you want to get http information such as headers or status
       * Please return  response => response
      */

    /**
       * Determine the request status by custom code
       * Here is just an example
       * You can also judge the status by HTTP Status Code
       */
    response => {
        const res = response.data

        if (res.__abp) {
            return handleResponse(response)
        }

        // if the custom code is not 20000, it is judged as an error.
        if (response.status !== 200) {

            Message({
                message: res.message || 'Error',
                type: 'error',
                duration: 5 * 1000
            })

            // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
            if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
                // to re-login
                MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
                    confirmButtonText: 'Re-Login',
                    cancelButtonText: 'Cancel',
                    type: 'warning'
                }).then(() => {
                    store.dispatch('resetToken').then(() => {
                        location.reload()
                    })
                })
            }
            return Promise.reject(new Error(res.message || 'Error'))
        } else {
            return res
        }
    },
    error => {
        // console.log('response error =>', error.response) // for debug
        if (error.response.data.__abp) {
            return handleResponse(error.response)
        }
        Message({
            message: error.message,
            type: 'error',
            duration: 5 * 1000
        })
        return Promise.reject(error)
    }
)

/**
 * 请求结果重新组织
 * 参考 Abp 的 js 是 abp.ng.js
 * @param {*} response
 */
function handleResponse(response) {
    var originalData = response.data
    if (originalData.success === true) {
        response.data = originalData.result
        return response
    } else if (originalData.success === false) {
        // var messagePromise = null

        if (response.status == 401 && response.config.abpHandleError !== false) {
            // abp.ng.http.handleUnAuthorizedRequest(messagePromise, originalData.targetUrl);
            // 会话过期，跳转到登录页
            store.dispatch('resetToken').then(_ => {
                router.push(`/loginredirect=${location.hash.replace('#', '')}${location.search}`).catch(() => { })
            })
            originalData.error.message = '为了您的帐号安全，请重新登录';
        }

        if (originalData.error) {
            if (response.config.abpHandleError !== false) {
                Message.error(originalData.error.message || '请求出错了！！！')
            }
        } else {
            originalData.error = defaultError
        }

        response.data = originalData.error
        return Promise.reject(response)

    } else {
        // not wrapped result
        return Promise.reject(response)
    }
}

window.request = service;
export default service

示例：

import request from '@/utils/request'

export function login(data) {
    return request({
        url: `/api/TokenAuth/Authenticate`,
        method: 'post',
        data
    })
}

vue.js封装使用request.js 相关文章

【学无止境】使用Celery执行有依赖关系的任务
需求有 A-F 6个任务，它们的执行关系如下： Task A , Task B Task C , Task D Task E , Task F 同一级内的任务可以并行，上一级任务做完了，才能进行下一级任务。实现这样一个具有依赖关系的系列任务有很多种方法。这里采用的是Celery。优点是：不用自己
Linux命令行中使用计算器的5个命令
在使用 Linux 时，我们有时会需要做一些计算，那么我们就可能需要用到计算器。在 Linux 命令行里，有许多计算器工具，这些命令行计算器可以让我们执行科学计算、财务计算或者一些简单的计算。当然，我们也可以在 Shell 脚本中使用这些命令执行更为复杂的数学
JDK 1.8新特性
解决目的理解代码及使用 /** * 根据字典类型查询字典数据 * * @param sysDictData 字典数据参数 * @return 字典数据集合信息 */ @Override public ListSysDictDataEntity selectDictDataList(SysDictDataEntity sysDictData) { ListSysDictDataEntity dictD
使用Keepalived实现MySQL主从高可用
方案： MySQL的高可用方案有很多，比如Cluster、MMM、MHA、DRBD，以及Oracle官方推出的Fabric等，这些方案各有优劣，但都比较复杂，安装配置有一定难度，对线上库实施动静太大。就我们的具体情况而言，并不需要这么复杂的环境，实施简单、对现有架构影响最
java8使用 Comparator.comparing 进行排序
List类 list; 代表某集合 //返回对象集合以类属性一升序排序list.stream().sorted(Comparator.comparing(类::属性一)); //返回对象集合以类属性一降序排序注意两种写法list.stream().sorted(Comparator.comparing(类::属性一).reversed());//先以属性一升
计算机网络安全 —— C# 使用谷歌身份验证器（Google Authenticator）（五）
一、Google Authenticator 基本概念 Google Authenticator是谷歌推出的一款动态口令工具，旨在解决大家Google账户遭到恶意攻击的问题，在手机端生成动态口令后，在Google相关的服务登陆中除了用正常用户名和密码外，需要输入一次动态口令才能验证成功，此举
Window10系统下的GPU环境安装及java使用tensorflow-gpu进行模型加载和加速
1、查看电脑的GPU、CUDA版本，确定安装CUDA、cuDNN，tensorflow-gpu版本。打开cmd，输入cd C:\Program Files\NVIDIA Corporation\NVSMI命令，回车，再输入nvidia-smi命令，回车。如果没有CUDA Version值，主要查看NVIDA-SIM值和Driver Version值，图中对应
make的使用
关于make与makefile make工具通过makefile文件描述的规则对工程中的源文件进行自动编译。 makefile规则 target: prerequisite command 其中，target为目标文件（.o）或可执行文件（也可为伪目标）；prerequisite为target的先决条件；command为命令（command
【Java 8 新特性】Java 8 Stream使用sorted()方法自定义排序的示例
在本页中，我们将提供 java 8 Stream sorted() 排序的示例。我们可以按照自然顺序和比较器提供的顺序对流进行排序。在 Java8 中，可以使用 lambda 表达式实例化比较器( Comparator )。我们还可以颠倒自然顺序和比较器( Comparator )提供的顺序。自然排序
ASP.NET Core WebApi使用Swagger生成api说明文档
什么是Swagger为啥要用Swagger Swagger可以从不同的代码中，根据注释生成API信息，Swagger拥有强大的社区，并且对于各种语言都支持良好，有很多的工具可以通过swagger生成的文件生成API文档简单易懂、方便快捷。书写api说明文档对于程序员来说是件痛苦的事