Promise

1.Promise

1.1 什么是Promise？

ES6中一个非常重要和好用的特性就是Promise

Promise是异步编程的一种解决方案。

• 那什么时候我们会来处理异步事件呢?

  • 一种很常见的场景应该就是网络请求了。
  • 我们封装一个网络请求的函数，因为不能立即拿到结果，所以不能像简单的3+4=7一样将结果返回。
  • 所以往往我们会传入另外一个函数，在数据请求成功时，将数据通过传入的函数回调出去。
  • 如果只是一个简单的网络请求，那么这种方案不会给我们带来很大的麻烦

• 但是，当网络请求非常复杂时，就会出现回调地狱。

1.2 网络请求的回调地狱

• 当我们需要通过一个url1从服务器加载一个数据data1 , data1中包含了下一个请求的url2

• 我们需要通过data1取出url2，从服务器加载数据data2, data2中包含了下一个请求的url3

• 我们需要通过data2取出url3，从服务器加载数据data3,data3中包含了下一个请求的url4

• 发送网络请求url4，获取最终的数据data4

$.ajax('url1', function (data1) {
    $.ajax(data1['url2'], function (data2) {
        $.ajax(data2['url3'],function (data3) {
            $.ajax(data3['url4'],function (data4) {
                console.log(data4);
            })
        })
    })
})

上面的代码有什么问题吗?

• 正常情况下，不会有什么问题，可以正常运行并且获取我们想要的结果。
• 但是，这样的代码难看而且不容易维护。
• 我们更加期望的是一种更加优雅的方式来进行这种异步操作。

如何做呢? 就是使用Promise。

• Promise可以以一种非常优雅的方式来解决这个问题。

1.3 定时器的异步事件

• 首先来看看Promise最基本的语法。

• 这里，我们用一个定时器来模拟异步事件∶

  • 假设下面的data是从网络上1秒后请求的数据
  • console.log就是我们的处理方式。

setTimeout(function () {
    let data = 'Hello World'
        console.log(content);
}，1000)

• 这是我们过去的处理方式，我们将它换成Promise代码

new Promise((resolve,reject) => {
    setTimeout(function () {
        resolve('Hello World')
            reject('Error Data')
    }，1000)
}).then(data => {
    console.log(data);
}).catch(error => {
    console.log(error);
})

• 首先，下面的Promise代码明显比上面的代码看起来还要复杂

• 其次，下面的Promise代码中包含的resolve、reject、then、

  catch都是些什么意思?

1.4 定时器异步事件解析

• new Promise很明显是创建一个Promise对象

• 小括号中（(resolve, reject) => {}) 也很明显就是一个函数，而且用的是之前学习过的箭头函数。

  • 在创建Promise时，传入的这个箭头函数是固定的
  • resolve和reject它们两个也是函数，通常情况下，会根据请求数据的成功和失败来决定调用哪一个。
  • 如果是成功的，那么通常会调用resolve(messsage)，这个时候，后续的then会被回调。
  • 如果是失败的，那么通常会调用reject(error)，这个时候，后续的catch会被回调。

这就是Promise最基本的使用了。

1.5 Promise三种状态

• 当开发中有异步操作时,就可以给异步操作包装一个Promise、

  • 异步操作之后会有三种状态

• pending :等待状态，比如正在进行网络请求，或者定时器没有到时间。

• fulfill:满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then()

• reject:拒绝状态，当我们主动回调了reject时，就处于该状态，并且会回调.catch)

new Promise((resolve，reject) => {
    setTimeout ( function () {
        // resolve( 'Hello World ')
        reject( 'Error Data')
    }，1000)
}).then(data => {
    console.log(data);
}, error => {
console.log(error);
})

1.6 Promise的链式调用

• 在看Promise的流程图时，发现无论是then还是catch都可以返回一个Promise对象。

• 所以，代码其实是可以进行链式调用的:

• 这里直接通过Promise包装了一下新的数据，将Promise对象返回了

  • Promise.resovle():将数据包装成Promise对象，并且在内部回调resolve()函数
  • Promise.reject()∶将数据包装成Promise对象，并且在内部回调reject()函数

// 链式调用的代码
new Promise((resolve, reject) => {
    setTimeout(function () {
        resolve( 'Hello World ')
    },1000)
}).then(data => {
    console.log(data);// => Hello World
    return Promise.resolve(data + '111')
}).then(data => {
    console.log(data);// => Hello World111
    return Promise.resolve(data + '222')
}).then(data => {
    console.log(data);// => Hello world111222
    return Promise.reject(data + 'error')
}).then(data => {
    console.log(data);// 这里没有输出,这部分代码不会执行
    return Promise.resolve(data + '333')
}).catch(data => {
    console.log(data);// => Hello World111222error
    return Promise.resolve(data + '444')
}).then(data => {
    console.log(data);// =>Hello world111222error444
})

1.7 链式调用简写

简化版代码︰

• 如果希望数据直接包装成Promise.resolve，那么在then中可以直接返回数据

• 注意下面的代码中，我讲return Promise.resovle(data)改成了return data

• 结果依然是一样的

// 链式调用的简便写法
new Promise((resolve,reject) => {
    setTimeout(function () {
        resolve( 'Hello world')
    },1000)
}).then(data => {
    console.log(data);// => Hello World
    return data + '111'
}).then(data => {
    console.log(data);// => Hello World111
    return data + '222
}).then(data => {
    console.log(data);// => Hello world111222
   return Promise.reject(data + 'error')
}).then(data => {
    console.log(data);//这里没有输出,这部分代码不会执行
    return data + '333'
}).catch(data => {
    console.log(data);// => Hello World111222error
    return data + '444'
}).then(data => {
    console.log(data);// => Hello World111222error444
})