函数内如何返回 函数内部异步方法赋值的变量？

Question

 const list = [
        "./img.png",//本地存在可加载成功
        "//be-fe.github.io/static/images/iSlider-card/10.jpg",//加载图片失败
        "./load.gif",//本地存在可加载成功
        "//be-fe.github.io/static/images/iSlider-card/12.jpg",//加载图片失败
        null,//无图片
        "//be-fe.github.io/static/images/iSlider-card/17.jpg",//加载图片失败
        ];    
        const placeholder = '默认占位图';
        const loadError = '加载失败图';
        const gen = () => {
            let endSrc = placeholder;
            let html = '';
            list.forEach((ele) => {
                if(ele){
                    const image = new Image();
                    image.src = ele;
                    image.onload = () => {
                        endSrc = ele;
                    };
                    image.onerror = () => {
                        endSrc = loadError;
                    };
                }
               html += `<p>${endSrc}</p>`;
            });
            // 我期望取得html 、onload 和onerror后的值[load和error事件是异步的 所以目前获取不到]
            return html;
        }
        $("body").append(gen())

Answer 1

const list = [
    "./img.png",//本地存在可加载成功
    "//be-fe.github.io/static/images/iSlider-card/10.jpg",//加载图片失败
    "./load.gif",//本地存在可加载成功
    "//be-fe.github.io/static/images/iSlider-card/12.jpg",//加载图片失败
    null,//无图片
    "//be-fe.github.io/static/images/iSlider-card/17.jpg",//加载图片失败
];
const placeholder = '默认占位图';
const loadError = '加载失败图';
const gen = () =>
    list.map((ele) => new Promise(resolve => {
        function getsrc(src) {
            resolve(`<p>${src}</p>`)
        }
        if(ele){
            const image = new Image();
            image.src = ele;
            image.onload = () =>getsrc(ele)
            image.onerror = () => getsrc(loadError)
        }else {
            getsrc(placeholder)
        }
    }))
Promise.all(gen()).then(htmlArr =>  $("body").append(htmlArr.join('')));

Answer 2

用Promise
https://developer.mozilla.org...

Answer 3

const gen = () => {
  return Promise.all(list.map(ele => {
    if (ele) {
      return new Promise(resolve => {
        const image = new Image();
        image.src = ele;
        image.onload = () => {
          resolve(`<p>${ele}</p>`)
        };
        image.onerror = () => {
          resolve(`<p>${loadError}</p>`)
        };
      })
    } else {
      return Promise.resolve(`<p>${placeholder}</p>`)
    }
  })).then(arr => arr.join(''));
}
gen().then(html => {
  $("body").append(html)
})

Answer 4

回调法

const gen = callback => {
    let endSrc = placeholder;
    let html = '';
    list.forEach(ele) {
        if (ele) {
            const image = new Image();
            image.src = ele;
            image.onload = () => {
                endSrc = ele;
            };
            image.onerror = () => {
                endSrc = loadError;
            };
        }
        html += `<p>${endSrc}</p>`;
    });
    callback(html);
}
gen(html => {
    $("body").append(html);
})

Promise大法

const gen = () => {
    return new Promise((res, rej) => {
        let endSrc = placeholder;
        let html = '';
        list.forEach(ele) {
            if (ele) {
                const image = new Image();
                image.src = ele;
                image.onload = () => {
                    endSrc = ele;
                };
                image.onerror = () => {
                    endSrc = loadError;
                };
            }
            html += `<p>${endSrc}</p>`;
        });
        res(html);
    }
}
gen()
.then(html => {
    $("body").append(html);
})

还有asnyc await等