• axios 封装


    import axios reqiure 'axios'
    

    引入后即可使用 axios 变量进行请求
    但此时添加的拦截器会对所有请求生效

    目前项目情况是有的接口是请求总服务器,有的是请求本地服务器,一个是 payload 提交,一个是 form data,请求头携带的信息也不一样,所以可以创建两个 axios 对象用于两种请求

    然后 create 的配置对象属性可查看官方文档,目前就加了个超时时间

    import store from '../store/index'
    import axios from 'axios'
    import { Message } from 'element-ui'
    
    /**
     * 用于请求云端
     * */ 
    const serviceCloud = axios.create({
        timeout: 5000,
        headers: {
            'Content-type':'multipart/form-data'
        }
    });
    
    // 请求拦截
    serviceCloud.interceptors.request.use(config => {
        let token = store.state.tokenCloud;
    
        if (token) {
            config.data.token = token;
        }
    
        return config
    }, error => {
        return Promise.reject(error)
    });
    
    // 响应
    serviceCloud.interceptors.response.use(function (res) {
        return res;
    }, function (error) {
    
        // Do something with response error
        return Promise.reject(error)
    });
    
    /**
     * 用于请求本地服务器
     * */
    const serviceLocal = axios.create({
        timeout:5000,
    });
    
    serviceLocal.interceptors.request.use(config => {
        let token = store.state.token;
        let id = store.state.userInfo.user_id;
    
        if (token) {  // 判断是否存在token,如果存在的话,则每个http header都加上token
            config.headers['Access-Token'] = token;
            config.headers['User-Id'] = id;
        }
        return config
    }, error => {
        return Promise.reject(error)
    });
    
    // 响应
    serviceLocal.interceptors.response.use(function (res) {
    
        // 用户信息是否超时,重定向到登录页面
        if (res.data.status === 51){
    
            Message(res.data.msg);
    
            setTimeout(function () {
                // sessionStorage.clear();
                // window.location.reload();
            },1600);
    
        }else{
            return res;
        }
    
    }, function (error) {
        // Do something with response error
        return Promise.reject(error)
    });
    
    
    export function cloudPost(url, data, fn) {
        serviceCloud.post(url, data).then(function (res) {
    
            if (typeof fn !== 'undefined' && fn instanceof Function) {
                fn(res.data);
            }
        });
    }
    export function localPost(url,data,fn) {
        serviceLocal.post(url,data).then(function (res) {
    
            if (typeof fn !== 'undefined' && fn instanceof Function) {
                fn(res.data);
            }
        });
    }
    
    
  • 相关阅读:
    关于MySQL与SQLLite的Group By排序原理的差别
    利用Java针对MySql封装的jdbc框架类 JdbcUtils 完整实现(包括增删改查、JavaBean反射原理,附源代码)
    深入java并发Lock一
    windows 7 SDK和DDK下载地址
    用cocos2d-x 3.2 实现的FlappyBird
    Java替代C语言的可能性
    Spring Quartz结合Spring mail定期发送邮件
    web小流量实验方案
    paip.微信菜单直接跳转url和获取openid流程总结
    【java web】java运行预编译Groovy脚本
  • 原文地址:https://www.cnblogs.com/Grani/p/11848109.html
Copyright © 2020-2023  润新知