Promise 简单理解

我的理解promise是将异步处理转换为同步处理的一种解决方案,可以通过下面代码理解下。

不返回结果的Promise

var sleep = function (index) {
    setTimeout(() => { // 模拟异步处理
        console.log(`sleep ${index}`)
    }, 500 * index);
}

var fn = function () {
    console.log('start')
    sleep(1);   // 这里是异步处理函数
    console.log('end')
}

fn()

我们期望的结果是

start
sleep 1
end

但因为sleep是异步处理(延迟了n秒后才执行),最后的执行结果是

start
end
sleep `

现在使用promise改造下,将sleep函数返回一个Promise,然后使用调用这个Promise对象的then方法。

var sleep = function (index) {
  return new Promise(function (resolve, reject) {
    setTimeout(() => {
      console.log(`sleep ${index}`)
      resolve()
    }, 500 * index);
  })
}

var fn = function () {
  console.log('start')
  
  sleep(1).then(() => {
    console.log('end')
  });

}

fn()

程序执行结果与预期结果一致。
image.png

返回结果的Promise

resolve可以带一些参数,这些参数可以在then中访问,所以返回结果可以通过resolve返回。

var sleep = function (index) {
  return new Promise(function (resolve, reject) {
    setTimeout(() => {
      const result = `sleep ${index}`
      resolve(result)
    }, 500 * index);
  })
}

var fn = function () {
  console.log('start')
  sleep(1).then((info) => {
    console.log(info)
    console.log('end')
  });

}

fn()

函数执行结果与预期结果一致。

使用 await 代替 then 方法

await的意思是阻塞,await 必须放在 以 async 装饰的函数中,如下面形式

async function fn (){
    await promisefn();
}

现在将上面使用then的promosi改造成使用await形式。

var sleep = function (index) {
  return new Promise(function (resolve, reject) {
    setTimeout(() => {
      const result = `sleep ${index}`
      resolve(result)
    }, 500 * index);
  })
}

var fn = async function () {
  console.log('start')
  const info = await sleep(1)
  console.log(info)
  console.log('end')
}

fn()

haight
1 声望1 粉丝