vue54 ——es6补充 promise

promise封装异步请求

已setTimeOut为例

用promise之前：
回调地狱

// 第一次网络请求代码
    setTimeout(()=>{
      console.log('第一次处理的代码');
      console.log('第一次处理的代码');
      console.log('第一次处理的代码');
      // 第二次网络请求代码
      setTimeout(()=>{
        console.log('第二次处理的代码');
        console.log('第二次处理的代码');
        console.log('第二次处理的代码');
        //第三次网络请求代码
        setTimeout(() => {
          console.log('第三次处理的代码');
          console.log('第三次处理的代码');
          console.log('第三次处理的代码');
          
        },100);
      },100)
    },100) 

使用promise：
resolve - then
reject - catch

new Promise((resolve,reject)=>{
      setTimeout(() => {
        resolve("first time")
      }, 100);
    }).then((data)=>{
      console.log(data);
      return new Promise((resolve,reject)=>{

        setTimeout(() => {
          resolve('second time')
        }, 100);
      })
    }).then((data)=>{
      console.log(data);
      return new Promise((resolve,reject)=>{

        setTimeout(() => {
          resolve('third time')
        }, 100);
      })
    }).then((data)=>{
      console.log(data);
      return new Promise((resolve,reject)=>{
       
        setTimeout(() => {
          reject('fouth error')
        }, 100);
      })
    }).catch((data)=>{
      console.log(data);      
    })

then，catch可以都写在then里面（then可以传两个 函数参数）

new Promise((resolve,reject)=>{
	setTimeOut(()=>{
		resolve('success');
		reject('error')
	}
}).then((succ)=>{
	console.log(succ);
},(err)=>{
	console.log(err)
})

promise三种状态：pending，fulfill，reject

• pending：等待状态。如正在进行网络请求，或定时器时间未到
• fulfill： 满足状态。当主动调用了resolve函数，且回调then（）
• reject：拒绝状态。当主动调用了reject函数，且回调catch（）

all方法： 封装两个不同的异步请求

	Promise.all([
	请求1 ，
	请求2

 ] ).the(results=>{
 //两个请求都成功.results是数组，存放两个请求分别获得的数据
 执行。。
 })

// 需求，发送两个不同的网络请求，但需要两个都成功，才能进行下一步
    Promise.all([
      new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve('one')
        }, 2000);
      }),
      new Promise((resolve,reject)=>{
        setTimeout(() => {
          resolve('two')
        }, 1000);
      })
    ]).then(results => {
        console.log(results);
        
      })