微信小程序-封装请求API——原生方式

前言

在微信小程序中封装请求API是一个常见的做法,这有助于减少代码冗余并提高代码的可维护性。以下是一个简单的封装示例:

  1. 创建封装函数

    您可以在小程序的某个文件中创建一个名为request的函数,该函数接受一个url和一个data对象作为参数,并返回一个Promise

  2. 发起网络请求

    使用wx.request方法发起网络请求,并在成功和失败时分别调用resolvereject方法。

  3. 处理响应数据

    根据需要对响应数据进行处理,例如,您可以将JSON格式的数据转换为JavaScript对象。

  4. 错误处理

    您还应该在请求失败时进行适当的错误处理,例如,显示一个错误消息或执行其他错误恢复操作。

以下是一个基本的请求封装示例:

function request(url, data = {}, method = 'GET') {
  return new Promise((resolve, reject) => {
    wx.request({
      url: url,
      data: data,
      method: method,
      header: {
        'content-type': 'application/json' // 默认值
      },
      success(res) {
        resolve(res.data);
      },
      fail(err) {
        reject(err);
      }
    });
  });
}

在这个例子中,request函数接受三个参数:url(请求的URL),data(发送的数据,默认为空对象),和method(请求方法,默认为'GET')。函数内部使用wx.request发起请求,并在请求成功时解析响应数据,在请求失败时抛出错误。

要使用这个封装的请求函数,您可以像下面这样调用它:

request('https://api.example.com/data', { key: 'value' })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

这只是一个基本示例,您可能需要根据您的具体需求对其进行修改和扩展。例如,您可能希望添加对不同HTTP方法的支持,或者添加自定义的错误处理逻辑。

比如你还可以像下面这样继续扩展封装:

 参照原生的微信小程序的请求格式,封装增加一些简单的功能,如果需要按照promise的方式来封装,请参考:

微信小程序-封装请求API——promise方式_五速无头怪的博客-CSDN博客icon-default.png?t=N7T8https://blog.csdn.net/black_cat7/article/details/120451986

export const cjRequest = (parmas) => {
    let url = parmas.url, //请求url
        data = parmas.data || undefined, //请求参数
        success = parmas.success || function () { }, //成功后的回调函数
        fail = parmas.fail || function () { }, //成功后的回调函数
        complete = parmas.complete || function () { }, //完成后的回调函数
        method = parmas.method || 'GET', //请求方式
        header = parmas.header || 'application/json', //请求头
        getUserInfo = parmas.getUserInfo || 0 //是否获取用户数据 1表示没授权过,需要去授权

    //判断是否要求获取用户数据并且判断是否已经存储过用户信息
    //如果getUserInfo=1并且没有存储过用户信息 则跳转到授权页面
    if (getUserInfo && !wx.getStorageInfoSync('userInfo')) {
        console.log('未授权,跳转授权页面');
        wx.navigateTo({
            url: '/pages/user/getUserInfo'//跳转到授权页面
        })

    }
    //请求数据
    wx.request({
        url,
        method,
        data,
        header,
        success,
        fail,
        complete
    })


    /**
     *! 要用的页面中的 调用方法
        //引入封装的请求api
        import request from "../../utils/request.js"//引入request

        onLoad: function() {
            //使用封装的api,传入参数
            cjRequest({
                method:'get',
                url: 'https://www.baidu.com',
                data:{},
                header:{},
                getUserInfo: 1, //需要授权
                success(res) {
                    console.log(res);
                    ....
                },
                fail(err) {
                    console.log(err);
                    ....
                },
                complete(res) {
                    console.log(res);
                    ....
                }
            })
        }
     * 
     */
}

参考格式:colorUI的社区讨论

小程序如何实现AOP · 语雀 (yuque.com)icon-default.png?t=N7T8https://www.yuque.com/colorui/colorui/me28gb


 博主 [DTcode7] 带您 溺亖在知识的海洋里,嘿嘿嘿.~
🐒 个人主页—— DTcode7 的博客🐒

《微信小程序相关博客》
《Vue相关博客》
《前端开发习惯与小技巧相关博客》
《AIGC相关博客》

《photoshop相关博客》
😚 吾辈才疏学浅,摹写之作,恐有瑕疵。望诸君海涵赐教。望轻喷,嘤嘤嘤 🙈
🕍 愿斯文对汝有所裨益,纵其简陋未及渊博,亦足以略尽绵薄之力。倘若尚存阙漏,敬请不吝斧正,俾便精进!

 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

DTcode7

你的鼓励是我坚持的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值