zoukankan      html  css  js  c++  java
  • 小程序 setData,request的坑

    现象:

    step1:在OnLoad()函数中request数据para1,通过setData函数存入Page的data域中
    step2:在同一个函数中requestpara2_By para1,会出现访问this.data.para1

    重点:

    第二个请求的参数依赖于第一个请求的结果

    推测原因:

    ~~两个request请求并行进行,因此第二个request请求访问para1时它还没有被赋值~~
    修正原因:查了一下资料,发现是因为request回调是异步的,执行request的同时程序往下继续执行

    我的解决办法

    把第二个request移到后一个生命周期函数OnReady()中,保证先获取了para1再执行后面的request

    较为严谨的解决办法:

    方法1:在第一个request的success回调中嵌套进行第二个请求(没有实践能不能成功)
    方法2:使用Promise,介绍和教程:http://es6.ruanyifeng.com/#docs/promise https://www.cnblogs.com/xjwy/p/7813859.html

    错误代码:

    Page({
        data:{
            para1:'',
            para2:''
        }    
        onLoad: function (options) {
            const that = this;
            //获得para1
            wx.request({
              url: 'xxxxxxx',
              data: {},
              method: 'POST',
              header: { 'content-type': 'application/x-www-form-urlencoded;charset=utf-8', },
              success: function (res) {     
                that.setData({para1:res.data.para1})//赋值
                console.log('获得para1:' + that.data.para1);//此处能够打印
              },
              fail: function (res) {}
            })
            console.log('获得para1:' + this.data.para1);//此处打印为空
            //用para1作为参数获得para2
            wx.request({
              url: 'xxxxx',
              data: {
                para1: this.data.para1//根据结果反推这里设置的参数值为空
              },
              method: 'POST',
              header: {'content-type': 'application/x-www-form-urlencoded;charset=utf-8',},
              success: function (res) {
                that.setData({
                  para2:res.data.para2
                })
              },
              fail: function (res) {}
            })
        }
    })
    

    修改后的代码:

    Page({
        data:{
            para1:'',
            para2:''
        }    
        onLoad: function (options) {
            const that = this;
            //获得para1
            wx.request({
              url: 'xxxxxxx',
              data: {},
              method: 'POST',
              header: { 'content-type': 'application/x-www-form-urlencoded;charset=utf-8', },
              success: function (res) {     
                that.setData({para1:res.data.para1})
                console.log('获得para1:' + that.data.para1);
              },
              fail: function (res) {}
            })
            console.log('获得para1:' + this.data.para1);
        }
        OnReady: function() {//【修改】把第二个请求放入新的生命周期函数
            //用para1作为参数获得para2
            const that = this;
            wx.request({
              url: 'xxxxx',
              data: {
                para1: this.data.para1//此时para1已被设置
              },
              method: 'POST',
              header: {'content-type': 'application/x-www-form-urlencoded;charset=utf-8',},
              success: function (res) {
                that.setData({
                  para2:res.data.para2//成功获取para1映射的para2的值
                })
              },
              fail: function (res) {}
            })
        }
    })
    
  • 相关阅读:
    docker指令汇总
    springboot(八) 嵌入式Servlet容器自动配置原理和容器启动原理
    RabbitMQ 消息确认机制
    RabbitMQ 最常用的三大模式
    RabbitMQ 核心概念
    RabbitMQ 之简单队列
    Spring 详解(三)------- SpringMVC拦截器使用
    slf4j 搭配 log4j2 处理日志
    Spring 详解(二)------- AOP关键概念以及两种实现方式
    Spring 详解(一)------- AOP前序
  • 原文地址:https://www.cnblogs.com/05410n/p/8778236.html
Copyright © 2011-2022 走看看