【前端自学(7)】Promise基础

---

1 Promise

• Promise.all 和 Promise.race

const promiseClick1 = () => {
  let p = new Promise((resolve, reject)=>{
    setTimeout(()=> {
      var num = Math.ceil(Math.random() * 10); //生成1-10的随机数
      console.log('随机数1:', num)
      if (num <= 10) {
        resolve(num);
      }
      else {
        reject('error');
      }
    }, 4000);
  })
  return p
}

const promiseClick2 = () => {
  let p = new Promise((resolve, reject)=> {
    setTimeout(()=> {
      var num = Math.ceil(Math.random() * 10);
      console.log('随机数2:', num)
      if (num <= 10) {
        resolve(num);
      }
      else {
        reject('error');
      }
    }, 2000);
  })
  return p
}
const promiseClick3 = () => {
  let p = new Promise((resolve, reject)=> {
    setTimeout(()=>{
      var num = Math.ceil(Math.random() * 10);
      console.log('随机数3:', num)
      if (num <= 10) {
        resolve(num);
      }
      else {
        reject('error');
      }
    }, 3000);
  })
  return p
}

Promise
  .all([promiseClick1(), promiseClick2(), promiseClick3()])
  //Promise.all接收一个数组对象
  .then((results) => {
    console.log(results); //顺序是[随机数1 随机数2 随机数3]
  }).catch((err) => {
    console.log(err)
  })

//一个可能的控制台输出
/*随机数2: 1
随机数3: 10
随机数1: 9
[ 9, 1, 10 ]*/

//将上面的Promise.all替换成Promise.race
Promise
  .race([promiseClick1(), promiseClick2(), promiseClick3()])
  .then((results) => {
    console.log('成功', results);
  }, (reason) => {
    console.log('失败', reason);
  });
//一个可能的控制台输出
/*随机数2: 10
成功 10
随机数3: 3
随机数1: 8*/

• async await

//最简单使用
const sleep = (time) => {
  return new Promise((resolve) => {
    console.log(1)
    setTimeout(resolve, time)
  })
}

const test = async (time) => {
  await sleep(time)
  console.log(2)
}

test(2000)

• 最基本的Promise链式调用

const sleep = (time) => {
  return new Promise((resolve) => {
    console.log(1)
    setTimeout(() => {
      resolve(time)
    }, time)
  })
}

const nosleep = (time) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('nosleep!')
    }, time)
  })
}

sleep(2000).then((data) => {
  console.log(data)
  return sleep(3000)
}).then((data) => {
  console.log(data)
  return nosleep(4000)
}).then((data) => {
  console.log(data)
}).catch((err) => {
  console.log(err)
})

---

2 总结

以上是Promise基础知识