promise（二）

promiseAPI

1. Promise构造函数: Promise (excutor) {}

        excutor函数: 同步执行  (resolve, reject) => {}

        resolve函数: 内部定义成功时我们调用的函数 value => {}

        reject函数: 内部定义失败时我们调用的函数 reason => {}

        说明: excutor会在Promise内部立即同步回调,异步操作在执行器中执行

    2. Promise.prototype.then方法: (onResolved, onRejected) => {}

        onResolved函数: 成功的回调函数  (value) => {}

        onRejected函数: 失败的回调函数 (reason) => {}

        说明: 指定用于得到成功value的成功回调和用于得到失败reason的失败回调

              返回一个新的promise对象

    3. Promise.prototype.catch方法: (onRejected) => {}

        onRejected函数: 失败的回调函数 (reason) => {}

        说明: then()的语法糖, 相当于: then(undefined, onRejected)

new Promise((resolve, reject) => { // excutor执行器函数
 setTimeout(() => {
   if(...) {
     resolve('成功的数据') // resolve()函数
   } else { 
     reject('失败的数据') //reject()函数
    }
 }, 1000)
}).then(
 value => { // onResolved()函数
  console.log(value) // 成功的数据
}
).catch(
 reason => { // onRejected()函数
  console.log(reason) // 失败的数据
}
)

    4. Promise.resolve方法: (value) => {}

value：将被 Promise 对象解析的参数，也可以是一个成功或失败的 Promise 对象

返回：返回一个带着给定值解析过的 Promise 对象，如果参数本身就是一个 Promise 对象，则直接返回这个 Promise 对象。

如果传入的参数为 非Promise类型的对象, 则返回的结果为成功promise对象

let p1 = Promise.resolve(1);
console.log(p1); // Promise {<fulfilled>: 1}

   

如果传入的参数为 Promise 对象, 则参数的结果决定了 resolve 的结果

let p2 = Promise.resolve(new Promise((resolve, reject) => {
    // resolve('OK'); // 成功的Promise
    reject('Error');
}));
console.log(p2);Promise {<fulfilled>: Error}
p2.catch(reason => {
    console.log(reason);
})

5. Promise.reject方法: (reason) => {}

        reason: 失败的原因

        说明: 返回一个失败的promise对象

let p = Promise.reject(521);
let p2 = Promise.reject('iloveyou');
let p3 = Promise.reject(new Promise((resolve, reject) => {
    resolve('OK');
}));

console.log(p);
console.log(p2);
console.log(p3);

Promise.resolve()/Promise.reject() 方法就是一个语法糖用来快速得到Promise对象

//产生一个成功值为1的promise对象
new Promise((resolve, reject) => {
 resolve(1)
})
//相当于
const p1 = Promise.resolve(1)


const p2 = Promise.resolve(2)
const p3 = Promise.reject(3)

p1.then(value => {console.log(value)}) // 1
p2.then(value => {console.log(value)}) // 2
p3.catch(reason => {console.log(reason)}) // 3

  6. Promise.all方法: (promises) => {}

        promises: 包含n个promise的数组

        说明: 返回一个新的promise, 只有所有的promise都成功才成功, 只要有一个失败了就直接失败

    7. Promise.race方法: (promises) => {}

        promises: 包含n个promise的数组

        说明: 返回一个新的promise, 第一个完成的promise的结果状态就是最终的结果状态

promise的几个关键问题

如何改变 promise 的状态？

 (1)resolve(value): 如果当前是pendding就会变为resolved

(2)reject(reason): 如果当前是pendding就会变为rejected

(3)抛出异常: 如果当前是pendding就会变为rejected

const p = new Promise((resolve, reject) => {
  //resolve(1) // promise变为resolved成功状态
  //reject(2) // promise变为rejected失败状态
  throw new Error('出错了') // 抛出异常，promise变为rejected失败状态，reason为抛出的error
})
p.then(
  value => {},
  reason => {console.log('reason',reason)}
)
// reason Error:出错了

一个promise指定多个成功/失败回调函数, 都会调用吗?

      当promise改变为对应状态时都会调用

const p = new Promise((resolve, reject) => {
  //resolve(1)
  reject(2)
})
p.then(
  value => {},
  reason => {console.log('reason',reason)}
)
p.then(
  value => {},
  reason => {console.log('reason2',reason)}
)
// reason 2
// reason2 2

改变promise状态和指定回调函数谁先谁后?

      (1)都有可能, 正常情况下是先指定回调再改变状态, 但也可以先改状态再指定回调

      (2)如何先改状态再指定回调?

        ①在执行器中直接调用resolve()/reject()

        ②延迟更长时间才调用then()

let p = new Promise((resolve, reject) => {
  // setTimeout(() => {
      resolve('OK');
  // }, 1000); // 有异步就先指定回调，否则先改变状态
});

p.then(value => {
  console.log(value);
},reason=>{
  
})

      (3)什么时候才能得到数据?

        ①如果先指定的回调, 那当状态发生改变时, 回调函数就会调用, 得到数据

new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(1) // 改变状态
  }, 1000)
}).then( // 指定回调函数 （先指定）
  value => {},
  reason =>{}
)

 此时，先指定回调函数，保存当前指定的回调函数；后改变状态(同时指定数据)，然后异步执行之前保存的回调函数。 

