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

DTcode7

已于 2024-04-11 17:43:51 修改

阅读量2.1k

点赞数

分类专栏：前端开发技巧与习惯微信小程序相关文章标签：小程序封装组件自定义封装请求封装

于 2021-10-11 10:04:57 首次发布

本文链接：https://blog.csdn.net/black_cat7/article/details/120697607

版权

微信小程序相关同时被 2 个专栏收录

171 篇文章

订阅专栏

前端开发技巧与习惯

34 篇文章

订阅专栏

前言

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

创建封装函数

您可以在小程序的某个文件中创建一个名为request的函数，该函数接受一个url和一个data对象作为参数，并返回一个Promise。
发起网络请求

使用wx.request方法发起网络请求，并在成功和失败时分别调用resolve和reject方法。
处理响应数据

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

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

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

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博客https://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)https://www.yuque.com/colorui/colorui/me28gb

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

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

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