介绍

首先我们都经常听到promise，那么promise是什么？

Promises/A+ 规范写明了，只要规范的任何一个object或者function，有.then方法都算是promise.

官网解释

promise的作用？

1.解决回调地狱

链式调用是一大特点

// 异步函数1
function asyncFunction1(callback) {
  setTimeout(() => {
    console.log("异步函数1执行完成");
    callback();
  }, 1000);
}

// 异步函数2
function asyncFunction2(callback) {
  setTimeout(() => {
    console.log("异步函数2执行完成");
    callback();
  }, 1000);
}

// 异步函数3
function asyncFunction3(callback) {
  setTimeout(() => {
    console.log("异步函数3执行完成");
    callback();
  }, 1000);
}
asyncFunction1(() => {
  asyncFunction2(() => {
    asyncFunction3(() => {
          console.log("所有异步函数执行完成");
    });
  });
});

使用proimse解决

// 异步函数1
function asyncFunction1() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("异步函数1执行完成");
      resolve();
    }, 1000);
  });
}

// 异步函数2
function asyncFunction2() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("异步函数2执行完成");
      resolve();
    }, 1000);
  });
}

// 异步函数3
function asyncFunction3() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("异步函数3执行完成");
      resolve();
    }, 1000);
  });
}
// 执行异步函数
asyncFunction1()
  .then(() => asyncFunction2())
  .then(() => asyncFunction3())
  .then(() => {
    console.log("所有异步函数执行完成");
  });

2.解决异步函数获取返回值问题

在node使用fs异步读取问文件内容，我们需要等待其返回结果抛出，则需要promnise处理。

// 场景1
function readFile(filePath):Promise<any> {
  return new Promise((resolve, reject) => {
    fs.readFile(filePath, "utf8", (err, data) => {
      if (err) {
        reject(err);
      } else {
        resolve(data);
      }
    });
  });
}
// 可以使用await 等待返回结果
const fileData=  await readFile("path");
// filedData 就是文件读取结果
console.log(fileData)

// 场景2
// 根据image路径加载图片失败,和成功设置不同状态返回
function preloadImage (path):Promise<any> {
  return new Promise(function (resolve, reject) {
    const image = new Image();
    image.onload  = resolve;
    image.onerror = reject;
    image.src = path;
  });
};

// 场景3
// 我们在文件hash切片的时候也会需要该问题
// 因为readAsArrayBuffer本身是异步的,我们又需要返回结果,所以可以使用promise进行封装
function hashFile(blob:Blob):Promise<string>{
    return new Promise((resolve, reject) => {
        const fileReader = new FileReader();
        fileReader.onload = (e) => {
            const spark = new SparkMD5.ArrayBuffer();
            spark.append(e.target?.result as ArrayBuffer);
            const hash = spark.end();
            resolve(hash)
        }
        fileReader.onerror = (e) => {
            reject(e)
        }
        fileReader.readAsArrayBuffer(blob)
    })
}

总结一下promise

其实promise用处还有很多，这里只是列举了几个常见的场景,还有个常用all方法。

// ps:注意 Promise.all() 接收一个数组，数组中可以是Promise对象，也可以是其他值，只有Promise对象才会等待其状态改变，其他值则会立即执行。
Promise.all([])