zoukankan      html  css  js  c++  java
  • vue项目中封装axios

    // 配置API接口地址
    import { message } from "ant-design-vue";
    var root = 'http://xxx.xxx.xxx.xxx:8080/v1/'
    // var root = 'http://xxx.xxx.xxx.xxx:8080/v1/'
    // 引用axios
    var axios = require('axios')
    if(window.localStorage.getItem('token')){
        axios.defaults.headers.common['Authorization'] = 'Bearer '+window.localStorage.getItem('token');
    }
    // 自定义判断元素类型JS
    function toType (obj) {
        return ({}).toString.call(obj).match(/s([a-zA-Z]+)/)[1].toLowerCase()
    }
    // 参数过滤函数
    function filterNull (o) {
        for (var key in o) {
            if (o[key] === null) {
                delete o[key]
            }
            if (toType(o[key]) === 'string') {
                o[key] = o[key].trim()
            } else if (toType(o[key]) === 'object') {
                o[key] = filterNull(o[key])
            } else if (toType(o[key]) === 'array') {
                o[key] = filterNull(o[key])
            }
        }
        return o
    }
     
    /*
      接口处理函数
      这个函数每个项目都是不一样的,我现在调整的是适用于
      https://cnodejs.org/api/v1 的接口,如果是其他接口
      需要根据接口的参数进行调整。
      主要是,不同的接口的成功标识和失败提示是不一致的。
      另外,不同的项目的处理方法也是不一致的,这里出错就是简单的alert
    */
    function apiAxios (method, url, params, success, failure) {
        if (params) {
            params = filterNull(params)
        }
        axios({
            method: method,
            url: url,
            data: method === 'POST' || method === 'PUT' ? params : null,
            params: method === 'GET' || method === 'DELETE' ? params : null,
            baseURL: root,
            withCredentials: false
        })
        .then(function (res) {
        if (res.data.message === "成功") {
            if (success) {
                success(res.data)
            }
        } else {
            message.error(res.data.message)
            // setTimeout(() => {
            //     window.location.href = 'http://' + window.location.host + '/login'
            //     window.localStorage.clear();  
            // }, 1500);
            
            // if (failure) {
            //     // failure(res.data)
                
            //     // console.log(res.data)
            // } else {
            //     window.alert('error: ' + JSON.stringify(res.data))
            // }
        }
        })
        .catch(function (err) {
            // console.log(err.response)
            if(err){
                if(err.response){
                    if(err.response.status){
                        message.error('服务器溜走了')
                    }
                } else if(err.message === 'Network Error'){
                    message.error('登录失效请重新登录')
                    setTimeout(() => {
                        window.location.href = 'http://' + window.location.host + '/login'
                        window.localStorage.clear();  
                    }, 1500);
                }
            }
            
        })
    }
     
    // 返回在vue模板中的调用接口
    export default {
        get: function (url, params, success, failure) {
            return apiAxios('GET', url, params, success, failure)
        },
        post: function (url, params, success, failure) {
            return apiAxios('POST', url, params, success, failure)
        },
        put: function (url, params, success, failure) {
            return apiAxios('PUT', url, params, success, failure)
        },
        delete: function (url, params, success, failure) {
            return apiAxios('DELETE', url, params, success, failure)
        },
        axios:axios
    }
  • 相关阅读:
    SSH框架——(二)四层结构:DAO,Service,Controller,View层
    Spring知识概括梳理
    设计模式——(一)工厂模式2
    设计模式——(一)工厂模式1
    Spring——(一)IoC
    Toad 实现 SQL 优化
    string 和String的区别
    StructureMap依赖注入
    Oracle/PLSQL: BitAnd Function
    log.debug(e.getMessage());
  • 原文地址:https://www.cnblogs.com/art-poet/p/12845746.html
Copyright © 2011-2022 走看看