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

已于 2024-03-27 16:17:04 修改
阅读量8.8k 收藏 66
点赞数 19
分类专栏： 前端开发技巧与习惯 微信小程序相关 文章标签： 小程序 微信
于 2021-09-24 12:00:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/black_cat7/article/details/120451986
版权

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

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

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

目录

第一步：在app.js同级目录下，创建一个文件夹

第二步：封装wx.request方法成promise对象

第三步：页面中引用封装的请求API

1.设置基础请求路径

 2.解构传入的参数

3.根据不同的url接口添加不同的header

4.添加请求发起时页面loading效果

完整的封装的API 的 js文件 

微信小程序原生的请求API就是wx.request

wx.request({
  url: 'example.php', //仅为示例，并非真实的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})

有时候不能很好的适配我们的开发需求，比如我们要加一些基础url路径、请求前后的loading效果、不同接口名称下的header。而且，在success回调方法里写请求成功后的操作，看起来代码不太清晰。接下来讲一下封装的逻辑，完整代码放在最后。

第一步：在app.js同级目录下，创建一个文件夹

在utils文件夹里新建一个service.js文件，用来放封装的wx.request方法

 第二步：封装wx.request方法成promise对象

使用promise对象能很好的解决回调地狱，在.then(res=>{}).catch(err=>{})中能很清晰地看出代码的逻辑

export const 返回出去的方法名 = (parmas) => {
    // 返回一个promise对象
    return new Promise((resolve, reject) => {
        wx.request({
            url: parmas.url, //仅为示例，并非真实的接口地址
            data:parmas.data,
            header: {
                'content-type': 'application/json' // 默认值
            },
            success: (res)=> {
                 // 请求成功，就将成功的数据返回出去
                resolve(result)
            },
            fail: (err) => {
                reject(err)
            },
        })
    })
}

注意：success: (result) => {} 使用箭头函数，防止出现this指向错误

这样，就算是封装了一个最简单、最基础（简陋）的请求API了，在需要使用这个方法的页面的js文件中，引入它

第三步：页面中引用封装的请求API

/**
 * 小程序中要引用方法，哪个页面要用，就在哪个页面引入
 */
import { cjRequest } from "../../utils/service";
Page({
  /**
   * 页面的初始数据
   */
  data: { 
  ..........
  ..........

 getGoodsList () {
    //因为返回的是promise对象，所以通过.then来获取resolve出来的请求成功的返回数据
    cjRequest({ url: "https://xxxtest/goods/search", data: this.QueryParams })
      .then((res) => {
        console.log(res);
    })
  }

现在，来详细扩展一下封装的请求API

1.设置基础请求路径

// 基础url
    const baseUrl = "https://xxxtest"

这样，就可以简化调用这个方法时url的参数内容了，也方便统一修改开发环境地址、生产环境地址

// url: "/goods/search" ==》  url中不用再写前面的一长串了
cjRequest({ url: "/goods/search", data: this.QueryParams }).then((res) => {
        console.log(res);
 })

 2.解构传入的参数

 我们可以通过ES6中的扩展运算符，将传入到封装方法里的参数直接全部解构出来，不用再一个个获取赋值给对应的键值对了   ...parmas  直接解构出传入的参数

export const 返回出去的方法名 = (parmas) => {
    //设置基础请求头
    const baseUrl = "https://xxxtest"
    // 返回一个promise对象
    return new Promise((resolve, reject) => {
        /**
             *  ...parmas ===>就是将传进来的参数扩展开，一行行展示在这里面
             * 比如：传进来
             * {
             *  url:'xx',
             *  data:{key1:val1,key2:val2}
             * }
             * 那么通过  ...parmas  就会把这些内容展示到这里了
        */
        wx.request({
            ...parmas,
            // 注意，此行必须放在   ...parmas  之下，才能覆盖其解构出的，传入的url:xxx参数
            url: baseUrl + parmas.url,
            success: (res)=> {
                 // 请求成功，就将成功的数据返回出去
                resolve(result)
            },
            fail: (err) => {
                reject(err)
            },
        })
    })
}

3.根据不同的url接口添加不同的header

        header中的Authorization字段一般存储token，用来做身份验证，但有些请求不需要携带token，所以这个封装的API中需要能根据传入的url来判断什么时候该给请求添加上token，什么时候不用可以添加。

export const 返回出去的方法名 = (parmas) => {
    /**
     *   根据不同的url接口,来设置不同的header请求头
     **  判断 url中是否带有 /my/ 请求的是私有的路径 带上header token
     **  { ...parmas.header }  ==> 先解构出传进来的header对象,然后再往这个对象里面添加        
         Authorization字段数据，这样即使有传入header的其他字段也能保留下来
     *   如果传入的parmas参数中没有header，那myHeader就是个空的对象 {} 因为啥都没有
     */
    let myHeader = { ...parmas.header };
    //通过includes方法查找字符串中是否包含指定内容，进而判断是否要添加token
    if (parmas.url.includes("/neddToken/")) {
        // 往myHeader这个对象里插入键值对 带上Storage中存储的token
        myHeader["Authorization"] = wx.getStorageSync("token");
    }

    //设置基础请求头
    const baseUrl = "https://xxxtest"
    // 返回一个promise对象
    return new Promise((resolve, reject) => {
        /**
             *  ...parmas ===>就是将传进来的参数扩展开，一行行展示在这里面
             * 比如：传进来
             * {
             *  url:'xx',
             *  data:{key1:val1,key2:val2}
             * }
             * 那么通过  ...parmas  就会把这些内容展示到这里了
        */
        wx.request({
            ...parmas,
            // 注意，此行必须放在   ...parmas  之下，才能覆盖其解构出的，传入的url:xxx参数
            url: baseUrl + parmas.url,
            /**
             * !可以设置上默认的content-type，然后再扩展出传入的myHeader，如果传入的myHeader 
                为空，那header就还是默认的content-type一个键值对
             * !{ 'content-type': 'application/json', ...myHeader } ==》 扩展出myHeader这 
                个对象中的键值对;
             */
            header: { 'content-type': 'application/json', ...myHeader },
            success: (res)=> {
                 // 请求成功，就将成功的数据返回出去
                resolve(result)
            },
            fail: (err) => {
                reject(err)
            },
        })
    })
}

此时，在使用这个封装的API的时候，就可以对header进行设置了，例如：

   cjRequest({
      url: '/neddToken/home/swiperdata',
      // 使用的时候也可以传入一些header的字段
      header: {
        'content-type': 'application/json',
        'Date': 'Tue, 15 Nov 2021 08:12:31 GMT'
      },
      method: 'GET',
    }).then((result) => {
       console.log(result)
    })

 此时，因为请求url中含有【neddToken】，就会在header中插入token

此时，这个请求的header中就会添加上token（也就是Authorization这个字段了）

4.添加请求发起时页面loading效果

当页面在加载数据的时候，最好要有一个loading的提示，同时有遮罩，防止用户乱点

所以，就需要在封装的API中加入微信小程序的wx.showLoading遮罩层了

    // 显示加载中loading效果
    wx.showLoading({
        title: "加载中",
        mask: true  //开启蒙版遮罩
    });
    ...
    ...
    //  关闭正在等待loading效果
    wx.hideLoading();

        如果直接在封装的API的开始加上loading，在请求结束加上隐藏loading效果，那乍看一下，好像没错，但是细想一下，如果一个页面同时触发了多个请求呢？比如打开一个页面，同时加载多个模块，需要从不同的接口请求数据，那就会使用多次这个封装的API。

        此时，就会出现，第一个请求结束，直接关闭了loading效果，而后面几个请求就没有loading效果的遮罩了。

        所以，需要在封装的js文件中设置一个全局变量，每次调用这个封装的文件时，就对这个变量++，每次请求结束，返回数据出去的时候，就对这个变量--，最后判断一下这个变量是否为0（也就是所有请求的结束了），在决定是否关闭loading效果

完整的封装的API 的 js文件 

// 同时发送异步代码的次数
let ajaxTimes = 0;
export const cjRequest = (parmas) => {
    // 当有地方调用请求方法的时候，就增加全局变量，用于判断有几个请求了
    ajaxTimes++;
    // 显示加载中loading效果
    wx.showLoading({
        title: "加载中",
        mask: true  //开启蒙版遮罩
    });
    /**
     *   根据不同的url接口,来设置不同的header请求头
     **  判断 url中是否带有 /my/ 请求的是私有的路径 带上header token
     **  { ...parmas.header }  ==> 先解构出传进来的header对象,然后再往这个对象里面添加Authorization字段数据，这样即使有传入header的其他字段也能保留下来
     *?  如果传入的parmas参数中没有header，那myHeader就是个空的对象 {} 因为啥都没有
     */
    let myHeader = { ...parmas.header };
    if (parmas.url.includes("/neddToken/")) {
        // 往myHeader这个对象里插入键值对 带上Storage中存储的token
        myHeader["Authorization"] = wx.getStorageSync("token");
    }
    // 基础url
    const baseUrl = "https://api-hmugo-web.itheima.net/api/public/v1"
    return new Promise((resolve, reject) => {
        /**
             *  ...parmas ===>就是将传进来的参数扩展开，一行行展示在这里面
             * 比如：传进来
             * {
             *  url:'xx',
             *  data:{key1:val1,key2:val2}
             * }
             * 那么通过  ...parmas  就会把这些内容展示到这里了
        */
        wx.request({
            ...parmas,
            // 注意，此行必须放在   ...parmas  之下，才能覆盖其传入的url:xxx参数
            url: baseUrl + parmas.url,
            /**
             * !可以设置上默认的content-type，然后再扩展出传入的myHeader，如果传入的myHeader为空，那header就还是默认的content-type一个键值对
             * !{ 'content-type': 'application/json', ...myHeader } ==》 扩展出myHeader这个对象中的键值对;
             */
            header: { 'content-type': 'application/json', ...myHeader },
            success: (result) => {
                // 请求成功，就将成功的数据返回出去
                resolve(result)
            },
            fail: (err) => {
                reject(err)
            },
            // 不管请求成功还是失败，都会触发
            complete: () => {
                /**
                 * !loading效果同时被多个请求触发是可以显示一个的，但是关闭loading一旦被第一个请求完成后关闭，后面的请求触发的loading效果就没了
                 * !所以，需要通过全局设置一个变量，来监听同时触发了几个请求，当最后一个请求完成后，再关闭loading
                 * ?每次结束请求后，就减少全局变量，当为0时，就表示这是最后一个请求了
                 */
                ajaxTimes--;
                // 此时就可以关闭loading效果了
                if (ajaxTimes === 0) {
                    //  关闭正在等待loading效果
                    wx.hideLoading();
                }

            }
        });

    })
}

如果需要按照原生微信请求的格式来封装（调用时要传各种方法、参数），请参考：

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

参考：黑马微信商场小程序

黑马程序员微信小程序开发前端教程_零基础玩转微信小程序_哔哩哔哩_bilibiliicon-default.png?t=N7T8https://www.bilibili.com/video/BV1nE41117BQ?p=3

DTcode7
关注
  • 19
    点赞
  • 踩
  • 66
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
微信小程序如何封装api接口
01-03
微信小程序如何封装api接口 首先创建个http文件夹（可自定义名字） 一：创建个env.js文件用来设置公共访问的url，即环境地址 module.exports = { //开发环境 dev:{baseUrl:http://localhost:3000}, //测试环境 test:{baseUrl:http://www.test.com}, //线上环境（公共部分） prod:{baseUrl:'https://api.it120.cc'} } 二：二次封装 ajax请求，创建个request.js(自定义) `` const {baseUrl} = re
微信小程序接口封装方法
06-20
小程序接口封装方法，很全的封装方法，便于在后期中接口的对接使用
微信小程序请求request封装
最新发布
Xiang_Gong_Ya_的博客
06-13 737
【代码】微信小程序请求request封装。
微信小程序封装promise请求方式
ChauncyT_T的博客
07-18 776
。封装promise方式请求数据，防止当请求过多时出现回调地狱。
微信小程序网络请求封装
每天都要努力学习哦~~
10-11 2889
网络请求地址放到url.js中，分别制定开发环境，体验环境，线上环境网络请求的方法放到request.js中，暴露get、post、wxLogin方法请求前显示加载中，请求结束后隐藏加载中请求的接口方法，放到api.js中，并调用request.js中对应的方法。
2024年最新小程序封装网络请求和拦截器_小程序请求拦截器(3)，2024年最新头条测试开发面经
2401_84852050的博客
05-15 474
封装一个request函数，用于发送请求。该函数接受一个参数options，用于配置请求。我们可以在登录成功后将用户信息保存到该变量中，并在后续的请求中使用该变量进行身份验证。该函数接受一个response参数，用于判断请求是否成功。该函数接受一个chain参数，用于执行拦截器链。我们可以在该函数中定义一个。接口发送请求，并在请求完成后返回一个Promise对象，以便于我们进行后续的操作。中设置请求头，以便于在后续的请求中进行身份验证。中统一处理状态码，并在请求成功时更新用户登录信息。
微信小程序 wx.request 请求封装
蜗牛的博客
12-05 2063
微信小程序 wx.request() 请求封装
微信小程序基于Promise封装wx.request请求（完整代码）
weixin_56388890的博客
01-05 1423
附完整代码，通俗易懂
微信小程序——解决异步问题
TianXuab的博客
09-11 3640
这些是解决小程序异步请求的一些常见方法。具体的解决方案取决于你的项目需求和个人偏好。无论哪种方法，都需要注意处理成功和失败的情况，以确保你的小程序在网络请求方面具有良好的稳定性和用户体验。在小程序中，异步请求通常是通过使用微信小程序提供的API来实现的，最常见的是使用wx.request()函数来发送异步网络请求。
【JWT】SpringBoot+微信小程序根据指定参数生成Token、更新Token、判断Token是否已经过期、封装wx.request请求更新Token并判断Token是否过期
番茄Salad
10-05 2437
封装了wx的request请求，每次发起请求的时候都走一遍更新Token的接口/user/updateTokenTime，如果接口返回offline则代表已经过期，则跳转到登录页面，否则就是没有过期，则更新缓存userInfo中的token。如果你想有一些接口不要经过这个request封装，就比如用户没有登录是可以进入到首页等页面的，开放一些允许用户没有登录状态可以访问的接口。我们可以再封装一个request，专门开放接口不经过Token验证。微信小程序点击登录按钮调用该方法。
小程序api封装
weixin_43886168的博客
12-01 1253
小程序api封装 创建api目录,和page同级 api.js 文件代码 const app = getApp() const request = (url, options) => { return new Promise((resolve, reject) => { wx.request({ url: `${app.globalData.host}${u...
微信小程序-微信小程序-豆瓣电影
08-06
小程序请求的接口域名必须是在微信小程序管理平台绑定的域名， 你不能直接请求第三方接口，只能通过你绑定的域名去请求第三方接口给到小程序， 否则会报错！ 项目地址： http://phpxiong.cn/article/show/41 参考...
微信小程序-微信小程序的功能封装
08-06
在这个名为“微信小程序-微信小程序的功能封装”的项目中，开发者分享了一些在实际开发中经常用到的功能模块，便于其他开发者参考和复用。 1. **缓存(Cache)**：在微信小程序中，缓存是用于存储数据的关键功能，它...
微信小程序 - 自定义picker 封装成插件
06-27
微信小程序 - 自定义picker 封装成插件 可以自定义多级数据picker 最多四级 最少一级 自定义二级数据联动 自定义三级数据联动 自定义四级数据联动 封装成插件 全局使用
微信小程序-API接口安全详解
10-16
主要介绍了微信小程序-API接口安全详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
微信小程序-通过api接口获取新闻列表的demo
08-06
首先，我们要了解微信小程序的网络请求API——`wx.request()`. 这个方法用于发起HTTP网络请求，它是小程序与服务器数据交互的基础。在本示例中，开发者会使用`wx.request()`来调用聚合数据提供的新闻API，获取新闻...
微信小程序——API接口 Promise化
weixin_44710964的博客
02-23 2943
这里放上个人觉得最舒服的一种Promise化方式： 在utils里面新建文件Promise.js //Promise.js function wxPromise(functionName, params) { return new Promise(function(resolve, reject) { wx[functionName]({ ...p...
小程序 ES6 Promise用法讲解
u012693479的博客
08-02 2519
一：什么是promise Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。Promise对象是一个代理对象，一个代表未知返回结果的对象值。这个值在Promise对象创建时可能是未知的，它允许你为异步操作的成功和失败分别绑定相应的处理方法， 这让异步方法可以像同步方法那样返回值，但并不是立即返回最终执行结果，而是返回一个能代表未来出现的结果的p...
微信小程序promise封装网络请求（wx.request）
coldriversnow的专栏
08-24 2078
所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。如果我们需要使用很多接口请求数据，每次都写一遍，会造成大量的代码冗余，我们可以将wx.request进行二次封装来实现调用。其中BaseAPI为需要发送网络请求的公共部分，在GET的 '' 中填入后半部分，封装好的函数会实现地址的拼接，data为发送的参数。url是请求的接口地址，data是需要发送的数据，header是请求头，success是成功回调函数，method是请求类型...
微信小程序--通过请求网页获取信息并显示
06-11
要通过微信小程序请求网页获取信息并显示，可以使用微信小程序提供的API wx.request() 发送HTTP请求。具体步骤如下： 1. 在小程序页面中引入wx.request() API。 ``` const request = require('../../utils/request.js') ``` 2. 在小程序页面中编写请求函数，并在函数中调用wx.request() API。 ``` function requestData() { wx.request({ url: 'https://example.com/data', // 请求的URL method: 'GET', // 请求方法 success: function(res) { // 请求成功回调函数 console.log(res.data) // 打印请求到的数据 }, fail: function(res) { // 请求失败回调函数 console.log(res) } }) } ``` 3. 在小程序页面中调用请求函数。 ``` Page({ data: {}, onLoad() { requestData() // 调用请求函数 } }) ``` 4. 将请求到的数据在小程序页面中显示出来。 ``` Page({ data: {}, onLoad() { requestData() // 调用请求函数 }, setData(data) { this.setData({ data: data // 将请求到的数据保存到data中 }) } }) ``` 5. 在小程序页面中使用wxml标签，将请求到的数据显示出来。 ``` <view>{{data}}</view> ``` 以上就是通过微信小程序请求网页获取信息并显示的步骤。需要注意的是，请求的网页需要支持CORS跨域才能请求成功。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

DTcode7

你的鼓励是我坚持的动力

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

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

打赏作者

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

抵扣说明：

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

余额充值