微信小程序开发中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使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • javaScript中FormData使用方法示例

    javaScript中FormData使用方法示例

    这篇文章主要为大家介绍了javaScript中FormData使用方法示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • 浅谈Sticky组件的改进实现

    浅谈Sticky组件的改进实现

    这篇文章主要介绍了Sticky组件的改进实现的相关资料,需要的朋友可以参考下
    2016-03-03
  • JavaScript实现下载base64数据并兼容低版本

    JavaScript实现下载base64数据并兼容低版本

    这篇文章主要为大家详细介绍了如何使用JavaScript实现下载base64数据并兼容低版本,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-12-12
  • js获取ajax返回值代码

    js获取ajax返回值代码

    这篇文章主要介绍了js如何获取ajax的返回值,需要的朋友可以参考下
    2014-04-04
  • js格式化输入框内金额、银行卡号

    js格式化输入框内金额、银行卡号

    这篇文章主要介绍了js格式化输入框内金额、银行卡号,采用“keyup”事件处理格式化,每4位数一组中间空格隔开,如何格式化输入框内金额、银行卡号,需要了解的朋友可以参考一下
    2016-02-02
  • javascript中自定义对象的属性方法分享

    javascript中自定义对象的属性方法分享

    这篇文章介绍了在javascript中自定义对象的属性方法,有需要的朋友可以参考一下
    2013-07-07
  • TypeScript中如何实现类型安全的路由系统

    TypeScript中如何实现类型安全的路由系统

    本文讲述TypeScript如何实现类型安全的路由系统,路由类型结构、使用infer和Extract提取参数类型、定义路由配置类型、创建路由表、实现类型安全的导航和位置钩子等,使用React Router v6或Next.js App Router,结合zod进行查询参数验证,以实现类型安全的路由系统
    2025-10-10
  • VScode中配置JavaScript编译环境的方法

    VScode中配置JavaScript编译环境的方法

    这篇文章主要介绍了VSCODE中配置JavaScript编译环境的方法,方式一 使用Node.js做为解释器运行JS代码 Node.js的安装和配置,方式二使用VSCODE插件Code Runner运行JS代码,本文给大家介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)

    js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)

    最近做了一个项目,需要用子域名调用主域名下的一个现有的功能,于是想到了用jsonp来解决,在我们平常的项目中不乏有这种需求的朋友,于是记录下来以便以后查阅同时也希望能帮到大家,需要了解的朋友可以参考下
    2012-12-12
  • 利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层

    利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层

    本篇文章主要介绍了c#+Plupload.js解决大容量文件上传问题, 带进度条和背景遮罩层,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-03-03

最新评论