Promise 基础用法

2018-03-24 本文已影响0人 alipy_258

Promise ，为什么会出现它，Promise 的出现，解决了哪些问题呢？

解决了回调地狱（嵌套）的问题，不会导致难以维护。
解决同步&异步的返回结果，并且按照顺序返回

大家应该都知道，在 JavaScript 的世界里，所有代码的执行都是单线程操作的。由于这个问题，导致 JavaScript 所有请求操作都必须异步执行。

Promise 本意是承诺，在程序中的意思就是承诺我过一段时间后给你返回一个结果。什么时候会用到（多一段时间）？那就是（异步操作），异步是指过了很长时间后才会返回结果。比如网络请求、读取本地文件等～

基本用法

首先，我们去控制台打印一下 Promise，如图

image.png

很直观的看出来，Promise 是一个构造函数

Promise 对象拥有两种实例方法（prototype）：then() 和 catch() 。
Promise 还拥有四个静态方法，分别是：all、race、reject、resolve。

我们粘一段代码，小白如何调用 Promise

// 引入 Promise 模块
let Promise = require('promise')
let p = new Promise(function(resolve, reject){
    // 如果同时调用成功和失败的方法，那么执行顺序就是：谁在前，就调谁。
    reject(100);
    resolve(1);
})
// then 接受两个回调函数，一个是成功的回调，一个是失败的回调
p.then(function(data){
    console.log('data', data)
},function(err){
    console.log('err', err)
})
// 控制台打印的结果为：data 100

接下来我们来看看 Promise 有哪些 API

then() 方法

从例子中可以看出 then 方法可以接收两个参数，且通常都是函数。第一个参数是成功的回调，第二个参数是失败的回调。这两个参数都会将回调存放在对应的数组内，当 promise 状态改变之后，调用成功或者失败的数组即可

then 方法可以链式调用，与 jquery 不同，jquery 的链式调用靠的是返回的 this，可惜的是， promise 不能返回 this，promise 实现链式调用靠的是返回一个新的 Promise

let p = new Promise(function(resolve, reject){
    resolve()
})
// p2 和 p 不是一个东西，如果是，就会走成功了。就不会走失败了
let p2 = p.then(function(){
    throw new Error('错误')
})
p2.then(function(data){
    console.log(data)
},function(err){
    console.log(err)
})
// 控制台打印结果：Error: 错误

promise 实例可以多次 then，当成功后，会将 then 中的成功方法按顺序执行

let p = new Promise(function(resolve, reject){
    // 定时器来异步回调
    setTimeout(function(){
        resolve(1000)
    }, 1000)
})
p.then(function(data){
    console.log('data', data)
},function(err){
    console.log('err', err)
})
p.then(function(data){
    console.log('data', data)
},function(err){
    console.log('err', err)
})
// 打印结果：
data 1000
data 1000

catch() 方法

它有两个作用：

可以和 then 的第二个参数一样，用来指定 reject 的回调
执行 then 第一个回调参数时，如果抛出异常，会直接走 catch 方法

let p = new Promise(function(resolve, reject){
    reject(new Error('error'))
})
// then 没有写第二个 reject 回调
p.then(function(data){
    console.log(data)
}).catch(function(reasone){
    console.log(reasone)
})
// 打印结果： Error: error

resolve() & reject() 方法

Promise.resolve() 相当于创建了一个立即 resolve 对象，使得 promise 对象直接 resolve。

Promise.resolve(5).then(function(data){
    console.log(data)
})
// 打印结果：5

Promise.reject() 相当于创建了一个立即 reject 对象，使得 promise 对象直接 reject，并把 error 传到 catch 函数中

Promise.reject(new Error('error')).catch(function(err){
    console.log(err)
})
// 打印结果：Error: error

all() 方法

Promise.all() 接收的参数是 promise 对象组成的数组，并返回新的 promise 对象。

Promise.all([Promise.resolve(100),Promise.resolve(200)]).then(function(data){
    console.log('成功：',data)
},function(err){
    console.log(err)
})
// 打印结果：成功： [ 100, 200 ]

当数组中有一个 reject 时，会改变状态，并执行错误状态

Promise.all([Promise.resolve(100),Promise.reject(new Error('error'))]).then(function(data){
    console.log('成功：',data)
},function(err){
    console.log(err)
})
// 打印结果：Error: error

race() 方法

Promise.race() 同样接收的参数是 promise 对象组成的数组，并返回新的 promise 对象。与 Promise.all() 不同的是只要第一个数组成功了。就算成功。如果第一个失败了。就算失败

// 成功的状态，第一个数组对象，成功了就不会执行下一个数组对象
Promise.race([Promise.resolve(100),Promise.reject(new Error('error'))]).then(function(data){
    console.log('成功：',data)
},function(err){
    console.log(err)
})

// 失败的状态，第一个数组对象失败，就会报错，后面也不执行
Promise.race([Promise.reject(new Error('error')),Promise.resolve(100),Promise.reject(new Error('error'))]).then(function(data){
    console.log('成功：',data)
},function(err){
    console.log(err)
})

友情链接

Promise 源码实现：https://www.jianshu.com/p/7754f0182c2e
Promise 对象：http://es6.ruanyifeng.com/#docs/promise