回调函数异步问题

Question

const images = res.tempFiles.map(async file => {
          // let base64Image
          await Taro.getFileSystemManager().readFile({
            filePath: file.path,
            encoding: 'base64',
            success: resultBase => {
              console.log(1)
              //base64Image = resultBase.data
            }
          })
          console.log(2)
          return {
            type: 'image',
            url: file.path,
            size: file.size,
          }
        })

问题1，为什么还是先打印2呢。
问题2，怎么样才能先打印1？

Answer 1

await 等的是 Promise ，而不是回调函数。

readFile 如果返回不是 Promise ，那么不会有任何等待操作。

所以，可以把回调包装成一个 Promise:

          // let base64Image
          await new Promise((resolve) => {
              Taro.getFileSystemManager().readFile({
                filePath: file.path,
                encoding: 'base64',
                success: resultBase => {
                  console.log(1)
                  //base64Image = resultBase.data
                  resolve();
                }
              });
          });

Answer 2

const images = await Promise.all(res.tempFiles.map(file => new Promise((resolve, reject) => {
    Taro.getFileSystemManager().readFile({
        filePath: file.path,
        encoding: 'base64',
        success: () => resolve({
            type: 'image',
            url: file.path,
            size: file.size,
        }),
    });
}));

Answer 3

尝试一下这样的写法是否有效

const images = res.tempFiles.map(async file => {
          // let base64Image
          await Taro.getFileSystemManager().readFile({
            filePath: file.path,
            encoding: 'base64',
            success: resultBase => {
              console.log(1)
              //base64Image = resultBase.data
              console.log(2)
              return {
                type: 'image',
                url: file.path,
                size: file.size,
              }
            }
          })
          
        })