Promise扁平化

在以往开发中有时会出现以下场景：
在调用异步请求success callback中，进行下一次的异步请求，然后在success callback中在发起新的异步请求
例如：

  cont ajax = (url) => {
    return new Promise((resolve,reject)=>{
        let xhr = new XMLHttpRequest();
        xhr.open(‘GET‘,url);
        xhr.responseType = ‘json‘;
        xhr.onload = () => {
          if (this.status ===200) {
              resolve(this.response);
           } else {
              reject(new Error(this.statusText));
          }
        }
    })
  }
  ajax(‘url‘).then(res=>{
     ajax(‘url‘).then(res=>{
        ajax(‘url‘).then(res=>{
      })
    })
  })

这样就形成了回调地狱，及其不利于维护！

直接上写法

  cont ajax = (url) => {
    return new Promise((resolve,reject)=>{
        let xhr = new XMLHttpRequest();
        xhr.open(‘GET‘,url);
        xhr.responseType = ‘json‘;
        xhr.onload = () => {
          if (this.status ===200) {
              resolve(this.response);
           } else {
              reject(new Error(this.statusText));
          }
        }
    })
  }
   ajax(‘url‘)
     .then((res)=>{
        return  ajax(‘url‘)
     })
    .then((res)=>{
      return  ajax(‘url‘)
    })
    .then((res)=>{
      return  ajax(‘url‘)
    })

总结下：

• Promise对下的then方法会返回一个全新的Promise对象
• 后面的then方法就是在为上一个then方法返回的Promise注册回调
• 前面then方法中回调函数的返回值会作为后面then方法回调的参数
• 如果回调中返回的是Promise，那后面then方法的回调会等待它的结束

原文：https://www.cnblogs.com/nxlbingo/p/14774761.html