【Javascript】你真的懂JS中的Promise吗

一、产生

ES6中新技术，解决异步回调地域问题。

1、回调地域

回调嵌套或者函数很乱的调用，简单来说，就是：发四个请求，第四个依赖第三个结果，第三个依赖第二个的结果，第二个依赖第一个的结果。

2、回调函数弊端

不利于阅读，不利于捕获异常，不能直接return 。

 setTimeout(() => {
    console.log(1)
    setTimeout(() => {
        console.log(2)
        setTimeout(() => {
            console.log(3)   
        },3000)         
    },2000)
},1000)

3、常见的回调函数

计时器、AJAX、数据库操作、fs，其中，经常使用的场景是，AJAX请求以及各种数据库操作会产生回调地狱。

4、promise解决异步避免回调地狱

function f1() {
    return new Promise((resolve, reject) => {
      setTimeout(() => resolve(111), 1000);
    }).then(data => console.log(data));
  }
function f2() {
    return new Promise((resolve, reject) => {
      setTimeout(() => resolve(222), 2000);
    }).then(data => console.log(data));;
  }
 function f3() {
    return new Promise((resolve, reject) => {
      setTimeout(() => resolve(333), 3000);
    }).then(data => console.log(data));;
  }

f1().then(f2).then(f3)

二、是什么

（1）promise对象表示一个异步操作的最终完成或失败，及其结果值，是一个代理值。
（2）语法上：Promise是一个构造函数，用来生成Promise的实例对象。
（3）功能上：Promise对象用来包裹一个异步操作，并获取成功、失败结果值。

三、三种状态

promise对象代理的值是未知的，状态是可变的，promise状态有三种：
（1）pending：初始状态，既不成功，也不失败。
（2）fulfilled：操作成功完成
（3）rejected：操作失败

四、基本使用

promise构造函数有两个参数（resolve,reject），这两个参数代表异步操作的结果，也就是promise状态。

操作成功，调用resolve函数，将promise对象的状态改为fulfilled。
操作失败，调用rejected函数，将promise对象的状态改为rejected。

1、resolve函数

let obj =new Promise((resolve,reject)=>{
  resolve('ok');
});

//1、如果传入的是非promise，基本数据类型数据，则返回成功的promise。
let p= Promise.resolve('abc')
//2、如果传入的Promise，那么该对象的结果就决定了resolve的返回结果。
let p2 = Promise.resolve(obj);
//3、嵌套使用
let p3 = Promise.resolve(Promise.resolve(Promise.resolve('ABC')));
console.log(p3);

2、reject函数

Promise.prototype.reject始终返回的是失败的Promise。

let p = Promise.reject(123123);
let p2 = Promise.reject('abc');
let p3 = Promise.reject(Promise.resolve('ok'));
console.log(p3);

五、API

1、than

指定成功或失败的回调到当前promise
than里面拿到的promise resolve里的数据，并且还会返回一个promise继续供我们调用。
than方法的返回结果是由than指定回调函数决定的，类似resolve。

let p=new Promise((resolve,reject)=>{
  resolve('ok')
})
p.then(value=>{
  console.log(value)//ok
},reason=>{
  console.error(reason)  
})

2、catch

指定失败的回调

let p =new Promise((resolve,reject)=>{
  reject('失败了')；
})
p.then(value=>{},reason=>{
  console.error(reason);
})
p.catch(reason=>{
  console.error(reason)
})

3、all

多个promise任务一起执行，如果全部成功，则返回一个新的promise，如果有一个失败，则返回失败的promise对象。

let p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('OK');
  }, 1000);
});
let p2 = Promise.resolve('Yes');
let p3 = Promise.reject('Oh My God');

//all 所有
let result = Promise.all([p1, p2, p3]);
console.log(result);

4、race

多个promise任务同步执行，返回最先结束的promise任务结束，不论是成功还是失败，简单来说就先到先得。

// race 赛跑
let p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('OK');
  }, 1000);
});

let p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Yes');
  }, 500);
});

let result = Promise.race([p1, p2]);

console.log(result);