ETJava Beta | Java    注册   登录
  • 搜索:
  • 第147篇:微信小程序开发中Promise的使用(aysnc,await)

    发表于      阅读(1)     博客类别:Crawler     转自:https://www.cnblogs.com/FatTiger4399/p/18472562
    如有侵权 请联系我们删除  (页面底部联系我们)  

    好家伙,

     

    0.错误描述

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

    对于Promise的错误使用

     

    场景:

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

    // 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)

     

     

    猜猜会打印什么?

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

     

    1.分析

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

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

     

    2.解决方法

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

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

     

     

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

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

     

     

     

    3.成功获取