vue3之promise

1.promise是什么? 1.解决异步嵌套的问题 2.解决回调问题
(函数里面有函数 保证执行顺序)
3.链式的思想连接其他异步
异步的执行顺序是不确定的…
容器内部有3种状态: (状态不可回退)

      1.Pending   对象创建的初始状态(悬而未决)
      2.Fullfilled   成功(执行)
      3.Rejected   失败

2.使用

//读文件的操作
const fs=require('fs');
const path=require('path');
let p=new Promise((resolve,reject)=>{
    fs.readFile((err,data)=>{
	if(err){
	    reject(err);//输出错误
	}
       	resolve(data);//输出数据

   });

});
p.then((data)=>{
        console.log(data.toString());
    }).catch((err)=>{
        console.log(err);

  });//拿到promise对象操作数据,如果有异常执行catch里面的

3.promise是链式的(data的数据可以.then向下传递 )(在中间出错不会执行后面的)

//读文件的操作
const fs=require('fs');
const path=require('path');

	 
	
 let ps=new Promise((resolve,reject)=>{
	 fs.readFile(path.join(__dirname,'a.txt'),(err,data)=>{
	 	console.log(data.toString());
		if(err){
			reject()
		}
		resolve(data)
	 });
 }).then((data)=>{
	 new Promise((resolve,reject)=>{
		 fs.readFile(path.join(__dirname,'b.txt'),(err,data)=>{
		 	console.log(data.toString());
		 		if(err){
		 			reject()
		 		}
		 		resolve(data)
		 });
		 
	 });

	 
 }).then((data)=>{
	  new Promise((resolve,reject)=>{
	  		 fs.readFile(path.join(__dirname,'c.txt'),(err,data)=>{
	  		 	console.log(data.toString());
	  		 		if(err){
	  		 			reject()
	  		 		}
	  		 		resolve(data)
	  		 });
	  		 
	  });

	 
 }).then((data)=>{
	  new Promise((resolve,reject)=>{
	  		 fs.readFile(path.join(__dirname,'d.txt'),(err,data)=>{
	  		 	console.log(data.toString());
	  		 		if(err){
	  		 			reject()
	  		 		}
	  		 		resolve(data)
	  		 });
	  		 
	  });

	 
 }).catch((err)=>{
	 console.log(err);
 });
 
 

     
 

	
	// fs.readFile(path.join(__dirname,'b.txt'),(err,data)=>{
	// 	console.log(data.toString());
	// });
	// fs.readFile(path.join(__dirname,'c.txt'),(err,data)=>{
	// 	console.log(data.toString());
	// });
	

4.es6表达多个传入任意多个参数

 let func=(...args)=>{
       //调用其他函数也可以
         funcA(...args);

}

5.优化 直接return 一个函数
封装一个函数掉用promise

//读文件的操作
const fs=require('fs');
const path=require('path');
let readFile=(...args)=>{
	return new Promise((resolve,reject)=>{
		fs.readFile(...args,(err,data)=>{
			console.log(data.toString());
				if(err){
					reject()
				}
				resolve(data)
		});
		
	})
	
}
readFile(path.join(__dirname,'a.txt')).then((data)=>{
	return readFile(path.join(__dirname,'b.txt'))
	
}).then((data)=>{
	return readFile(path.join(__dirname,'d.txt'))
	
}).catch((err)=>{
	console.log(err);
});

6.promise加强 多个异步放在一个promise(自动形成链路 执行有顺序 等待结果后才返回)

Promise.all([readFile(path.join(__dirname,'a.txt')),
                   readFile(path.join(__dirname,'b.txt')),
	   readFile(path.join(__dirname,'c.txt'))
	    ]).then(([data1,data2,data3])=>{
		console.log(data1.toString());
		console.log(data2.toString());
		console.log(data3.toString());
				   
				   
	   });
  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3并没有直接提供与Promise相关的特性或API,因为Promise本身是JavaScript的原生对象,可以在Vue 3中直接使用。Vue 3更注重的是在响应式数据、组件化和渲染等方面进行了重大改进。 在Vue 3中,你可以在组件中使用Promise对象来处理异步操作。比如,在组件的方法中,你可以返回一个Promise对象,然后在使用该方法的地方通过调用then()方法来处理Promise的状态。 下面是一个简单的示例,展示了如何在Vue 3中处理一个异步操作,使用Promise对象: ```vue <template> <div> <button @click="getData">获取数据</button> <p>{{ result }}</p> </div> </template> <script> export default { data() { return { result: "" }; }, methods: { getData() { // 返回一个Promise对象 return new Promise((resolve, reject) => { setTimeout(() => { resolve("数据加载成功"); }, 2000); }).then((data) => { this.result = data; }); } } }; </script> ``` 在上面的示例中,我们在`getData`方法中返回了一个Promise对象,并在调用该方法时使用then()方法来处理Promise的状态。当Promise状态变为resolved时,即数据加载成功时,我们将结果保存在组件的data中,并在模板中显示出来。 需要注意的是,由于Vue 3更加注重函数式编程,你也可以使用async/await来处理异步操作,这将使你的代码更加简洁易读。 希望这个示例能够帮助你理解如何在Vue 3中处理Promise对象。如果你还有其他问题,请随时提问!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值