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

余明成

0.错误描述

今天在开发中犯了一个比较严重的错误
对于Promise的错误使用
场景:
微信小程序中展示搜索条件列表

1. <strong>// API请求工具函数
   
2. const apiRequest = (url, method = 'GET', headers = {}) => {
   
3.   return new Promise((resolve, reject) => {
   
4.     wx.request({
   
5.       url,
   
6.       method,
   
7.       header: headers,
   
8.       success: (res) => resolve(res),
   
9.       fail: (error) => reject(error)
   
10.     });
    
11.   });
    
12. };
    
13. const fetchTypelist = async () => {
    
14.   const app = getApp();
    
15.   const queryParams = app.globalData.queryParams;
    
16.   console.log(queryParams)
    
17.   let url = `${API_BASE_URL}/industryType/page?pageNo=1&pageSize=10`;
    
18.   // 添加常规的查询参数
    
19.   for (const [key, value] of Object.entries(queryParams)) {
    
20.     if (value) {
    
21.       url += `&${key}=${encodeURIComponent(value)}`;
    
22.     }
    
23.   }
    
24.   try {
    
25.     const headers = {}; // 如果需要token,可以在这里添加
    
26.     const response = await apiRequest(url, 'GET', headers);
    
27.     if (response.data.code === 200) {
    
28.       console.log(response.data)
    
29.       return response
    
30.     } else {
    
31.       throw new Error('获取地址列表失败');
    
32.     }
    
33.   } catch (error) {
    
34.     throw error;
    
35.   }
    
36. };
    
37. /.................../
    
38. 调用方法
    
39. let result = fetchTypelist()
    
40. console.log(result)</strong>

复制代码

猜猜会打印什么?
一个promise是的仅仅只是一个promise,并没有拿到请求返回的结果

1.分析

1. async

复制代码

函数默认返回一个

1. Promise

复制代码

，即使你在

1. async

复制代码

函数中显式返回了值。
当你调用 async定义的函数

1. (fetchTypelist)

复制代码

时，返回的实际上是一个

1. Promise

复制代码

，而不是直接返回的数据。

2.解决方法


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

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

复制代码

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

1. <strong>fetchTypelist()
   
2.   .then((typelist) => {
   
3.     console.log(typelist);
   
4.   })
   
5.   .catch((error) => {
   
6.     console.error(error);
   
7.   });</strong>

复制代码

3.成功获取

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

来源:https://www.jb51.net/javascript/328969atl.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！