首页 > 极客资料 博客日记
第147篇:微信小程序开发中Promise的使用(aysnc,await)
2024-10-17 18:00:03极客资料围观14次
文章第147篇:微信小程序开发中Promise的使用(aysnc,await)分享给大家,欢迎收藏极客之家,专注分享技术知识
好家伙,
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.成功获取
版权声明:本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:jacktools123@163.com进行投诉反馈,一经查实,立即删除!
标签:
相关文章
最新发布
- Nuxt.js 应用中的 prerender:routes 事件钩子详解
- 【问题解决】Tomcat由低于8版本升级到高版本使用Tomcat自带连接池报错无法找到表空间的问题
- 【FAQ】HarmonyOS SDK 闭源开放能力 —Vision Kit
- 六、Spring Boot集成Spring Security之前后分离认证流程最佳方案
- 《JVM第7课》堆区
- .NET 8 高性能跨平台图像处理库 ImageSharp
- 还在为慢速数据传输苦恼?Linux 零拷贝技术来帮你!
- 刚毕业,去做边缘业务,还有救吗?
- 如何避免 HttpClient 丢失请求头:通过 HttpRequestMessage 解决并优化
- 让性能提升56%的Vue3.5响应式重构之“版本计数”