首页 > 其他分享 >第147篇:开发中Promise的使用(async,await)

第147篇:开发中Promise的使用(async,await)

时间:2024-10-17 17:21:11浏览次数:7  
标签:147 const fetchTypelist await console Promise error async

好家伙,

 

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.成功获取

 

标签:147,const,fetchTypelist,await,console,Promise,error,async
From: https://www.cnblogs.com/FatTiger4399/p/18472562

相关文章

  • C#线程---await
    简介:前面异步编程的不足:它允许我们以模块化的方式设计程序,来组合不同的异步操作。遗憾的是:一:当阅读此类程序时仍然非常难理解程序的实际执行顺序。在大型程序中将会有许多相互依赖的任务和后续操作,用于运行其他后续操作的后续操作,处理异常的后续操作,并且它们都出现在程序代......
  • 洛谷题单指南-字符串-P1470 [USACO2.3] 最长前缀 Longest Prefix
    原题链接:https://www.luogu.com.cn/problem/P1470题意解读:求s最长前缀长度,使得可以拆解成p集合中的字符串解题思路:动态规划:设s字符串下标从1开始,p集合用set<string>保存所有的元素状态表示:设f[i]表示前i个字符s[0~i-1]是否能拆解成p中的元素状态计算:对于j=i-1开始往后倒......
  • 深入理解 JavaScript 异步:掌握 Promise、Async/Await 与 Promise.all 全指南
    博文:深入理解JavaScript中的Promise、await、.then()和Promise.all()在现代JavaScript中,处理异步操作时,Promise、async/await和Promise.all()是关键工具。本文将深入讲解它们的用法及实现,并结合实际例子。1.Promise的基本使用Promise是一种处理异步操作的方式。......
  • C++异步调用 future async promise packaged_task
    背景:C++异步调用是现代C++编程中的一种重要技术,它允许程序在等待某个任务完成时继续执行其他代码,从而提高程序的效率和响应性。C++11引入了std::async、std::future和std::promise等工具,使得异步编程变得更加方便和直观。以下是关于C++异步调用的详细介绍,包括基本概......
  • JS异步编程精通之路(一):Callback、Promise、Async/Await 和 Observable 深度对比
    在现代JavaScript编程中,异步操作是常见且必不可少的部分。处理异步的方式多种多样,其中最常见的有Callback、Promise、Async/Await,以及近年来随着响应式编程(ReactiveProgramming)理念兴起的Observable。本文将对这几种异步处理方式进行对比,帮助你理解它们各自的优缺点,以......
  • JavaScript中Promise学习
    Promise是强大的异步编程工具,它允许我们更好的管理和处理异步操作。这里将探讨Promise中的reject以及如何使用catch来处理异步错误 什么是promise?promise是一种代表异步操作最终完成或失败的对象。它有三种状态:1、Pending(进行中):初始状态,既不成功也不失败2、Fulfilled(已成......
  • 两段相同的代码【async await】
    asyncfunctiondoSubmitFile(){constfileInput=document.getElementById('fileInput')constfileObj=fileInput.files[0]constformData=newFormData()formData.append('file',fileObj)try{constresponse=await_axi......
  • C# await 高级用法
    本文告诉大家await的高级用法,包括底层原理。昨天看到太子写了一段代码,我开始觉得他修改了编译器,要不然下面的代码怎么可以编译通过await"林德熙逗比";需要知道,基本可以添加await都是可以等待的类型,如Task。如果一个类需要可以被等待,那么这个类必须满足以下条件类里有一个Ge......
  • 异步场景: promise、async函数与await命令介绍
    如果你也对鸿蒙开发感兴趣,加入“Harmony自习室”吧!扫描下方名片,关注公众号,公众号更新更快,同时也有更多学习资料和技术讨论群。在鸿蒙的开发中,我们时常会遇到promise异步场景,有同学反馈说希望提一下。异步开发这部分的内容比较多,我不确定这位朋友具体想讨论是哪些方面,那我从......
  • 锐龙7 7800X3D与i7-14700K到底怎么选!其实很简单
    从2022年的锐龙75800X3D到后来的锐龙77800X3D,笔者使用X3D处理器已有2年多的时间。站在自己的立场,我是非常希望游戏老鸟购买这类处理器的,并且也推荐了不少。这里说的是老鸟,也就是比较懂电脑的玩家。但是对于新手玩家而言,3099元的i7-14700K和2999元的锐龙77800X3D摆在面前,该如......