promise用法解析

Promise的理解

• Promise是对异步操作的一种解决方案，一般情况下，如果有异步操作，就需要使用Promise对这个异步操作进行封装
• 使用Promise后可以使代码看起来更加优雅并且易于维护

使用定时器模拟一个异步请求

• Promise接收一个函数作为参数，而这个函数又接收两个参数，这两个参数分别为resolve和reject
  • resolve在异步操作被成功执行时调用，而reject在异步操作执行失败时调用
  • resolve和reject都是一个函数，它们都接收网络请求传过来的数据
  • 对这个数据的具体操作分别放在then()和catch()中执行

new Promise((resolve, reject) => {
    setTimeout(() => {
        // 成功时调用resolve     
        resolve('你好')
         //失败时调用reject
        reject('error message')
    }, 1000)
}).then((data) => {
    console.log(data) //你好
}).catch((err) => {
    console.log(err)
})

• 传入catch中的函数可以在then中同时定义

new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('你好')
        reject('error message')
    }, 1000)
}).then((data) => {
    console.log(data)
}, (err) => {
    console.log(err)
})

Promise的三种状态

• pending：等待状态
  • 比如正在进行网络请求，或者定时器还没到时间
• fulfill：满足状态
  • 当我们主动调用resolve()时，就处于该状态，此时回调then
• reject：拒绝状态
  • 当我们主要调用reject()时，就处于该状态，此时回调catch

Promise的链式调用

• 同时执行多个异步操作，在then()方法内部返回new Promise((resolve) => {resolve(res + '111')})
• new Promise((resolve) => {resolve(res + '111')}) 可简写成Promise.resolve(res + '111')
  • 而Promise.resolve(res + '111') 还可以进一步简写为res + '111'

new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('aaa')
    }, 1000)
}).then(res => {
    console.log(res, '第一层的10行代码')
    // return new Promise((resolve) => {resolve(res + '111')})
    return res + '111'
}).then(res => {
    console.log(res, '第二层的10行代码')
    return Promise.reject('err message')
}).then(res => {
    console.log(res, '第三层的10行代码')
}).catch(err => {
    console.log(err)
})

Promise中的all方法

• 如果想同时接收到几个异步操作的数据，可以选择调用Promise的all方法，将需要执行的异步操作放入all()方法中执行
• all()方法接收一个数组，then()方法接收的也是一个数组

Promise.all([new Promise(resolve => {
        setTimeout(() => {
            resolve('result1')
        }, 2000)
    }),
    new Promise(resolve => {
        setTimeout(() => {
            resolve('result2')
        }, 1000)
    })
]).then(results => {
    console.log(results[0], results[1])
})