②如果先改变的状态, 那当指定回调时, 回调函数就会调用, 得到数据

new Promise((resolve, reject) => {
  resolve(1) // 改变状态
}).then( // 指定回调函数
  value => {},
  reason =>{}
)

先改变的状态(同时指定数据)，后指定回调函数(不需要再保存)，直接异步执行回调函数

 promise.then() 返回的新 promise 的结果状态由什么决定？

(1)简单表达: 由then()指定的回调函数执行的结果决定

      (2)详细表达:

          ①如果抛出异常, 新promise变为rejected, reason为抛出的异常

let p = new Promise((resolve, reject) => {
  resolve('ok');
});
//执行 then 方法
let result = p.then(value => {
  //1. 抛出错误
  throw '出了问题';
}, reason => {
 
});

console.log(result);

          ②如果返回的是非promise的任意值, 新promise变为resolved, value为返回的值

let p = new Promise((resolve, reject) => {
  resolve('ok');
});
//执行 then 方法
let result = p.then(value => {
	//2. 返回结果是非 Promise 类型的对象
	return 521;
}, reason => {
 
});

console.log(result);

          ③如果返回的是另一个新promise, 此promise的结果就会成为新promise的结果

let p = new Promise((resolve, reject) => {
  resolve('ok');
});
//执行 then 方法
let result = p.then(value => {
	//3. 返回结果是 Promise 对象
	return new Promise((resolve, reject) => {
		// resolve('success');
		reject('error');
	});
}, reason => {
  console.warn(reason);
});

console.log(result);

示例

new Promise((resolve, reject) => {
  resolve(1)
}).then(
  value => {
    console.log('onResolved1()', value)
  },
  reason => {
    console.log('onRejected1()', reason)
  }
).then(
  value => {
    console.log('onResolved2()', value)
  },
  reason => {
    console.log('onRejected2()', reason)
  }
)
// onResolved1() 1
// onResolved2() undefined

promise如何串连多个操作任务?

      (1)promise的then()返回一个新的promise, 可以开成then()的链式调用

      (2)通过then的链式调用串连多个同步/异步任务

new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('执行任务1(异步)')
    resolve(1)
  }, 1000)
}).then(
  value => {
    console.log('任务1的结果', value)
    console.log('执行任务2(同步)')
    return 2 // 同步任务直接return返回结果
  }
).then(
  value => {
    console.log('任务2的结果', value)
    return new Promise((resolve, reject) => { // 异步任务需要包裹在Promise对象中
      setTimeout(() => {
        console.log('执行任务3(异步)')
        resolve(3)
      }, 1000)
    })
  }
).then(
  value => {
    console.log('任务3的结果', value)
  }
)
// 执行任务1(异步)
// 任务1的结果 1
// 执行任务2(同步)
// 任务2的结果 2
// 执行任务3(异步)
// 任务3的结果 3

 promise异常传透?

      (1)当使用promise的then链式调用时, 可以在最后指定失败的回调,

      (2)前面任何操作出了异常, 都会传到最后失败的回调中处理

new Promise((resolve, reject) => {
   //resolve(1)
   reject(1)
}).then(
  value => {
    console.log('onResolved1()', value)
    return 2
  }
).then(
  value => {
    console.log('onResolved2()', value)
    return 3
  }
).then(
  value => {
    console.log('onResolved3()', value)
  }
).catch(
  reason => {
    console.log('onRejected1()', reason)
  }
)
// onRejected1() 1

相当于这种写法：多写了很多reason => {throw reason}

new Promise((resolve, reject) => {
   //resolve(1)
   reject(1)
}).then(
  value => {
    console.log('onResolved1()', value)
    return 2
  },
  reason => {throw reason} // 抛出失败的结果reason
).then(
  value => {
    console.log('onResolved2()', value)
    return 3
  },
  reason => {throw reason} // 抛出失败的结果reason
).then(
  value => {
    console.log('onResolved3()', value)
  },
  reason => {throw reason} // 抛出失败的结果reason
).catch(
  reason => {
    console.log('onRejected1()', reason)
  }
)
// onRejected1() 1

所以失败的结果是一层一层处理下来的，最后传递到 catch 中。

或者，将 reason => {throw reason} 替换为 reason => Promise.reject(reason) 

中断promise链?

      (1)当使用promise的then链式调用时, 在中间中断, 不再调用后面的回调函数

      (2)办法: 在回调函数中返回一个pendding状态的promise对象

new Promise((resolve, reject) => {
   //resolve(1)
   reject(1)
}).then(
  value => {
    console.log('onResolved1()', value)
    return 2
  }
).then(
  value => {
    console.log('onResolved2()', value)
    return 3
  }
).then(
  value => {
    console.log('onResolved3()', value)
  }
).catch(
  reason => {
    console.log('onRejected1()', reason)
    return new Promise(() => {}) // 返回一个pending的promise
  }
).then(
  value => {
    console.log('onResolved4()', value)
  },
  reason => {
    console.log('onRejected2()', reason)
  }
)
// onRejected1() 1

在 catch 中返回一个新的 promise，且这个 promise状态为peddling。

由于，返回的新的 promise 结果决定了后面 then 中的结果，所以后面的 then 中也没有结果。

这就实现了中断 promise链的效果。