初识promise

200 阅读1分钟

promise是异步编程的一种解决方案,解决回调地狱 下面简单举个例子:定时器异步事件

运用promise链式调用(链式编程的思想)

  // 什么情况下会用到Promise?
  // 一般情况下是有异步操作时,使用Promise对这个异步操作进行封装
  // new -> 构造函数(1.保存了一些状态信息  2.执行传入的函数)
  // 在执行传入的回调函数时, 会传入两个参数, resolve, reject.本身又是函数
  new Promise((resolve, reject) => {
    setTimeout(() => {
      // 成功的时候调用resolve
      // resolve('Hello World')

      // 失败的时候调用reject
      reject('error message')
    }, 1000)
  }).then((data) => {
    // 1.100行的处理代码
    console.log(data);
  }).catch((err) => {
    console.log(err);
  })

另外一种写法,我们可以看到其实就是箭头函数只有一个参数时括号可以省略哈哈~~

 new Promise((resolve, reject) => {
    setTimeout(() => {
      // resolve('Hello Vuejs')
      reject('error message')
    }, 1000)
  }).then(data => {
    console.log(data);
  }, err => {
    console.log(err);
  })

下面这三种写法意思一样,但是最后一种最简洁

reject同理,也可以简写,只不过遇到reject的时候跳到.catch()

.then(res => {
     console.log(res, '第二层的10行处理代码');
  
     return new Promise(resolve => {
       resolve(res + '222')
     })
   })
.then(res => {
    console.log(res, '第二层的10行处理代码');

    return Promise.resolve(res + '222')
  })

它内部会对res+'222'进行一个promise的包装,把它放在resolve里面

.then(res => {
    console.log(res, '第二层的10行处理代码');

    return res + '222'
  })

还有一种方式,可以不用reject,直接手动抛出异常,如下图

promise的all方法(resove里面可以是数组,字符串,对象)

Promise.all([
    new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({name: 'why', age: 18})
      }, 2000)
    }),
    new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({name: 'kobe', age: 19})
      }, 1000)
    })
  ]).then(results => {
    console.log(results);
  })