微信小程序开发中Promise的使用(aysnc,await)及场景分析

 更新时间:2024年10月18日 08:55:55   作者:养肥胖虎  
在微信小程序开发中,错误使用Promise可能导致无法正确获取数据,本文分析了一个常见错误场景,即在异步函数中未使用await或.then()处理Promise,导致无法获取异步操作的返回结果,文章提供了使用await和链式调用.then()的解决方法,帮助开发者避免类似错误,确保数据正确返回

0.错误描述

今天在开发中犯了一个比较严重的错误

对于Promise的错误使用

场景:

微信小程序中展示搜索条件列表

<strong>// API请求工具函数
const apiRequest = (url, method = 'GET', headers = {}) => {
  return new Promise((resolve, reject) => {
    wx.request({
      url,
      method,
      header: headers,
      success: (res) => resolve(res),
      fail: (error) => reject(error)
    });
  });
};
const fetchTypelist = async () => {
  const app = getApp();
  const queryParams = app.globalData.queryParams;
  console.log(queryParams)
  let url = `${API_BASE_URL}/industryType/page?pageNo=1&pageSize=10`;
  // 添加常规的查询参数
  for (const [key, value] of Object.entries(queryParams)) {
    if (value) {
      url += `&${key}=${encodeURIComponent(value)}`;
    }
  }
  try {
    const headers = {}; // 如果需要token,可以在这里添加
    const response = await apiRequest(url, 'GET', headers);
    if (response.data.code === 200) {
      console.log(response.data)
      return response
    } else {
      throw new Error('获取地址列表失败');
    }
  } catch (error) {
    throw error;
  }
};
/.................../
调用方法
let result = fetchTypelist()
console.log(result)</strong>

猜猜会打印什么?

 一个promise是的仅仅只是一个promise,并没有拿到请求返回的结果

1.分析

async 函数默认返回一个 Promise,即使你在 async 函数中显式返回了值。

当你调用 async定义的函数 (fetchTypelist) 时,返回的实际上是一个 Promise,而不是直接返回的数据。

2.解决方法

2.1.使用await等待方法的执行,获取返回值

<strong>const getTypelist = async () => {
  try {
    const typelist = await fetchTypelist();
    console.log(typelist); // 这里可以获取到返回的 rows
  } catch (error) {
    console.error(error); // 处理错误
  }
};</strong>

2.2.使用链式调用.then()来处理promise

<strong>fetchTypelist()
  .then((typelist) => {
    console.log(typelist);
  })
  .catch((error) => {
    console.error(error);
  });</strong>

3.成功获取

到此这篇关于微信小程序开发中Promise的使用(aysnc,await)的文章就介绍到这了,更多相关微信小程序Promise使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js 翻转颜色实现代码

    js 翻转颜色实现代码

    将#ffffff转换成rgb(0,0,0)格式的颜色代码,需要的朋友可以参考下。
    2010-03-03
  • JavaScript判断浏览器运行环境的详细方法

    JavaScript判断浏览器运行环境的详细方法

    这篇文章主要给大家介绍了关于JavaScript判断浏览器运行环境的详细方法,文中通过示例代码介绍的非常详细,对大家学习或者使用JavaScript具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-06-06
  • 微信小程序实现电子签名功能

    微信小程序实现电子签名功能

    这篇文章主要为大家详细介绍了微信小程序实现电子签名功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-07-07
  • Javascript数组的排序 sort()方法和reverse()方法

    Javascript数组的排序 sort()方法和reverse()方法

    JavaScript提供了sort()方法和reverse()方法,使得我们可以简单的对数组进行排序操作和逆序操作
    2012-06-06
  • 解决canvas画布使用fillRect()时高度出现双倍效果的问题

    解决canvas画布使用fillRect()时高度出现双倍效果的问题

    下面小编就为大家带来一篇解决canvas画布使用fillRect()时高度出现双倍效果的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • javascript中Date format(js日期格式化)方法小结

    javascript中Date format(js日期格式化)方法小结

    这篇文章主要介绍了javascript中Date format,即js日期格式化的方法.实例总结了三种常见的JavaScript日期格式化技巧,需要的朋友可以参考下
    2015-12-12
  • javascript随机生成用户名的实现方式

    javascript随机生成用户名的实现方式

    这篇文章主要介绍了javascript随机生成用户名的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • JS实现页面跳转链接的几种方式汇总

    JS实现页面跳转链接的几种方式汇总

    这篇文章主要介绍了JS实现页面跳转链接的几种方式,简单总结了几种页面跳转功能的实现,有使用js跳转页面,返回上一次预览界面及button按钮添加事件跳转,本文结合实例代码给大家介绍的非常详细,需要的朋友参考下吧
    2024-01-01
  • js实现无缝滚动图

    js实现无缝滚动图

    本文主要分享了js实现无缝滚动图的示例代码,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • 详解一个小实例理解js原型和继承

    详解一个小实例理解js原型和继承

    这篇文章主要介绍了js原型和继承,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04

最新评论