Promise用法

听?闻

已于 2023-02-23 17:50:53 修改

阅读量228

点赞数 1

文章标签： javascript 微信小程序开发语言

于 2022-10-19 20:07:59 首次发布

本文链接：https://blog.csdn.net/qq_65591699/article/details/127414809

版权

什么是promise
解决地狱回调问题
它可以进行链式调用
有三种状态分别是 ：pending 初始状态,进行中 fulfilled 成功状态，请求成功了 rejected 失败状态，请求失败了 Promise的状态一旦改变，就不会再变，任何时候都可以得到这个结果，状态不可以逆，只能由 pending变成fulfilled或者由pending变成rejected。

promise有哪些API方法：.then(),.catch(),.finally()，.all(),.race()
应用场景：封装ajax,axios的get,post封装，微信小程序中封装wx.request()，uniapp开发中uni.request()

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="jquery.js" charset="utf-8"></script> <!-- 引入jquery插件 -->
    <script>
    //es6中new Promise() 作用把异步操作改成同步执行
    //   console.dir(Promise) //可查看对象上的所有属性与方法
/*   //一.Promise基础用法 
      let p=new Promise((resolve,reject)=>{
		  //内部放异步请求的内容 ajax ,成功的通过resolve回调出去,失败的通过reject回调出去
		//   resolve('成功了')  //状态由pending变为fulfilled
		  reject('失败了啊') //状态由pending变为rejected
	  })
	  //then里面是方法，代表请求成功或失败执行的回调
	  //方法1
	//   console.log('18三种状态',p) //promise返回的是一个对象
	//  p.then((res)=>{ //成功回调
	// 	  console.log(20,res)
	//   },(err)=>{ //失败回调
	// 	  console.log(22,err)
	//   }) 
	   
	 //方法2
	 p.then((res)=>{ //成功回调
	 		  console.log('成功回调',res)
	 }).catch((err)=>{ //失败回调
	 		  console.log('失败回调',err)
	 }).finally(()=>{
		 console.log('不管成功与失败都会执行');
	 })  */
	   



//用promise如何解决多层回调地狱问题?
//解决方法1-请求多个结果，在内层判断
// let data1=getAxios('data/1.json') 
// let data2=getAxios('data/2.json') 
  
// data1.then(res=>{
//     console.log('81第1个结果',res);
//     if(res){
//         data2.then(res1=>{
//            console.log('93第2个结果',res1);
//         })
//     }
// })

//解决方法2-promise中.then链式调用
//   getAxios('data/1.json')
//   .then(res=>{
//     console.log(101,res);
//     return getAxios('data/2.json')  //返回，以供下次调用
//   })
//   .then(res=>{
//     console.log(102,res);
//   })
    </script>
  </head>
  <body>

  </body>
</html>

** 二.Promise内部要的是异步请求结果，ajax,定时器等-实际运用用它封装网络请求$.ajax(),wx.request()**


   let p= new Promise((resolve,reject)=>{
           $.ajax({
               url:'data/1.json',
            //    method:'get',  //post
            //    data:{},
               success:function(res){
                //   console.log(41,res);
                  resolve(res)
               },
               error:function(err){
                // console.log(45,err);
                reject(err)
               },
           })
    }) 

    p.then((res)=>{
         console.log(52,res);
    }).catch((err)=>{
         console.log(54,err);
    }).finally(()=>{
        console.log('不管成功与失败都会执行');
    })

三.Promise封装-axios原理



function getAxios(url){
   return new Promise((resolve,reject)=>{
           $.ajax({
               url:url, //接口路径
            //    method:'get',  //post
            //    data:{},
               success:function(res){
                //   console.log(41,res);
                  resolve(res)
               },
               error:function(err){
                // console.log(45,err);
                reject(err)
               },
           })
    }) 
}


//调用promise
 getAxios('data/1.json').then(res=>{
     console.log(81,res);
 })

四、promise其它api方法-多个接口都请求到

 Promise.all[promise1,promise2,...]返回数组。
  let p1=getAxios('data/1.json') 
  let p2=getAxios('data/2.json') 
   Promise.all([p1,p2]).then(res=>{
       console.log('all都执行',res);
       let [a,b]=res   //解构下
       console.log(a,b);
   }).catch(err=>{
       console.log("失败了");
   })