ミニプログラムは非同期の問題を処理します

非同期の問題に対処するには、まず非同期とは何かを知る必要があります。非同期とは、メソッド A でリクエストし、メソッド B を呼び出すことを意味します。メソッド B で直接呼び出すとデータが取得できないため、非同期メソッドの処理を実行する必要がありますまた、WeChat アプレットの開発では、ほとんどのリクエストは非同期であり、これらの非同期メソッドに対応する同期メソッドはアプレット内で直接提供されないため、非同期関数を使用して別の場所で処理すると、データには次のような効果があります。
 

  data: {
    brandimg: ''  // 设置一个空变量,在请求数据后将请求结果赋值给该变量
  },
 
  getImgUrl() {  // 把获取数据的函数简称为A函数
    wx.request({
      url: 'http://daxun.kuboy.top/api/pro',
      success: res => {
        this.setData({
          brandimg: res.data.data[0].brandimg // 将获取到的数据赋值给data中的变量
        })
        console.log("A方法请求到的数据",this.data.brandimg)  // 在此将赋值的结果输出
      }
    })
  },
 
  useImage() { // 把使用数据的函数简称为B函数
    console.log("B方法调用的数据",this.data.brandimg)
  },
 
  onLoad: function () {
    this.getImgUrl()  // 在页面加载时执行获取数据的函数
    this.useImage()    // 检测是否能正确输出数据
  },

印刷結果は次のとおりです。 

 

データは正常に取得できていますが、関数 B でデータを呼び出すことができません。

現時点では、非同期問題を解決するには他の方法を使用する必要があります。js では、コールバック関数、async-await、Generator-yield、Promise など、非同期問題に対処するための多くのソリューションがありますが、小さなプログラムでは、 async-await または Generator-yield メソッドを直接使用することはできないため、現時点では次の方法で処理できます。

1. setTimeout
取得したデータを他で処理する必要がない場合は、setTimeout メソッドの使用を検討できます。

コードは以下のように表示されます。

 useImage() {
    setTimeout(() => {  // 其它地方都不变,在B函数中设置setTimeout
      console.log("B方法调用的数据", this.data.brandimg)
    },1000)
  },

2. Promise は
小さなプログラムで直接使用できます。A 関数で Promise を返し、返された Promise 内のデータを取得します。正常に取得されたデータをsolve に渡し、失敗を解決します。結果は次のとおりです。が拒否に渡され、B 関数で A 関数が呼び出されます。呼び出し後、.then と .catch を使用して成功と失敗の結果がそれぞれ処理されます。

コードは以下のように表示されます。

  data: {
    brandimg: ''  // 设置一个空变量,在请求数据后将请求结果赋值给该变量
  },
 
  getImgUrl() {
    return new Promise((resolve, reject) => {
      wx.request({
        url: 'http://daxun.kuboy.top/api/pro',
        success: res => {
          this.setData({
            brandimg: res.data.data[0].brandimg // 将获取到的数据赋值给data中的变量
          })
          resolve(res)
          console.log("A方法请求到的数据", this.data.brandimg)  // 在此将赋值的结果输出
        },
        fail: res => {
          reject(res)
        }
      })
    })
  },
 
  useImage() {
    this.getImgUrl().then(res => {
      console.log("B方法中得到的数据",res)
    }).catch(res =>{
      console.log(res)
    }) 
  },
 
  onLoad: function () {
    this.useImage()   
  },

おすすめ

転載: blog.csdn.net/m0_74265396/article/details/132388179
おすすめ