promise链式操作

promise用来封装异步操作并可以获得其成功和失败的结果，我们首先看看正常的Promise是怎么样的

//实例化对象
   const p=new Promise(function (resolve,reject) {
            let data='数据库中的用户数据';

            //原生ajax请求,没有接口就先不用这个了，但是我们可以这么李姐
            // var xhr = new XMLHttpRequest();
            // xhr.open('GET', 'ajax_info.json', true);
            // xhr.send();
            // xhr.onreadystatechange = function (e) {
            //     if (xhr.readyState == 4 && xhr.status == 200) {
            //         resolve(xhr.response);
            //     }
            //     else{
            //         reject(xhr.status);
            //     }
            // };
            
            //读取数据成功后调用的函数
            resolve(data);
            //数据调用失败后调用的函数
            let err='数据调用失败';
            reject(err);
   });

   //调用promise对象的then方法
   const result=p.then(
       function(value){
            console.log(value);
            //若是返回非promise的值
            // return '回调函数返回的是非promise的值,输出 数据库中的用户数据 ';

            //若是返回promise
            // return new Promise((resolve,reject)=>{
            //     reject('抛出这个结果');
            // })


            //若是抛出错误
            // throw new Error('出错啦');
        },
        //失败的回调函数
        function(reason){
            console.error(reason);
        }
   )
   
    console.log(result);//返回结果也是promise，由执行函数的结果决定
    //比如返回的结果是非promise数据的类型，返回值为对象成功的值

通过then我们可以实现不停的链式操作，从而避免了回调地狱的产生

 const p=new Promise((resolve,reject)=>{
        let data="读取的数据1";
        resolve(data);
    });

    p.then(value=>{
        return new Promise((resolve,reject)=>{
            let data="读取的数据2";
            resolve(value+data);//拼接数据返回给下一个回调
        })
    }).then(value=>{
        return new Promise((resolve,reject)=>{
            let data="读取的数据3";
            resolve(value+data);//拼接数据返回给下一个回调
        })
    }).then(value=>{
        console.log(value);
    }).catch(function(reason){
        console.log("失败了");
    })

理解和使用Promise.all和Promise.race

一、Pomise.all的使用
Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。
Promise.all获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的，即p1的结果在前，即便p1的结果获取的比p2要晚。这带来了一个绝大的好处：在前端开发请求数据的过程中，偶尔会遇到发送多个请求并根据请求顺序获取和使用数据的场景，使用Promise.all毫无疑问可以解决这个问题。

let wake = (time) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${time / 1000}秒后醒来`)
    }, time)
  })
}

let p1 = wake(3000)
let p2 = wake(2000)

Promise.all([p1, p2]).then((result) => {
  console.log(result)       // [ '3秒后醒来', '2秒后醒来' ]
}).catch((error) => {
  console.log(error)
})

二、Promise.race的使用

顾名思义，Promse.race就是赛跑的意思，意思就是说，Promise.race([p1, p2, p3])里面哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。

let p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('success')
  },1000)
})

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

Promise.race([p1, p2]).then((result) => {
  console.log(result)
}).catch((error) => {
  console.log(error)  // 打开的是 'failed'
})