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，需要则点击浏览

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，需要则点击浏览

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 关键字时，才能正常执行。

4.谁最有优势

优势：async\await > Promise > setTimeout

虽然数字相加本身通常不需要异步处理，它几乎是瞬间完成的，但以构造一个简化的例子来表现每个“相加”步骤都模拟为异步操作，并且每个步骤的结果都依赖于前一个步骤的结果。

（1）setTimeout案例

// setTimeout加回调函数
let total = 0;  
function addAsync(a, callback) {  
    setTimeout(() => {  
        const result = a + 10;  
        callback(result); 
    }, 1000); 
}       
// 第一步
addAsync(10,(result) => {  
    total = result; // 更新总和  
    console.log(`First: ${result}`); // 20
    // 第二步
    addAsync(total,(result) => {  
        total = result; // 更新总和  
        console.log(`Second: ${result}`); // 30
        // 第三步 
        addAsync(total,(result) => {  
            console.log(`Third: ${result}`); // 40
        });  
    });  
});

（2）Promise 案例

// Promise
function addAsync1(a) {  
    return new Promise((resolve, reject) => {  
        setTimeout(() => {  
            const result = a + 10;  
            resolve(result);  
        }, 1000);  
    });  
}     
// 使用Promises链  
addAsync1(1)  
    .then(result1 => {  
        console.log(`First : ${result1}`); // 11 
        return addAsync1(result1);  
    })  
    .then(result2 => {  
        console.log(`Second : ${result2}`); // 21 
        return addAsync1(result2);  
    })  
    .then(result3 => {  
        console.log(`Third : ${result3}`); // 31
    })  
    .catch(error => {  
        console.error('Error', error);  
    });

（3）async\await 案例

function addAsync1(a) {    
    return new Promise((resolve, reject) => {    
        setTimeout(() => {    
            const result = a + 10;    
            resolve(result);    
        }, 1000);    
    });    
}  
// 定义一个异步函数来封装你的逻辑  
async function runSteps() {  
    try {  
        const result1 = await addAsync1(1);    
        console.log(`First : ${result1}`); // 11  

        const result2 = await addAsync1(result1);    
        console.log(`Second : ${result2}`); // 21  

        const result3 = await addAsync1(result2);    
        console.log(`Third : ${result3}`); // 31  
    } catch (error) {  
        console.error('Error', error);    
    }  
}   
// 调用异步函数  
runSteps();

async\await 案例的代码就清晰很多，几乎和同步代码一样

总结

• setTimeout 在指定多少秒后执行一个函数，主要用于延迟执行代码，不直接处理异步操作的结果。
• Promise 提供了处理异步操作成功或失败的方法，并通过链式调用支持复杂的异步流程控制。
• async/await 建立在 Promise 之上，提供了更加简洁和直观的异步编程语法。