Promise

一、什么情况下运用promise

一般情况下是有异步操作时,使用Promise对这个异步操作进行封装

二、操作

Promise是一个类，类似于vue所以要通过new Promise进行引入，new -> 构造函数(1.保存了一些状态信息 2.执行传入的函数)。在执行传入的回调函数时，会传入两个参数，resolve, reject，本身又是函数。

new Promise ((resolve,reject) => {})

new Promise((resolve, reject) => {
    setTimeout(() => {
      // 成功的时候调用resolve，在then处处理成功
      // resolve('Hello World')

      // 失败的时候调用reject，在catch处处理失败
      reject('error message')
    }, 1000)
  }).then((data) => {
    // 1.100行的处理代码
    console.log(data);
    console.log(data);
    console.log(data);
    console.log(data);
    console.log(data);
  }).catch((err) => {
    console.log(err);
  })

三、说明

• new Promise很明显是创建一个Promise对象

• 小括号中((resolve, reject) => {})是一个箭头函数。在创建Promise时，传入的这个箭头函数是固定的。resolve和reject它们 两个也是函数，通常情况下，会根据请求数据的成功和失败来决定调用哪一个。成功调用resolve，失败调用reject。

• 如果是成功的，通常会调用resolve(messsage)，这个时候，后续的then会被回调。
  如果是失败的，通常会调用reject(error)，这个时候，后续的catch会被回调。

四、Promise三种状态

• pending：等待状态，比如正在进行网络请求，或者定时器没有到时间。
• fulfill：满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then()
• reject：拒绝状态，当我们主动回调了reject时，就处于该状态，并且会回调.catch()
  

五、Promise另外处理方式

new Promise((resolve, reject) => {
    setTimeout(() => {
      // resolve('Hello Vuejs')
      reject('error message')
    }, 1000)
  }).then(data => {
    console.log(data);
  }, err => {
    console.log(err);
  })

六、Promise链式调用

方式一：

new Promise((resolve, reject) => {

    // 第一次网络请求的代码
    setTimeout(() => {
      resolve()
    }, 1000)

  }).then(() => {
    // 第一次拿到结果的处理代码
    console.log('Hello World');
    console.log('Hello World');
    console.log('Hello World');
    console.log('Hello World');
    console.log('Hello World');
    console.log('Hello World');

    return new Promise((resolve, reject) => {

      // 第二次网络请求的代码
      setTimeout(() => {
        resolve()
      }, 1000)
    })
  }).then(() => {

    // 第二次处理的代码
    console.log('Hello Vuejs');
    console.log('Hello Vuejs');
    console.log('Hello Vuejs');
    console.log('Hello Vuejs');
    console.log('Hello Vuejs');
    console.log('Hello Vuejs');

    return new Promise((resolve, reject) => {

      // 第三次网络请求的代码
      setTimeout(() => {
        resolve()
      })
    })
  }).then(() => {

    // 第三处理的代码
    console.log('Hello Python');
    console.log('Hello Python');
    console.log('Hello Python');
    console.log('Hello Python');
    console.log('Hello Python');
  })

方式二：

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

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

    return Promise.resolve(res + '222')
  }).then(res => {
    console.log(res, '第三层的10行处理代码');
  }).catch(err => {
    console.log(err);
  })

七、Promise的all方法使用

某一个需求需要发送两次请求时，用promise all
例：

Promise.all([
      // new Promise((resolve, reject) => {
      //   $.ajax({
      //     url: 'url1',
      //     success: function (data) {
      //       resolve(data)
      //     }
      //   })
      // }),
      // new Promise((resolve, reject) => {
      //   $.ajax({
      //     url: 'url2',
      //     success: function (data) {
      //       resolve(data)
      //     }
      //   })
      // })

    new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({name: 'why', age: 18})
      }, 2000)
    }),
    new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({name: 'kobe', age: 19})
      }, 1000)
    })
  ]).then(results => {
    console.log(results);
  })

这里，results是一个数组，显示结果为：