vue 中的 promise 的使用

本文深入探讨JavaScript中异步操作的挑战,特别是在Node.js环境中。通过分析传统的回调函数处理异步任务时遇到的“回调地狱”问题,文章引出了Promise的概念及其如何简化异步流程。Promise提供了一种更优雅的解决方案,避免了层层嵌套的回调函数,使得代码更加清晰和易于维护。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在JavaScript的世界中,所有代码都是单线程执行的。

由于这个“缺陷”,导致JavaScript的所有网络操作,浏览器事件,都必须是异步执行。异步执行可以用回调函数实现。

在node.js中, 我们知道了可以通过代码读取文件中的内容

//通过函数读取文件
readFile(path.join(__dirname, './one.txt'))

为什么我们要学习 promise 封装呢?

首先我们要明确我们封装的目的是什么?

  1. 我们需要给一个路径,然后通过封装函数得到返回 的结果
function getFileByPath(fpath) {
	fs.readFile(fpath, 'utf-8',(err,dataStr) => {
	if(err)  throw err
	return dataStr
	})
}

因为是异步的,所以直接返回return

程序不会等待result, 因此result 是 undefined??

这里 因为 return 是在函数内部,,而不是在函数外部,那我要怎么获得函数里面的返回值,然后返回给函数外呢????
给他一个 callback() 函数就行了

如果不想阻塞,那么我可以通过嵌套

如果嵌套有很多层,就是我们所说的回调地域,你看下面的对曾嵌套的回调代码:

getFile(path.join(__dirname, './1.txt'), function(data) {
console.log(data)
getFile(path.join(__dirname, './2.txt'), function(data) {
console.log(data)
getFile(path.join(__dirname, './3.txt'), function(data) {
console.log(data)
})
})
})

为了解决这个回调地域的问题,promise就发挥它的作用了。。。。。

在这里插入图片描述
在控制台打印出promise, 可以看到promise就是一个构造函数,自定义对象, 可以new一个promise示例。

在这里插入图片描述

形式上和具体的 promise 的异步操作

在这里插入图片描述

函数的一个作用,就是假如我想先不执行函数体的代码

我就可以先放到函数里边。然后我先执行的时候调用这个函数就可以了

再原来普通的读取文件,是不能直接return返回值回去的
那用callback() 那callback从哪里来呢
callback也传递两个参数,

在promise 中也有两个参数

这几个是形参,那实参是什么,不知道,我知道的是失败执行的函数,成功执行的函数

因为是异步的,所以.then会先执行。然后会把,

我们需要的resolve,reject函数先传过去的
可能记住一句话就好了吧:再上一个.then 中,返回一个新的promise实例,可以继续用下一个.then来处理
在这里插入图片描述

Vue中,Promise是一种用于处理异步操作的对象。它可以让你更方便地处理异步任务的结果,避免回调地狱。Vue中的很多异步操作都会返回一个Promise对象,你可以通过then()方法来处理异步任务的结果,或者使用async/await语法来处理Promise。 下面是一个使用Promise的示例: ```javascript // 创建一个Promise对象 const myPromise = new Promise((resolve, reject) => { // 异步操作,比如发送一个AJAX请求 setTimeout(() => { const data = 'Hello, Vue!'; // 模拟请求成功,将结果传递给resolve函数 resolve(data); // 模拟请求失败,将错误传递给reject函数 // reject('Error occurred'); }, 2000); }); // 使用then()方法处理异步任务的结果 myPromise.then((result) => { console.log(result); // 输出:Hello, Vue! }).catch((error) => { console.log(error); // 输出:Error occurred }); // 使用async/await语法处理Promise async function fetchData() { try { const result = await myPromise; console.log(result); // 输出:Hello, Vue! } catch (error) { console.log(error); // 输出:Error occurred } } fetchData(); ``` 在上面的示例中,我们创建了一个Promise对象`myPromise`,模拟了一个异步操作。使用then()方法可以在Promise对象的状态变为resolved时执行相应的回调函数。另外,我们还使用了catch()方法来处理错误。如果你更喜欢使用async/await语法,可以在一个async函数中使用await关键字来等待Promise对象的结果,并使用try/catch语句来处理可能的错误。 这只是Vue使用Promise的一个简单示例,实际中你可能会在组件中的生命周期钩子函数、方法中或者其他地方遇到Promise对象,并根据具体需求进行处理。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值