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 之上,提供了更加简洁和直观的异步编程语法。
相关推荐
hackeroink1 小时前
【2024版】最新推荐好用的XSS漏洞扫描利用工具_xss扫描工具
前端·xss
迷雾漫步者3 小时前
Flutter组件————FloatingActionButton
前端·flutter·dart
向前看-3 小时前
验证码机制
前端·后端
燃先生._.4 小时前
Day-03 Vue(生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤)
前端·javascript·vue.js
高山我梦口香糖5 小时前
[react]searchParams转普通对象
开发语言·前端·javascript
m0_748235245 小时前
前端实现获取后端返回的文件流并下载
前端·状态模式
m0_748240256 小时前
前端如何检测用户登录状态是否过期
前端
black^sugar6 小时前
纯前端实现更新检测
开发语言·前端·javascript
寻找沙漠的人7 小时前
前端知识补充—CSS
前端·css