仅在较早的一组具有运行槽后才执行一组新的提取

Question

我正在尝试从 API 获取实时摄像头源网页的图像。问题是，对于定时获取请求，最终 API 中的一个响应花费了很长时间，以至于代码错误。该页面有多个摄像头源，它们通过 cameraObjects[] 数组中所有摄像头的循环同时刷新。 image() 函数应响应一个解析，然后将其收集到数组 promises[].

简而言之，当 updateImages() 中循环调用的所有 image() 函数都已运行时，我需要运行 refreshImages() 函数。我才刚开始写代码...

class camera {
    constructor(Uuid,url,username,password) {
        this.Uuid = Uuid;
        this.url = url;
        this.username = username;
        this.password = password;
    }
    image() {

        let uuid = this.Uuid
        let url = this.url
        let username = this.username
        let password = this.password
        let headers = new Headers();
        let authString = `${username}:${password}`; 
        headers.set('Authorization', 'Basic ' + btoa(authString));
        let imageUrl = url + uuid
        fetch(imageUrl,{method: 'GET', headers: headers})
            .then(response => response.blob())
            .then(image => {
                console.log(image);
                var reader = new FileReader();
                reader.readAsDataURL(image);
                reader.onloadend = function() {
                        var base64data = reader.result;                
                        let img = document.getElementById("camera_" + uuid);
                        img.src = base64data;
                        return new Promise(function(resolve) {
                                resolve(promise);
                        })

                }
            })
    }
        
} 
function updateImages() {
    cameraObjects = listOfCameraObjects();
    let promises = [];
    for(let e = 0; e < cameraObjects.length; e++) {
        let promise = new Promise(cameraObjects[e].image())
        promises.push(promise)
    }
    Promise.all(promises)
        .then(() => { 
            refreshImages();
        })
}
function refreshImages() {
    let currentInterval = getInterval();
    refrehInterval = setTimeout(updateImages, currentInterval);
    console.log(refrehInterval)
    
}

Answer 1

Promises 有一些地方你做错了 -

return new Promise(function(resolve) {
    resolve(promise);
})

虽然 return Promise.resolve(promise) 是相同的 - 但在您的代码中，promise 是什么？未在该范围内的任何地方声明 - 同样，作为事件处理程序 (onloadend) 中的最后代码，它毫无意义，因为从事件处理程序返回值是无意义的

let promise = new Promise(cameraObjects[e].image())

这不是你构建承诺的方式......承诺构造函数的参数需要是一个函数，而不是调用函数的结果（除非 returns 一个函数，当然，但它没有）

我建议您或许阅读一些 docs 关于如何构建 Promise 以及如何使用它们的内容

与此同时，我相信这段代码会做你想做的事

class camera {
    constructor(Uuid,url,username,password) {
        this.Uuid = Uuid;
        this.url = url;
        this.username = username;
        this.password = password;
    }
    image() {
        const headers = new Headers();
        const authString = `${this.username}:${this.password}`; 
        headers.set('Authorization', 'Basic ' + btoa(authString));
        const imageUrl = this.url + this.Uuid;
        
        return fetch(imageUrl, {method: 'GET', headers: headers})
        .then(response => response.blob())
        .then(image => new Promise((resolve, reject) {
            const reader = new FileReader();
            reader.readAsDataURL(image);
            reader.addEventListener('loadend', () => {
                const img = document.getElementById("camera_" + uuid);
                img.src = reader.result;
                resolve();
            });
            reader.addEventListener('error', reject);
        }));
    }
        
} 
function updateImages() {
    Promise.all(listOfCameraObjects().map(cam => cam.image()))
    .then(refreshImages);
}
function refreshImages() {
    let currentInterval = getInterval();
    refrehInterval = setTimeout(updateImages, currentInterval);
    console.log(refrehInterval)
}

仅在较早的一组具有运行槽后才执行一组新的提取

Execute a new set of fetches only after the earlier set has ran trough

javascript

oop

fetch

promise

仅在较早的一组具有 运行 槽后才执行一组新的提取

Execute a new set of fetches only after the earlier set has ran trough

javascript

oop

fetch

promise

仅在较早的一组具有运行槽后才执行一组新的提取