前端promise的基本使用

Promise是一个JS内置对象，可以直接通过new关键字调用

let value  = 1
// promise的参数为一个回调函数,
// 回调函数又可以接收两个参数,
// 两个参数又是一个函数
const pro = new Promise((resolve, reject) => {
	if (value == 1) {
		resolve();//调用resolve函数可以将promise的状态改为成功
	} else {
		reject()//调用reject函数可以将promise的状态改为失败
	}
})
console.log(pro,'pro')

 

当我们调用resolve函数的时候promise的状态就会变成 成功的状态，成功的状态叫：fulfilled，据说以前老的浏览器状态叫resolved

 const pro  = new Promise((resolve,reject)=>{
    resolve('成功的值');//可以传入成功的value值
    })
   console.log('成功的状态',pro);

当我们调用reject的时候promise就会变成失败的状态，失败的状态叫rejected

   const pro  = new Promise((resolve,reject)=>{
    reject('失败的值');//可以传入失败的value值
    })
   console.log('失败的状态',pro);

 如果同时调用两个函数，则只会变成先调用的那个函数的状态，状态只会改变一次

然后通过.then方法我们可以指定promise成功与失败的回调

//    .then接收两个回调函数，成功与失败，默认第一个是成功的回调函数
   pro.then(
    // 成功的回调
    res=>{console.log('res',res);},
    // 失败的回调
    err=>{console.log('err',err);}
   )

如果不想在.then中调用失败的回调也可以直接通过.catch方法指定失败的回调

  pro.catch(
    // 此时只需指定一个回调即可，在.then里面如果不想写成功的回调可以用undefin代替
    err=>{console.log(err);}
    )
  },

链式调用

 const pro  = new Promise((resolve,reject)=>{
       const date = Date.now();
      if (date % 2 === 0) {
        resolve(date)
      } else {
       reject('失败了')
      }
    })
   pro.then(
    //此处的结果由new出来的promise结果决定，如果成功就调成功回调，失败就调失败回调
    res=>{console.log(res,'第一次res');return Promise.resolve('新的成功')},//如果此处返回一个promise，则新的promise状态由这个返回的promise状态决定
    err=>{console.log(err,'第一次res');return Promise.reject('新的失败')}//如果此处返回一个promise，则新的promise状态由这个返回promise状态决定
    ).then(
      res=>{console.log(res,'第二次res'); return '888'},//如果返回的是一个非promise，则下一个promise状态直接为成功，成功值为返回的值
      err=>{console.log(err,'第二次err');},
    ).then(
      res=>{console.log(res,'第三次res');},//由于上一个promise返回的值是非promise，所以直接调成功的回调，返回‘888’
      err=>{console.log(err,'第三次err');}
    )