微信小程序Ⅵ [wx.request 的回调使用]

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/details/79585208

☆ 前言

  • 在微信小程序的开发过程中,wx.request 的请求必不可少
  • 我注意到(也可能刚接触,知识积累面太少),在外部 js 文件使用 wx.request 请求服务器数据时,因为异步的请求机制,我们不能在其success:function()中直接返回需要的数据

此时,回调函数的设计就有了存在价值

★ 简单例子用法演示

①. 首先设计外部方法

  • 注意参数的设置,及回调时的写法
  //此方法处于外部文件 “utils/util.js” 中进行了定义
  function requestBanner(callback){
  wx.request({
    url: 'http://wxzergpro.com/api/v1/banner/1',
    method: 'GET',
    success: function (data) {
      callback && callback(data);
    },
  })
}

②. 当前页面对应 js方法的

  • 前提需要引入公共文件 var util = require('../../utils/util.js');
//定义的触发函数
cbRequest:function(){
    //注意回调函数的调用
    util.requestBanner(this.callbackFun);
  },
  //回调函数 
callbackFun:function(res){
    console.log('callbackFun:');
    console.log(res);
  },
  • ES6 支持一种简写方式:
cbRequest:function(){
    util.requestBanner((res)=>{
      console.log('callbackFun:');
      console.log(res);
    });
  },

③. 测试结果

★ 操作示例(详细)

①. 是外部公共函数的设置

首先,是外部公共函数的设置,个人习惯提取使用率高的公共函数到外部文件,此处为 common.js

  • 其中举例放置了一个函数,代码如下:
/**
 * 根据商品ID获取商品详情
 */
function getGoodsInfo(doMain, goods_id, callback) {
  wx.request({
    url: doMain + '/WxApi/Goods/getGoodsInfo',
    header: { 'Content-Type': 'application/json' },
    data: {
      goods_id: goods_id,
    },
    success: function (res) {
      if (res.data.status) {
        console.log(' 获取商品 详细信息');
        //console.log(res.data.data)
        return typeof callback == "function" && callback(res.data.data)
      } else {
        return typeof callback == "function" && callback(false)
      }
    },
    fail: function () {
      return typeof callback == "function" && callback(false)
    }
  }, )
}

/**
 * 进行方法的暴露
 */
module.exports = {
  getGoodsInfo: getGoodsInfo,
}

②. 全局函数的设置

  • 针对使用率高的一些通用处理,可以考虑将其设置为全局函数,依此需求设计,则首先应在 app.js 中:

  1. 引入,公共文件 var common_js = require('utils/common.js')
  2. 在其 App() 方法的最后,将所需的函数注册成为全局函数 func: {getGoodsInfo: common_js.getGoodsInfo}
  • 参考截图如下:

③. 进行函数的调用

  • 在需要调用全局函数的业务逻辑中,核心参考代码如下:
//获取应用实例
const app = getApp()
Page({
/** 页面的初始数据*/
data: {
    goodsInfo: {}
  },
/**
 * 生命周期函数--监听页面加载
 */
  onLoad: function (options) {
    var that = this;
    var doMain = app.globalData.doMain
    app.func.getGoodsInfo(doMain, options.id, function (goodsInfo) {
      console.log(goodsInfo);
      that.setData({
        goodsInfo: goodsInfo,
      });
      //TODO 详情页的标题栏设置(动态) 
      wx.setNavigationBarTitle({
        title: goodsInfo.title
      })
    })
  },
..........
})
  • 执行结果,可参考打印出的信息

¤ 附录

  • 关于回调函数,有一个所谓的好莱坞准则:Don’t call me; I’ll call you!

♩♪♫ 推荐参考

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端那些事

Express4.x API (三):Response (译)

Express4.x API 译文 系列文章 技术库更迭较快,很难使译文和官方的API保持同步,更何况更多的大神看英文和中文一样的流畅,不会花时间去翻译--,所...

180100
来自专栏菜鸟计划

Ajax详解

一、ajax定义 ajax 的全称是Asynchronous JavaScript and XML,其中,Asynchronous 是异步的意思,它有别于传统w...

39850
来自专栏数据结构笔记

实战:异步爬取之异步的简单使用

首先,对于少量的请求(几百)我们不推荐使用异步,一般是成千上万的请求我们才使用异步,比如说爬取全站。

14420
来自专栏企鹅号快讯

UNIX 高手的 10 个习惯

Unix运维工程师看过来:10个能够提高您的 UNIX 命令行效率的好习惯——并在此过程中摆脱不良的使用模式。本文循序渐进地指导您学习几项用于命令行操作的技术,...

19890
来自专栏前端说吧

vuex - 学习日记

389110
来自专栏欧阳大哥的轮子

从Xcode10不再支持libstdc++说起

众所周知从Xcode10起,苹果摒弃了对libstdc++库的支持转而支持libc++库了。这两个库在Xcode9甚至更早的版本就已经同时存在于系统中并且可供开...

45130
来自专栏酷玩时刻

PC 微信扫码登陆

网站应用微信登录是基于OAuth2.0协议标准构建的微信OAuth2.0授权登录系统。进一步了解OAuth2.0-----理解OAuth2.0 官方介绍资料

2.1K40
来自专栏smy

web前端监控的三个方面探讨

以 init 为程序的入口,代码中所有同步执行出现的错误都会被捕获,这种方式也可以很好的避免程序刚跑起来就挂。

19720
来自专栏安恒网络空间安全讲武堂

Sniper-OJ 练习平台多题WriteUp

题目 ### 图书管理系统(200) ### as fast as you can(50) ### md5-vs-injection(50) ### 2048...

83670
来自专栏腾讯Bugly的专栏

Android 动态链接库加载原理及 HotFix 方案介绍

引言 随着项目中动态链接库越来越多,我们也遇到了很多奇怪的问题,比如只在某一种 OS 上会出现的 java.lang.UnsatisfiedLinkError,...

59270

扫码关注云+社区

领取腾讯云代金券