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)
                    })
    

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

  • 相关阅读:
    多播委托与事件
    Linq 查询的演变过程
    Lamda表达式的前世今生
    微服务架构学习
    委托IL解析-----封装逻辑和代码复用
    ORM框架学习(四)
    ORM框架学习(三)
    Visual Studio 2010 旗舰版安装图解
    Microsoft SQL Server 2008 R2 中文安装说明
    3.0 面向对象 委托和事件 异常和错误
  • 原文地址:https://www.cnblogs.com/ffyun/p/14314527.html
Copyright © 2011-2022 走看看