Promise

Promise 是 ES6 中的一个特性，是异步编程的一种解决方案。

基本语法

处理方式一：

new Promise((resolve,reject) => {
  //异步请求操作
  setTimeout(() => {
    //成功时调用 resolve()
    resolve('Hello World')//执行 resolve() 函数后，会调用 Then() 函数
    //失败时调用 reject()，一旦调用 reject()，就不会执行 resolve()
    //reject('error message)
  },1000)
}).then(data => {
  //对异步请求的结果进行处理
  console.log(data)
}).catch(err => {
  console.log(err)
})

处理方式二：

new Promise((resolve,reject) => {
  //异步请求操作
  setTimeout(() => {
    //成功时调用 resolve()
    resolve('Hello World')//执行 resolve() 函数后，会调用 Then() 函数
    //失败时调用 reject()，一旦调用 reject()，就不会执行 resolve()
    //reject('error message)
  },1000)
}).then( data => {
  //对异步请求的结果进行处理
  console.log(data)
}, err => {
  console.log(err)
})

Promise的链式调用 

方式一：

  new Promise((resolve,reject) => {
    //第一次网络请求的代码
    setTimeout(() => {
      resolve('Hello World')
    },1000)
  }).then((data) => {//执行resolve()之后，会来调用then()
    //第一次请求处理的代码
    console.log(data);
    console.log(data);
    console.log(data);
    console.log(data);
    console.log(data);
    console.log(data);
    return new Promise((resolve, reject) => {
      //第二次网络请求的代码
      setTimeout(() => {
        resolve('Hello Vue')
      },1000)
    })
  }).then((data) => {
    //第二次请求处理的代码
    console.log(data);
    console.log(data);
    console.log(data);
    console.log(data);
    console.log(data);
    console.log(data);
    return new Promise((resolve, reject) => {
      //第三次网络请求的代码
      setTimeout(() => {
        resolve('Hellow CD')
      },1000)
    })
  }).then((data)=>{
    //第三次请求处理的代码
    console.log(data);
    console.log(data);
    console.log(data);
    console.log(data);
    console.log(data);
    console.log(data);
  })

方式二：

    new Promise ((resolve, reject) => {
      setTimeout(() => {
        resolve('aaa')
      },1000)
    }).then(res =>{
      //1.自己处理 10 行代码
      console.log(res, '第一次处理的 10 行代码');

      //2.对结果进行第一次处理
      return new Promise((resolve, reject) => {
        reject('err message')
      })
    }).then(res => {
      console.log(res, '第二次处理的 10 行代码');

      //3.对结果进行第三次处理
      return Promise.resolve(res + '222')
    }).then(res => {
      console.log(res, '第三次处理的 10 行代码');
    }).catch(err => {
      console.log(err);
    })

Promise.all([]) :所有异步请求完成之后统一处理：

    Promise.all([
      new Promise((resolve,reject) => {
        $ajax({
          url:'url1',
          success:function(){
            console.log('结果1');
          }
        })
      }),
      new Promise((resolve,reject) => {
        $ajax({
          url:'url2',
          success:function (){
            console.log('结果2');
          }
        })
      })
    ]).then(results => {
      console.log(results[0])
      console.log(results[1])
    })

    Promise.all([
      new Promise((resolve,reject) => {
        // $ajax({
        //   url:'url1',
        //   success:function(){
        //     console.log('结果1');
        //   }
        // })
        setTimeout(()=>{
          resolve('result01')
        },2000)
      }),
      new Promise((resolve,reject) => {
        // $ajax({
        //   url:'url2',
        //   success:function (){
        //     console.log('结果2');
        //   }
        // })
        setTimeout(()=>{
          resolve('result02')
        },1000)
      })
    ]).then(results => {
      console.log(results)
    })