• Promise是异步编程的一种解决方案。
• 可以有效的避免回调地狱的问题

语法

• new Promise是创建一个Promise对象
• 小括号中((resolve, reject) => {})也很明显就是一个函数，而且我们这里用的是之前刚刚学习过的箭头函数。
  • 创建Promise时，传入的这个箭头函数是固定的
  • resolve和reject它们两个也是函数，通常情况下，我们会根据请求数据的成功和失败来决定调用哪一个。
  • 如果是成功的，那么通常我们会调用resolve(messsage)，这个时候，我们后续的then会被回调。
  • 如果是失败的，那么通常我们会调用reject(error)，这个时候，我们后续的catch会被回调。

使用语法 1:

  new Promise((resolve, reject) => {
    setTimeout(() => {
      // 成功的时候调用resolve
      // resolve('Hello World')
      // 失败的时候调用reject
      reject('error message')
    }, 1000)
  }).then((data) => {
    console.log(data);
  }).catch((err) => {
    console.log(err);
  })

使用语法 2:

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

Promise.all

等所有条件都执行完了才开始执行then中的代码

  Promise.all([
    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);
  })

完整实例

完整语法

  new Promise((resolve, reject) => {
    setTimeout(() => {
      // 成功的时候调用resolve
      resolve('++++++ 我是第一个setTimeout函数呀')
      // 失败的时候调用reject
      reject('++++++ 我第一次失败啦~')
    },1000)
  }).then((data) => {
    console.log(data);

    return new Promise((resolve, reject) => {
      setTimeout(() => {
        // resolve('++++++ 我是第二个setTimeout函数呀')
        reject('++++++ 我第二次失败啦~')
      }, 1000)
    }).then(data => {
      console.log(data);

      return new Promise(((resolve, reject) => {
        setTimeout(() => {
          resolve('++++++ 我是第三个setTimeout函数呀')
          reject('++++++ 我第三次失败啦')
        })
      })).then(data => {
        console.log(data);
      }).catch(err => {
        console.log(err);
      })
    }).catch(err => {
      console.log(err);
    })
  }).catch(err => {
    console.log(error);
  })

简写语法

  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('****** 我是第一个setTimeout函数呀')
      reject('****** 我第一次失败啦~')
    }, 1000)
  }).then(res => {
    console.log(res);

    // 直接简写成Promise.resolve || 后面是失败的参数
    return Promise.resolve('****** 我是第二个setTimeout函数呀') || Promise.reject('****** 我第二次失败啦')
  }).then(res => {
    console.log(res);

    // 忽略掉Promise.resolve, 直接return || 后面是失败的参数
    return !'****** 我是第三个setTimeout函数呀' || '****** 我第三次失败啦'
  }).then(res => {
    console.log(res);
  }).catch(err => {
    console.log(err);
  })