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);
            }
        });
    }
    
    
  • 相关阅读:
    洛谷-P5743 【深基7.习8】猴子吃桃
    洛谷-P5741 【深基7.例10】旗鼓相当的对手
    洛谷-P5740 【深基7.例9】最厉害的学生
    洛谷-P5739 【深基7.例7】计算阶乘
    jvm中常见的指令笔记
    join()方法的源码分析
    Java中线程状态的各种转换关系
    java构造器遇到父类没有无参构造的分析
    jvm栈和堆
    spring新注解
  • 原文地址:https://www.cnblogs.com/Grani/p/11848109.html
Copyright © 2011-2022 走看看