vue 网络请求数据封装

最新推荐文章于 2025-05-21 17:35:09 发布

原创最新推荐文章于 2025-05-21 17:35:09 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #网络请求 #封装

笔记专栏收录该内容

65 篇文章

订阅专栏

本文详细介绍了如何在Vue.js应用中进行网络请求的数据封装，包括设置axios基础配置、创建axios实例、拦截器的使用以及如何在组件中调用封装后的API，提升代码复用性和可维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script type="text/javascript">
    // 配置API接口地址
    const baseUrl = '';

    // 引入 弹窗组件
    var modal = weex.requireModule('modal');
    // 引入 请求数据组件
    var stream = weex.requireModule('stream');

    // 自定义判断元素类型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 toParams(obj) {
        var param = ""
        for(const name in obj) {
            if(typeof obj[name] != 'function') {
                param += "&" + name + "=" + encodeURI(obj[name])
            }
        }
        return param.substring(1)
    };

    //============
    // 接口处理函数
    //============
    function apiStream (method, url, params, success, failure) {
        // 过滤参数
        if (params) {
            params = filterNull(params)
        }

        /*** stream ***/
        if(method === 'GET'){
            console.log("进入了get方法")
            // GET 方法
            stream.fetch({
                method: 'GET',
                type: 'text',
                url: baseUrl + url + toParams(params)
            }, function(res) {
                if (res.ok) {
                    // 解密
                    let currentData = jwtdecode.decode(res.data, 'michahzdee2016', 'HS256');
                    success(currentData);
                }else {
                    modal.toast({
                        message: '请求失败,请检查网络!',
                        duration: 2
                    })
                }
            })
        }else if(method === 'POST'){
            // POST 方法
            stream.fetch({
                method: 'POST',
                type: 'text',
                url: baseUrl + url,
                headers: {'Content-Type':'application/x-www-form-urlencoded'},
                body: toParams(params)
            }, function(res) {
                if (res.ok) {
                    // 解密
                    let currentData = jwtdecode.decode(res.data, 'michahzdee2016', 'HS256');
                    success(currentData);
                }else {
                    modal.toast({
                        message: '请求失败,请检查网络!',
                        duration: 2
                    })
                }
            },function(progress) {
                //
            })
        }
    };

    //========================
    // 返回在vue模板中的调用接口
    //========================
    export default {
        // get方法
        get: function (url, params, success, failure) {
            return apiStream('GET', url, params, success, failure)
        },
        // post方法
        post: function (url, params, success, failure) {
            return apiStream('POST', url, params, success, failure)
        },
        // 用于查看域名 || 服务器地址
        globalHttpUrl:baseUrl
    }

</script>

使用

import global from './common.vue'


global.get('/api/user/channel/downloadInfo/get', params, function(data) {

      })
      this.COMMON.commonFun()