为什么我的fetch请求不能在事件侦听器回调函数中执行？
fetch请求不能在事件侦听器回调函数中执行的原因是，事件侦听器回调函数是异步执行的，而fetch请求是基于Promise的异步操作。在事件侦听器回调函数中执行fetch请求会导致请求的执行顺序不确定，可能会出现意外的结果。
具体来说，事件侦听器回调函数是在特定事件触发时被调用的，而fetch请求是一个网络请求操作，需要一定的时间来完成。当事件触发时，事件侦听器回调函数会立即执行，而不会等待fetch请求的完成。这样就可能导致fetch请求的结果无法在事件侦听器回调函数中正确处理。
为了解决这个问题，可以将fetch请求放在事件侦听器回调函数之外的地方执行，或者使用async/await来确保fetch请求的顺序执行。例如，可以在事件侦听器回调函数中调用一个异步函数，然后在该异步函数中使用await关键字来等待fetch请求的完成。
以下是一个示例代码：
// 事件侦听器回调函数
function eventListenerCallback() {
// 调用异步函数
handleFetchRequest();
}
// 异步函数
async function handleFetchRequest() {
try {
// 执行fetch请求
const response = await fetch('https://api.example.com/data');
const data = await response.json();
// 处理fetch请求的结果
console.log(data);
} catch (error) {
console.error(error);
}
}
// 添加事件侦听器
document.addEventListener('click', eventListenerCallback);在上述示例中，事件侦听器回调函数eventListenerCallback中调用了异步函数handleFetchRequest，该异步函数使用了async/await来确保fetch请求的顺序执行。这样就可以在事件侦听器回调函数中正确处理fetch请求的结果。
腾讯云相关产品和产品介绍链接地址：
- 云函数（Serverless）：https://cloud.tencent.com/product/scf
- 云开发（CloudBase）：https://cloud.tencent.com/product/tcb
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版（CMYSQL）：https://cloud.tencent.com/product/cdb_mysql
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 人工智能（AI）：https://cloud.tencent.com/product/ai
- 物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 区块链（Blockchain）：https://cloud.tencent.com/product/baas
- 视频处理（VOD）：https://cloud.tencent.com/product/vod
- 音视频通话（TRTC）：https://cloud.tencent.com/product/trtc
- 元宇宙（Metaverse）：https://cloud.tencent.com/product/metaverse
相关·内容
2回答
如何强制事件回调等待异步调用解决？
javascript、asynchronous、promise、async-await、dom-events
我有一个表单，它监听一个名为onBeforeSubmit的事件。此事件在我提交表单时触发，但如果回调返回false，则会停止提交。
问题
我的回调涉及到对API的异步调用。在决定是否返回false之前，如何强制事件等待promise解析？目前它不需要等待fetch()解析--我已经尝试了async/await和.then()两种方法……
我尝试过的：
尝试1：
onBeforeSubmit: async (e) {
const res = await fetch(url);
// if res value fails some condition
return false
}
尝试
浏览 64提问于2020-07-29得票数 1
回答已采纳
2回答
如何使用async/await保存fetch函数中的数据
javascript、asynchronous、async-await、get、fetch
代码：
const myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
const raw = JSON.stringify({
email: "example@gmail.com",
password: "password",
});
const requestOptions = {
method: "POST",
headers: myHeaders,
body: raw,
浏览 0提问于2020-12-12得票数 2
2回答
函数不会在返回时结束
flutter、dart
我有个奇怪的问题。我有一个函数来检查sqflite中是否存在某个条目，如果它存在，它应该返回true，如果不是，则返回false。但是，由于某种原因，函数在返回true时并没有结束。相反，它总是贯穿函数的末尾，并返回false。
控制台输出是：
存在(在这里应该返回true )，{id: 1，messageId: 6，wasViewed: 0} (结果输出)结束，函数
然后它返回假的。
Future<bool> isMessageViewContained(int id) async {
Database db = await this.database;
a
浏览 2提问于2020-04-26得票数 0
回答已采纳
2回答
为什么我的模拟抓取总是返回null？(笑话)
javascript、reactjs、testing、jestjs、mocking
我有一个简单的React组件，它调用本地API来获取组件挂载上的产品列表。功能本身运行良好。该应用程序由create-react-app创建。但是，我也在尝试测试Jest中的fetch函数，但是我模拟的全局fetch总是返回null。有人知道为什么吗？
这就像我模拟的函数从来没有被调用过，或者不在组件逻辑的范围内？但是，原始的全局fetch也不会被调用。只返回null。
我还尝试重写fetch以使用.then()后续，并尝试使用jest-fetch-mock包，但结果是相同的。我可以从测试中调用我的(真实) fetch函数，它可以正确地返回。只有被模拟的fetch才会导致问题。
这是我一直遵循
浏览 6提问于2021-06-29得票数 0
2回答
nodejs提取中异步函数外存储的数组
javascript、asynchronous、async-await、fetch-api
如何获得函数之外的failed数组的值？因为我需要这个数组作为其他函数的输入。
failed = [];
async function fetchFromApi(i) {
var ApiEndpoint = "https://jsonplaceholder.typicode.com/todos/" + i
var httpRequest = {
method: "GET"
}
var response = await fetch(ApiEndpoint, httpRequest);
if (!re
浏览 3提问于2021-11-10得票数 0
1回答
为什么foreach的行为是异步的？
javascript、node.js
我正在学习node.js，我对异步的工作方式感到困惑。我的理解是，Array.foreach是阻塞的，但是下面的代码不像预期的那样工作。
testfunc.ts：
export const testfunc = async (numArray: number[]) => {
let count = 0;
numArray.forEach(async (elem) => {
if (elem % 2 === 0) {
await new Promise((r) => setTimeout(r, 2000));
console.log(el
浏览 0提问于2022-03-17得票数 1
2回答
在useEffect中使用局部变量进行无序操作
reactjs、react-hooks
useEffect(() => {
let ignore = false;
async function fetchProduct() {
const response = await fetch('http://myapi/product/' + productId);
const json = await response.json();
if (!ignore) setProduct(json); }
fetchProduct();
return () => { ignor
浏览 4提问于2021-01-13得票数 0
回答已采纳
1回答
使用map、forEach和for循环将数组插入数据库时，数组的顺序为什么会不同
javascript
我有一个数组1,2,3,4,5，当插入到数据库I中时，除了接收结果外，数据库中的结果是1,2,3,4,5。但是只有循环for会给我一个预期的结果，map()和forEach()总是给我一个无序的数组，比如1,3,4,5,2或4,3,2,5,1等等。这是我的代码： arrayChild.map(async item => {
await this.repository.save(item)
});
arrayChild.forEach(async item => {
await this.repository.save(item)
});
for (let i
浏览 91提问于2021-11-01得票数 2
1回答
为什么此Firebase Cloud Function函数会产生错误“error : function crashed of request scope function invocation interrupted.‘”。
typescript、firebase、async-await、google-cloud-functions
我有一个Firebase云函数，每天股市开盘时触发一次。似乎在运行的时候会产生20%的错误。
错误提示：“错误:函数崩溃超出了请求作用域，函数调用被中断。”
export async function cleanIntraweek() {
console.log(`cleanIntraweek() started`)
const min_date_key = moment().tz("America/New_York").subtract(7, 'day').format()
console.log(`min_date_key: ${min_da
浏览 3提问于2019-07-20得票数 0
2回答
在异步读取函数外部保存JSON文件
json、fetch、async.js、request-promise
为什么async函数内的console.log(jsonData)以我想要的格式返回json对象，而异步函数外的console.log(jsondata)返回一条消息Promise { < pending> }。
如何保存我获取的JSON文件，以便在函数外部存储和读取它？
async function returnData() {
const response = await fetch(data_url)
if (!response.ok) {
const message = 'An error has occured!'
浏览 7提问于2020-10-30得票数 0
1回答
在jest中测试事件侦听器的最简单方法是什么？
javascript、node.js、mocking、jestjs、event-listener
我正在尝试测试下面的函数
getVal(process) {
test.on('data', async data => {
try {
for (const val of data) {
await process(val);
console.log('processed')
}} catch (e) {}
});
test.on('error', err => {
console.log('error', err)
浏览 0提问于2019-04-24得票数 3
回答已采纳
2回答
回调、承诺、异步等待在Javascript中--仍然令人困惑
javascript、angularjs、asynchronous、callback、promise
我对Javascript很陌生，我看到了很多视频，但我还是无法理解回调、承诺和异步等待的确切用法。在这里，我根据我的知识编写了一些小代码。
我的index.html：
<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
<meta charset="UTF-8">
<title>Index</title>
<script src='https://cdnjs.cloudflare
浏览 2提问于2018-01-21得票数 1
回答已采纳
3回答
使用异步函数作为EventEmitter侦听器有什么问题吗？
javascript、node.js、asynchronous、eventemitter
我正在编写一个Node.js v10应用程序，我希望在事件侦听器函数中使用await，所以我已经创建了一个async侦听器函数。基于下面的代码，它似乎是有效的。
但是，我很好奇，在使用async方法将一个EvenEmitter函数注册为一个EvenEmitter侦听器时，是否存在一个隐藏的缺点或一些我应该知道的东西？会有什么东西回来咬我吗？
const EventEmitter = require('events');
const emitter = new EventEmitter();
const syncListener = () => {
console.
浏览 0提问于2019-04-27得票数 5
回答已采纳
1回答
如何在JavaScript中返回“等待”变量？
javascript、mongodb、async-await、promise
我有以下的JS代码
async function readAtlasAll() {
return await MongoClient.connect(url, async function(err, db) {
var dbo = db.db("Users");
c = dbo.collection("List");
r = await c.find({}).toArray();
console.log(r);
return r;
});
}
console.log(readAtlasAll());
我不知道为什
浏览 2提问于2022-04-15得票数 0
回答已采纳
1回答
在Express中回调和等待性能
node.js、express、asynchronous、web、callback
人们说，async/await只是为承诺编写回调的另一种方式。但是，我觉得它们似乎是不可互换的；事实上，在Express中回调会更好，因为它会立即将结果返回给用户。这是正确的吗？
在下面的示例中，假设我们不关心doSomethingAsync()的结果，而是希望立即重定向。在这里，我们使用await。
router.get('/register', async (req, res) => {
res.redirect('/')
await doSomethingAsync()
console.log(1)
}
浏览 0提问于2018-04-06得票数 5
回答已采纳
1回答
Flutter:失败的断言：'file.absolute.existsSync()'：不是真
flutter、firebase、dart、ffmpeg、google-cloud-storage
在我的应用程序中，用户可以在群聊中向其他人发送文件。首先，用户使用麦克风录制一些音频。然后使用FFMPEG对文件进行修饰。然后，将文件上传到，如果成功，则在Firebase数据库中写入记录。
当用户记录一个长音频文件，然后按submit键时，我将得到下面的错误。FFMPEG似乎还没有完成file...but的处理，我以为我正确地使用了异步/等待来确保在继续之前完成这个处理？
'package:firebase_storage/src/reference.dart'：失败断言:第127行pos 12：'file.absolute.existsSync()'：不是
浏览 16提问于2022-08-09得票数 1
回答已采纳
2回答
返回当前处于承诺状态的值
javascript、reactjs、async-await
所以这更像是一个javascript问题而不是reactjs问题。我在reactjs中创建了一个受保护的路径。在这个过程中，我获取'/checkauth‘get请求来检查身份验证，它正确地将响应返回给我。但是，问题是，由于它是一个异步函数，返回该值需要时间，因此我的return语句会在前面执行。这是我有问题的代码。
const [auth, setAuth] = useState();
const checkAuthentication = async ()=>{
const res = await fetch('/checkauth', {
浏览 4提问于2022-05-22得票数 2
回答已采纳
2回答
如何维护Javascript生成的div顺序
javascript、html
我正在使用一个api，在该api中，我希望在HTML中显示生成的数据。为此，我使用JavaScript创建div元素。当显示信息时，它没有问题，但是每次我更新页面时，数据都会以不同的顺序显示它们。也就是说，如果我有3个div，那么首先出现的div将出现在最后，因此每次更新页面时顺序都会改变。
这是我的Javascript代码：
const cargar_noticias_recientes = async () => {
const noticias_recientes = document.querySelector('#pnl-body-content-card-re
浏览 12提问于2021-12-09得票数 1
回答已采纳
1回答
异步/等待与“每一次使用”相关的竞赛状态？
javascript、meteor、ecmascript-6、promise、async-await
我有以下异步函数：
async function createDemoContent({ orgId, userId }) {
const createTag = promisifyMethod(_createTag);
const tags = {};
/* ... */
[
'marketing',
'insights',
'customer-centric',
'email marketing',
'click through rate',
&
浏览 4提问于2017-03-24得票数 1
回答已采纳
1回答
函数返回[对象承诺]
javascript
我试图返回第一个函数的值，并在第二个函数上作为变量使用，但是它显示了这个[object Promise]。
addEventListener("fetch", event => {
event.respondWith(fetchAndStream(event.request))
});
async function handleRequest(request) {
var uri = request.url.replace(/^https:\/\/.*?\//gi, "/");
return uri;
}
async fun
浏览 4提问于2022-06-02得票数 -1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
