Promise的使用

打工人233

已于 2025-05-09 09:43:30 修改

阅读量179

点赞数 3

文章标签： javascript 前端 Promise

于 2024-10-29 14:57:43 首次发布

本文链接：https://blog.youkuaiyun.com/zhaolifang_28/article/details/143329646

版权

一、数据同时加载

1、问题描述

在项目中会有一些这样的需求，需要把两个接口都返回数据后再进行下一步的操作，这样异步处理就无法满足需求，此时使用Promist的Promise.all就可以满足需求。

2、代码案例：

   getWaterDataByTm() {
      return new Promise((resolve, reject) => {
        request({
          url: `接口地址`,
          method: "GET",
          data: {},
        })
          .then((res) => {
            resolve(res.data);
          })
          .catch((err) => {});
      });
    },
getEcologicalFlowData() {
      return new Promise((resolve, reject) => {
        request({
          url: `接口地址`,
          method: "GET",
          data: {},
        })
          .then((res) => {
            resolve(res.data);
          })
          .catch((err) => {});
      });
    },
 geAllData() {
      var self = this;
      let p1 = this.getWaterDataByTm()
      let p2 = this.getEcologicalFlowData()
      Promise.all([p1, p2])
        .then((res) => {
          let data = {
            waterLists: res[0],
            flowLists: res[1],
          };
          //获取两个接口后的操作
        })
        .catch((err) => {
          console.log(err);
        });
    },

二、异步处理同步化

1、问题描述

在项目开发过程中不可避免的会有需要按照顺序获取数据，把上个接口返回的数据传给下一个接口，这样就需要把异步处理改成同步处理。

2、代码案例：

1）传统的回调函数

this.getNav(res=>{
	let id=res.data[0].id
	this.getList(id,res2=>{
		let id=res2.data[0].id
		this.getComment(id,res3=>{
			console.log(res3)
		})
	})
})
getNav(callback){       
    uni.request({
	    url:"接口",
	    success:res=> {
		    callback(res)
	    }
	})
},
getList(id,callback){
	uni.request({
		url:"接口",
		data:{
			id:id
		},
		success:res=> {
			callback(res)
		}
	})
}
getComment(id,callback){
	uni.request({
		url:"接口",
        data:{
			id:id
		},
		success:res=> {
			callback(res)
		}
	})
}

2）使用Promise处理（1.0版本）

this.getNav().then(res=>{
	let id=res.data[0].id;
	return this.getList(id)
}).then(res=>{
	console.log(res)
	let id=res.data[2].id
	return this.getComment(id)
}).then(res=>{
	console.log(res)
})

getNav(){
	return new Promise((resolve,reject)=>{
		uni.request({
			url:"接口",
			success:res=>{
				resolve(res)
			},
			fail:err=>{
				reject(err)
			}
		})
	})
},
getList(id){
    return new Promise((resolve,reject)=>{
		uni.request({
			url:"接口",
			data:{
				id:id
			},
			success:res=>{
				resolve(res)
			},
			fail:err=>{
				reject(err)
			}
		})
	})
},
getComment(id){
	return new Promise((resolve,reject)=>{
		uni.request({
			url:"接口",
			data:{
				id:id
			},
			success:res=>{
				resolve(res)
			},
			fail:err=>{
				reject(err)
			}
		})  
	})	
},

3）使用Promise处理（2.0版本）

使用的是await,async,ES7新规范，异步处理同步化

async mounted() {
	let res,id
	res = await this.getNav()
    id=res.data[0].id
	res=await this.getList(id)
    id=res.data[2].id
	res=await this.getComment(id)
}
methods: {
    getNav(){
	    return new Promise((resolve,reject)=>{
		    uni.request({
			    url:"接口",
			    success:res=>{
			    	resolve(res)
			    },
			    fail:err=>{
			    	reject(err)
			    }
		    })
	    })
    },
    getList(id){
        return new Promise((resolve,reject)=>{
		    uni.request({
			    url:"接口",
			    data:{
				    id:id
			    },
			    success:res=>{
				    resolve(res)
			    },
			    fail:err=>{
				    reject(err)
			    }
		    })
	    })
    },
    getComment(id){
	    return new Promise((resolve,reject)=>{
		    uni.request({
		    	url:"接口",
			    data:{
			    	id:id
			    },
			    success:res=>{
			    	resolve(res)
			    },
			    fail:err=>{
			    	reject(err)
		    	}
		    })  
	    })	
    },
}

借鉴：ES6 Promise的用法，async/await异步处理同步化 - 哔哩哔哩