循环内的承诺链

Question

I'm new in Javascript. I have a problem with promise chain. I'm trying to execute a chain promise inside a for loop and I want an output like this:

one two three -------- one two three -------- one two three

But I always got an output like this

one two ------- one two ------- one two ------- three three three

This is my code:

test(item: any, i: number){

    this.filePath = item.rows.item(i).filepath;
    this.fileName = this.filePath.substr(this.filePath.lastIndexOf('/') + 1);
    this.imgePath = this.filePath.replace(this.fileName, "");


    console.log(this.filePath)
    console.log(this.fileName)
    console.log(this.imgePath)

    const one = new Promise<boolean>(resolve => {
        this.readfile.checkFile(this.imgePath, this.fileName).then(isExists => {
            console.log("one")
            resolve(isExists);
        })
    });

    const two = one.then(isExists => {
        console.log("two")
        if (isExists) {
            return this.readfile.readAsDataURL(this.imgePath, this.fileName).then(res =>{
                return res;
            })
        }
        else {
            console.log("not exists")
        }
    })

    const three = two.then(res => {
        console.log("three")
        this.base64Image.push(res);
    })
}

process(item: any, rows: number) {
    let prom: Promise<void>[] = [];

    for (let i = 0; i < rows; i++) {
        this.test(item,i);
        console.log(i,"loop")
    }
}

Can anyone help me? I spend 8hrs and still I can't figure it out. Thanks!

Answer 1

You are not waiting for the promise to complete before executing next item in the loop.

for loop shouldn't be used with asynchronous code unless you want them to be executed paralelly or you are using async await .

Changes needed:

Your test method should return promise, so that we can track when the promises are fulfilled.

You need to wait for the promise returned by previous test method to be fulfilled before executing next test method.

test(item: any, i: number){

    this.filePath = item.rows.item(i).filepath;
    this.fileName = this.filePath.substr(this.filePath.lastIndexOf('/') + 1);
    this.imgePath = this.filePath.replace(this.fileName, "");


    console.log(this.filePath)
    console.log(this.fileName)
    console.log(this.imgePath)

    const one = new Promise<boolean>(resolve => {
        this.readfile.checkFile(this.imgePath, this.fileName).then(isExists => {
            console.log("one")
            resolve(isExists);
        })
    });

    const two = one.then(isExists => {
        console.log("two")
        if (isExists) {
            return this.readfile.readAsDataURL(this.imgePath, this.fileName).then(res =>{
                return res;
            })
        }
        else {
            console.log("not exists")
        }
    })

    const three = two.then(res => {
        console.log("three")
        this.base64Image.push(res);
    })

    return three;
}

process(item: any, rows: number) {
    let prom = Promise.resolve();

    for (let i = 0; i < rows; i++) {
        prom = prom.then(() => this.test(item,j));
        console.log(i,"loop")
    }
}