异步编程简介- promise

异步编程简介- promise

异步编程历史
前端异步编程经历callback、promise、generate、async/await几个阶段。
目前在简单场景使用回调，步骤比较多的场景使用promise和async/await，generate昙花一现，由于其api不易理解并且不易于使用而很少使用。

Promise

简介

promise目的：异步编程解决回调地狱，让程序开发者编写的异步代码具有更好的可读性。
promise规范规定了一种异步编程解决方案的API。规范规定了promise对象的状态和then方法。
promise是这种异步编程的解决方案的具体实现。
状态特性用来让使用promise的用户可以及时通知promise任务执行结果。
then特性让使用promise的用户可以控制执行完一个任务后执行下一个任务。
（使用回调进行异步编程的话，都是用户手动控制的，使用promise的话，只需要告诉promise：“我要执行什么任务”、“我执行的任务结束了”、“然后我要做什么”）

promise语法

promise对象

new Promise对象时候传入函数，函数立即执行，函数接收resolve、reject参数，调用resolve或reject时候会改变promise状态。状态改变后不会再变化。
promise状态
pending
fullfilled
rejected
未调用resolve或者reject时候处于pending状态，调用resolve后处于fullfilled状态，调用reject后处于rejected状态。如果在pending状态时候，执行任务抛出错误，则变成reject状态。
状态变化后，会执行通过then注册的回调。执行顺序和调用then方法的顺序相同。
调用then方法时候，如果状态是pending则注册回调，等到状态改变时候执行，如果状态已经改变则执行相应的回调。

const p = new Promise((resolve, reject) => {
   
	resolve('test');
});

p.then(
	data => console.log(1, 'resolve', data),
  data => console.log(1, 'reject', data)
);

p.then(
	data => console.log(2, 'resolve', data),
  data => console.log(2, 'reject', data)
);

// 执行结果
1 "resolve" "test"
2 "resolve" "test"

const p = new Promise((resolve, reject) => {
   
  throw new Error('test-error');
  // 由于抛出错误，promise状态已经改变为rejected，再调用resolve将不会改变promise状态
	resolve('test');
});

p.then(
	data => console.log(1, 'resolve', data),
  data => console.log(1, 'reject', data)
);

p.then(
	data => console.log(2, 'resolve', data),
  data => console.log(2, 'reject', data)
);

// 执行结果
1 "reject" Error: test-error
2 "reject" Error: test-error

const p = new Promise((resolve, reject) => {
   
	setTimeout(() => {
   
  	resolve('test');
  }, 1000);
});

p.then(
	data => console.log(1, 'resolve', data),
  data => console.log(1, 'reject', data)
);

// 执行结果
1s后打印 `1 "resolve" "test"`

promise对象的方法：then、catch、all、race

then

then方法接受两个参数，onFulfilled（状态变为fullfilled的回调）和onRejected（状态变为rejected的回调）。返回一个新的promise对象，返回的promise对象的状态与then的参数（onFulfilled、onRejected）和onFulfilled、onRejected方法中返回的值有关。

1. then方法不传参数
   如果不传参数，则then方法返回的promise和调用then的promise的状态一致。
   更具体地，如果没有onFullfilled参数并且promise的状态为fullfilled，那么then方法返回的promise和调用then方法的promise状态一致；如果没有onRejected参数并且promise状态为rejected，那么then方法返回的promise和调用then方法的promise状态一致。
   可以简单地理解：如果上一个promise不处理，那就下一个promise处理。

var p = new Promise(resolve => {
   
    throw new Error('test');
});

p
.then(

)
.then(
    data => console.log('resolve', data),
    err => console.log('reject', err)
    
);

// 执行结果
reject Error: test

var p = new Promise(resolve => {
   
    resolve('test');
});

p
.then(
    undefined, () => {
   }
)
.then(
    data => console.log('resolve', data),
    err => console.log('reject', err)
    
);

// 执行结果
resolve test

2. 回调不返回值
   无论onFullfilled中还是onRejected中，不返回值（即默认返回undefined），则then返回的新promise的状态变为fullfilled，值为undefined。

var p = new Promise(resolve => {
   
    resolve('test');
});

p
.then(
    () => {
   }
)
.then(
    data => console.log('resolve', data),
    err => console.log('reject', err)
    
);

// 执行结果
resolve undefined

var p = new Promise(resolve => {
   
    throw new Error('test');
});

p
.then(
    () => {
   },
    () => {
   }
)
.then(
    data => console.log('resolve', data),
    err => console.log('reject', err)
    
);

// 执行结果
resolve undefined

3. 返回普通值
   无论onFullfilled中还是onRejected中，返回普通值，则then返回的新promise的状态变为fullfilled，值为这个值。普通值指的是，非promise对象、非thenable对象（含有then方法的对象）。

var p = new Promise(resolve => {
   
    resolve('test');
});

p
.then(
    () => {
   return 'a'},
    () => {
   return {
   b: 1}}
)
.then(
    data => console.log('resolve', data),
    err => console.log('reject', err)
    
);

// 执行结果
resolve a

var p = new Promise(resolve => {
   
    throw new Error('test');
});

p
.then(
    () => {
   return 'a'},
    () => {
   return {
   b: 1}}
)
.then(
    data => console.log('resolve', data),
    err => console.log('reject', err)
    
)

// 执行结果
resolve {
   b: 1}

4. 返回promise
   无论onFullfilled中还是onRejected中，返回一个promise对象，则以该promise的任务和状态返回新的promise。

var p = new Promise(resolve => {
   
    throw new Error('test');
});

p
.then(
    () => {
   },
    () => {
   return Promise.resolve('yes');}
)
.then(
    data => console.log('resolve', data),
    err => console.log('reject', err)
    
);

// 执行结果
resolve yes

var p = new Promise(resolve => {
   
    resolve('test');
});

p
.then(
    () => {
   return Promise.reject('error'