settimeout,promise,async的区别

setTimeoutPromiseasync/await 是 JavaScript 中用于处理异步操作的不同方式,它们各自有着不同的用途和特性。下面是对这三者的简要区别说明:

1. setTimeout

setTimeout 主要用于在指定的延迟时间后执行代码,它并不直接处理异步操作的结果,而是简单地延迟了某个函数的执行。

(1)返回值

setTimeout 返回一个表示计时器的数值,这个数值可以用于通过 clearTimeout 取消计时器。

(2)特点

setTimeout 并不直接处理异步操作的成功或失败,也不提供错误处理机制。它主要用于延迟执行,比如延迟加载某些资源、设置延时提醒等。

(3)基本用法

// 定义一个要延迟执行的函数  
function delayedFunction() {  
  console.log("这段代码将在3秒后执行");  
}  
  
// 使用setTimeout来延迟执行该函数  
setTimeout(delayedFunction, 3000); // 延迟3000毫秒(即3秒)  
  
// 或者使用匿名函数直接在setTimeout中定义要执行的代码  
setTimeout(function() {  
  console.log("这段代码同样会在3秒后执行");  
}, 3000);  
  
// 使用箭头函数  
setTimeout(() => {  
  console.log("这段代码也会在3秒后执行");  
}, 3000);

取消setTimeout

let timerId = setTimeout(function() {  
  console.log("这段代码将不会执行");  
}, 3000);  
  
// 假设在某个条件满足时,我们决定取消执行  
clearTimeout(timerId);

示例:

console.log("start");
setTimeout(function(){
    console.log("setTimeout executed");
})
console.log("end");
// 顺序start------>end------>setTimeout executed

2. Promise

Promise 是 JavaScript 中用于异步编程的一个重要概念,它代表了一个尚未完成但预期将来会完成的异步操作的结果。

(1)返回值

Promise 对象有三种状态:pending(进行中)、fulfilled(已成功)和 rejected(已失败)。Promise 提供了 .then().catch() 方法来处理成功和失败的情况,以及 .finally() 方法来处理无论成功或失败都需要执行的代码。

(2)特点

Promise 使得异步操作更加易于管理和理解,可以通过链式调用 .then() 方法来处理多个异步操作,也可以利用 Promise.all()Promise.race() 等方法来并行处理多个异步操作。

(3)基本用法

状态:Promise 有三种状态:pending(进行中)、fulfilled(已成功)和 rejected(已失败)。一旦 Promise 被 fulfilled 或 rejected,它的状态就不能再改变。

执行器函数(Executor Function):Promise 构造函数接受一个执行器函数作为参数,该执行器函数本身接受两个函数作为参数:resolve 和 reject。resolve 函数用于将 Promise 的状态从 pending 变为 fulfilled,而 reject 函数用于将 Promise 的状态从 pending 变为 rejected。

.then() 方法 :Promise 对象上的 .then() 方法用于注册当 Promise 成功(fulfilled)或失败(rejected)时调用的回调函数。.then() 方法返回一个新的 Promise,这允许你进行链式调用。

.catch() 方法.catch() 方法是 .then(null, rejection) 的语法糖,用于处理 Promise 被 rejected 的情况。

.finally() 方法 :无论 Promise 成功还是失败,.finally() 方法都会执行。它主要用于执行那些无论 Promise 结果如何都需要执行的清理操作。

// 创建一个新的Promise  
const promise = new Promise((resolve, reject) => {  
  setTimeout(() => {  
    // 假设异步操作成功  
    resolve('操作成功');  
    // 如果异步操作失败,则应该调用 reject('失败的原因')  
  }, 1000);  
});  
  
// 使用.then()和.catch()处理Promise  
promise.then(result => {  
  console.log(result); // 输出:操作成功  
}).catch(error => {  
  console.error(error); // 只有在 Promise 被 rejected 时才会执行  
});  
  
// 使用.finally()进行清理操作  
promise.finally(() => {  
  console.log('无论成功还是失败,都会执行这段代码');  
});

示例:

console.log("start");
new Promise(function(resolve){
    console.log("1");
    resolve();
    console.log("2");
    setTimeout(function(){
        console.log("Promise resolved");
    });
}).then(function(){
    console.log("then");
});
setTimeout(function(){
    console.log("setTimeout");
})
console.log("end");
// 顺序 start------>1------>2------>end------>then------>Promise resolved------>setTimeout

3. async/await

async/await 是建立在 Promise 之上的,用于简化异步编程的语法糖。async 关键字用于声明一个异步函数,该函数会隐式地返回一个 Promiseawait 关键字用于等待一个 Promise 完成,并返回其结果。

(1)返回值

async 函数会隐式地返回一个 Promise 对象,await 表达式会暂停 async 函数的执行,等待 Promise 解决,然后继续执行 async 函数并返回解决的值。

(2)特点

async/await 使得异步代码看起来和同步代码非常相似,易于阅读和编写。它解决了 Promise 链式调用中的回调地狱问题,提高了代码的可读性和可维护性。

基本用法和示例:

async function asyncFunc() {
    console.log("start");
    const result = await new Promise(function(resolve){
        setTimeout(function(){
            resolve("Async resolved");
        }, 1000);
    });
    console.log(result);
    console.log("end");
}
asyncFunc();
// 顺序 start------>Async resolved------>end

async function async1(){
    console.log("async1 start");
    await async2();
    console.log("async1 end");
}
async function async2(){
    console.log("async2 start");
}
console.log("1");
async1();
console.log("2");
// 顺序 1------>async1 start------>async2 start------>2------>async1 end

注意: Async/Await 不能保证函数一定在指定的时间执行;并不返回 Promise,所以无法使用 then() 链式操作;只有在 async 函数中使用 await 关键字时,才能正常执行。

总结

  • setTimeout 在指定多少秒后执行一个函数,主要用于延迟执行代码,不直接处理异步操作的结果。
  • Promise 提供了处理异步操作成功或失败的方法,并通过链式调用支持复杂的异步流程控制。
  • async/await 建立在 Promise 之上,提供了更加简洁和直观的异步编程语法。
相关推荐
永乐春秋4 分钟前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿5 分钟前
【前端】CSS
前端·css
ggdpzhk7 分钟前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
小曲曲1 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•2 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS3 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜5 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点5 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow5 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o5 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app