settimeout,promise,async的区别

setTimeout、Promise 和 async/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 关键字用于声明一个异步函数,该函数会隐式地返回一个 Promise。await 关键字用于等待一个 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 之上,提供了更加简洁和直观的异步编程语法。
相关推荐
IT_陈寒2 小时前
Java中equals方法比了个寂寞?原来这才是正确的重写姿势
前端·人工智能·后端
默_笙2 小时前
🚓 分诊台与拆题术:让 RAG 学会判断和规划
前端·javascript
CopyCode2 小时前
用 AI 迁项目有多爽?我把 Webpack 迁 Vite 的全过程记下来了
前端·架构
去伪存真2 小时前
Electron 自动化发布指南:GitHub Actions 跨平台打包全纪录
前端·electron
计算机魔术师2 小时前
OpenAI智能体失控闯进美国政府网站,53张用户图片外泄背后
前端
颜进强2 小时前
14 · NestJS ExecutionContext 执行上下文:守卫、拦截器、过滤器拿到的"同一个 context",为什么能力不一样?
前端·后端·ai编程
程序员Flycan2 小时前
🚀 跨域终结者:前端代理服务器(Proxy)原理解析与配置总结
前端
怕浪猫2 小时前
顶级模型一句话,AI 写出了能玩的 QQ飞车
前端·面试·github
huakoh2 小时前
MCP 报错分不清?先看响应里是 result 还是 error
前端
呃呃呃呃ex2 小时前
10. 现代前端工程化:ES6 React 项目实战与原理解析
前端·javascript