zoukankan      html  css  js  c++  java
  • 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);
            }
        });
    }
    
    
  • 相关阅读:
    java 中的锁 -- 偏向锁、轻量级锁、自旋锁、重量级锁(转)
    MySQL存储引擎--MyISAM与InnoDB区别
    Socket详解
    Java线程池参数
    Java反射机制(转)
    java注解
    docker入门实例
    docker常用命令总结
    showdoc 自动脚本安装
    [mysql]You must reset your password using ALTER USER statement before executing this statement.
  • 原文地址:https://www.cnblogs.com/Grani/p/11848109.html
Copyright © 2011-2022 走看看