day8 Promise

引入

回调地狱

• 回调函数中 嵌套 其他回调函数 例子: 多个文件依次读取

• 解决方法: 使用ES6 中的 Promise, 来解决 回调地狱的问题

基本概念

1. Promise 是一个 构造函数, 既然是构造函数 就可以new Promise() 得到一个 Promise 的实例
2. 在 Promise 上, 有两个函数 resolve(成功后的回调) 和 reject(失败后的回调)
3. 在 Promise 构造函数 Prototype 属性上, 有.then() 方法
4. Promise 表示一个 异步操作, 每当我们new 一个Promise 的实例, 就表示一个异步操作
5. 异步操作有两种状态
   • 状态1: 异步执行成功, 需要调用 resolve 返回结果
   • 状态2: 异步执行失败, 需要调用 reject 返回结果
   • 由于异步操作无法使用 return 把操作结果返回, 这时候, 只能使用回调函数 来把结果(成功/失败)返回.
6. 我们可以在 new 出来的 Promise 实例上, 调用 .then()方法, **[预先] **为这个 Promise异步操作, 指定 成功 和 失败 回调函数.

形式上 和 具体的 异步操作的区别

形式上 的异步操作: 我们知道它是一个异步操作, 但是具体做什么事情, 目前还不清楚

var promise = new Promise()

具体的 的异步操作: 使用 function 指定一个具体的 异步操作

var promise = new Promise(function(){
    // 这个 fun 内部写的就是具体的异步操作
})

Promise实例 只要被创建 就会立即执行里面的异步方法

• 每当 new 一个 Promise 实例的时候, 就会执行 异步操作中的代码
• 也就是说, new的时候, 除了能够得到一个 Promose 实例之外, 还会立即调用 我们传递的 function, 并执行function 中的 异步操作代码

通过 .then() 指定成功 和 失败的回调

const p = new Promise(function(res, rej){
    // 成功返回res 失败返回rej
    res(data)
    rej(err)
})

p.then(function(data){
    console.log(data)
},function(err){
    console.log(err)
})

注意: 通过.then 指定回调函数的时候, 成功的回调 必须传, 失败的回调 可以省略不传

Promise 正确使用方式

image

需求: 依次读取文件1 文件2 文件3

捕获异常的两种方式

1.Promise 执行失败, 但是不影响后续, 此时, 我们可以单独为 每个Promise, 通过 .then 指定一下失败回调

image

2.和上面需求刚好相反, Promise 执行失败,后续直接终止, 可以使用 .catch() 指定回调函数 捕获错误

作用: 如果执行过程中, 有任意一步失败, 就会立即中终止所有 Promise的执行, 并马上进入.catch() 中, 抛出异常

.catch(err => console.log(err.message))

Jquery 中Ajax使用Promise指定成功回调函数

$.ajax({
  url: '/path/to/file',
  type: 'GET',
  dataType: 'xml/html/script/json/jsonp',
  data: {param1: 'value1'},
})
  .then(function(data){
    console.log(data)
  })