美文网首页
axios 封装 拦截请求,上传数组,上传formdata

axios 封装 拦截请求,上传数组,上传formdata

作者: 多点干货少点废话 | 来源:发表于2020-09-21 15:03 被阅读0次
    
    "use strict";
    
    import axios from "axios";
    import qs from "qs";
    
    axios.interceptors.request.use((config) => {
            // 接口包含login就换请求头 随便改就好 不固定 
        if(config.url.includes('/login/')){
            // console.log('config',config.baseURL)
            config.baseURL = '/login/'
        }else{
            config.baseURL = '/api/'
        }
      return config;
    
    }, function (error) {
      // Do something with request error
      return Promise.reject(error);
    });
    
    // 拦截响应
    axios.interceptors.response.use(res => {
         const code = res.data.code
        return res;
    }, function(error) {
        return Promise.reject(error);
    });
    
    var CancelToken = axios.CancelToken;
    var source = CancelToken.source();
    
    // 组件销毁时  结束get 请求    
    // CancelToken get方式在第二个参数,post在第三个参数
    var clearGet = function(url) {
        return new Promise((resolve) => {
            axios.get(url, {
                cancelToken: source.token
            }).then(res => {
                resolve(res.data);
            }).catch(err => {
                if (axios.isCancel(err)) {
                    // window.console.log('Request canceled', err.message);
                } else {
                    // 处理错误
                }
            })
        })
    }
    
    // get 请求
    var get = function get(url, params) {
        return new Promise((resolve, reject) => {
            axios.get(url, {
                params: params
            }).then(res => {
                resolve(res.data);
            }).catch(err => {
                reject(err.data)
            })
        })
    }
    
    // post 请求
    var post = function post(url, params,headers) {
        return new Promise((resolve, reject) => {
            axios.post(url, qs.stringify(params),headers)
                .then(res => {
                    resolve(res.data);
                })
                .catch(err => {
                    reject(err.data)
                })
        });
    }
    
    // post 上传数组
    var arrPost = function arrPost(url, data, param, config) {
        config.params = param;
        return new Promise((resolve, reject) => {
            axios.post(url, data, config)
                .then(response => {
                    resolve(response.data)
                })
                .catch(err => {
                    reject(err)
                })
        })
    }
    
    // post上传formdata数据
    var formDataPost = function formDataPost(url, params,headers) {
        return new Promise((resolve, reject) => {
            axios.post(url,params,headers)
                .then(res => {
                    resolve(res.data);
                })
                .catch(err => {
                    reject(err.data)
                })
        });
    }
    
    // 删除
    var del = function deletes(url) {
        return new Promise((resolve, reject) => {
            axios.delete(url)
                .then(res => {
                    resolve(res.data);
                })
                .catch(err => {
                    reject(err.data)
                })
        });
    }
    
    export default {
        get,
        post,
        del,
        arrPost,
        clearGet,
        source,
        CancelToken,
        formDataPost
    }
    
    

    相关文章

      网友评论

          本文标题:axios 封装 拦截请求,上传数组,上传formdata

          本文链接:https://www.haomeiwen.com/subject/wopvyktx.html