zoukankan      html  css  js  c++  java
  • vue axios 请求简单实用的封装!

    首先加载axios 

    npm install axios -S
    

    在src目录下创建network文件件,然后创建request.js文件

    文件内容

    // 配置API接口地址
    var root = 'http://*****'//接口地址
    // 引用axios
    var axios = require('axios')
    // 自定义判断元素类型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
    }
    
    
    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.success === true) {
                    if (success) {
                        success(res.data)
                    }
                } else {
                    if (failure) {
                        failure(res.data)
                    } else {
                        //在这里写登录失败判断
                        success(res.data)
                    }
                }
            })
            .catch(function (err) {
                let res = err.response
                if (err) {
                    return res.status;
                }
            })
    }
    
    // 返回在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)
        }
    }
    

      在main.js文件里挂载

    import requests from './network/request.js'   // 记得改为你的路径
    Vue.prototype.Apis = requests  // 请求接口命名
    

      封装完毕了,下面就是直接使用

    this.Apis.post('api/Api/ListComm',{type:'all'}, r => {
                        console.log(r)
                    })
    

      简单明了,有什么问题在下面留言!

  • 相关阅读:
    C#编写ActiveX在WEB中应用
    Asp.net中Array的用法
    CAB打包方法
    C#获取文件路径的几种方法
    使用MakeCAB.exe命令创建CAB文件
    VS2005 工具里添加“OLE/COM 对象查看器”命令
    【转载】ASP.NET MVC中Controller与View之间的数据传递总结
    F如何配置外向交货单的定价过程
    解决 局域网XP无权限访问的问题 (转)
    U盘装XP系统(含截图,2012最新原创超简单方法)
  • 原文地址:https://www.cnblogs.com/ffyun/p/14314527.html
Copyright © 2011-2022 走看看