promise AsyncAwait 的使用

promise Async/Await 的使用

**promise是一个对象 用来处理异步请求 将其同步化 例如处理回调地狱 主要利用 其then cath finally 方法 **

// 解决回调地狱的方法：使用Promise对象进行封装
function getWords(words,times){
    return new Promise(function(resolve,reject){
        let flag = true
        if(flag){
            setTimeout(function(){
                console.log(words);
            },times)
            resolve("成功")
        }else{
            reject("失败")
        }
    })
}


// 可以通过链式调用，降异步操作同步化
getWords("0000",3000).then(res=>{
  console.log(res);
  return getWords("1111",3000*2)
}).then(res=>{
  console.log(res);
  return getWords("2222",3000*3)
}).then(res=>{
  console.log(res);
  return getWords("3333",3000*4)
}).then(res=>{
  console.log(res);
  return getWords("4444",3000*5)
})

    
    // 回调地狱
    // 案例需求：依次隔3s 输出0000 11111 22222  33333
    setTimeout(function(){
        console.log("00000");
        setTimeout(function(){
            console.log("1111");
            setTimeout(function(){
                console.log("222");
                setTimeout(function(){
                    console.log("333");
                    setTimeout(function(){
                        console.log("44444");
                    },3000)
                },3000)
            },3000)
        },3000)
    },3000)

Promise 是一种用于处理异步操作的对象，它代表了异步操作最终完成（或失败）及其结果值的状态。Promise 对象有以下状态：

1. Pending（待定）：初始状态，既不是成功，也不是失败状态。
2. Fulfilled（已实现）：意味着操作成功完成。
3. Rejected（已拒绝）：意味着操作失败。

Promise 对象有以下主要特点：

1. 对象的状态不受外界影响：Promise 对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。
2. 一旦状态改变，就不会再变，任何时候都可以得到这个结果：Promise 对象的状态改变，只有两种可能：从 pending 变为 fulfilled 和从 pending 变为 rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。就算改变已经发生了，你再对 Promise 对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

Promise 对象主要有以下方法：

• then()：Promise 对象实例生成以后，可以用 then 方法分别指定 resolved 状态和 rejected 状态的回调函数。
• catch()：Promise.prototype.catch() 方法是 .then(null, rejection) 的别名，用于指定发生错误时的回调函数。
• finally()：无论 Promise 对象是 resolved 还是 rejected，都会执行指定的回调函数。

Promise 对象通常用于处理如网络请求、定时器、文件读写等异步操作，它可以让我们以更优雅的方式组织异步代码，避免回调地狱，提高代码的可读性和可维护性。

Async/Await

async/await是ES7提出的新语法，用来简化Promise的异步操作.then()链式调用，Promise虽然解决了回调地狱的问题，但是代码冗长，阅读性差，不易理解

所以就有了async/await

1、async修饰过的函数，会变成一个异步函数，函数返回的是一个Promise对象,

如果函数返回一个值，promise会把这个值通过promise.resolve()封装成一个promise对象

2、await是等待的意思

因为 async 函数返回一个 Promise 对象，所以 await 可以用于等待一个 async 函数的返回值

//回调地狱的特点：
    // 1、代码耦合性太强  牵一发而动全身  维护困难
    // 2、代码冗余  可读性差

    // 解决回调地狱的方法：使用Promise对象进行封装
    function getWords(words,times){
        return new Promise(function(resolve,reject){
            // 异步操作代码写在此处
            let flag = true
            if(flag){
                setTimeout(function(){
                    console.log(words);
                },times)
                resolve("成功")
            }else{
                reject("失败")
            }
        })
    }


    // 可以通过链式调用，将异步操作同步化
    // getWords("0000",3000).then(res=>{
    //     console.log(res);
    //     return getWords("1111",3000*2)
    // }).then(res=>{
    //     console.log(res);
    //     return getWords("2222",3000*3)
    // }).then(res=>{
    //     console.log(res);
    //     return getWords("3333",3000*4)
    // }).then(res=>{
    //     console.log(res);
    //     return getWords("4444",3000*5)
    // })



    // 使用 async  await来来解决Promise .then链式调用，代码冗余的问题
    // async  await是基于promise的
    async function func(){
        let res1 = await getWords("0000",3000)
        console.log(res1);
        let res2 = await getWords("1111",3000*2)
        let res3 = await getWords("2222",3000*3)
        let res4 = await getWords("3333",3000*4)
        let res5 = await getWords("4444",3000*5)
        
    }

    func()

async 是一个修饰符将函数声明成异步 并且返回为Promise对象 await 等待promise返回值 如果出错将 用try catch捕获

async 和 await 是 JavaScript 中用于处理异步操作的关键字，它们建立在 Promise 的基础上，提供了一种更直观、更易于理解和使用的异步编程方式。

1. async：
   • async 是一个修饰符，用于声明一个函数是异步的。
   • 异步函数总是返回一个 Promise 对象。即使函数中没有显式地使用 return 语句，也会返回一个解析为 undefined 的 Promise。
   • 在异步函数内部，你可以使用 await 关键字来等待一个 Promise 的结果。
2. await：
   • await 是一个只能在 async 函数内部使用的关键字。
   • 它用于等待一个 Promise 的完成，并返回 Promise 的结果。
   • 如果 Promise 被拒绝（即出现错误），则 await 表达式会抛出一个错误。你可以使用 try/catch 结构来捕获和处理这个错误。
   • 使用 await 可以使异步代码看起来更像同步代码，提高了代码的可读性和可维护性。

基本用法：

async function fetchData() {  
    try {  
        let response = await fetch('https://api.example.com/data'); // 等待 fetch 函数的 Promise 完成  
        let data = await response.json(); // 等待 Promise 的 json 方法完成，并返回 JSON 数据  
        console.log(data);  
    } catch (error) {  
        console.error('Error fetching data:', error);  
    }  
}  
  
fetchData(); // 调用异步函数

在这个例子中，fetchData 是一个异步函数，它使用 await 来等待 fetch 函数的 Promise 完成，并获取响应。然后，它再次使用 await 来等待 Promise 的 json 方法完成，并返回 JSON 数据。如果在等待过程中发生错误，错误会被 catch 块捕获并处理。

---

res => { console.log(res); } 这样的代码

当你看到 res => { console.log(res); } 这样的代码片段时，它是一个箭头函数（Arrow Function）的表达式。这个箭头函数接收一个参数 res，并在函数体内使用 console.log(res); 来打印这个参数的值。

这里是该代码的详细解释：

1. 箭头函数：箭头函数是ES6（ECMAScript 2015）中引入的一种新的函数表示法。它提供了一种更简洁的语法来编写函数，特别是在你需要一个匿名函数时。
2. 参数：在这个箭头函数中，res 是一个参数。当你调用这个函数并传递一个值时，这个值会被赋给 res。
3. 函数体：{ console.log(res); } 是这个箭头函数的函数体。它只包含一条语句，即使用 console.log 来打印 res 的值。
4. 用法：这个箭头函数通常会被用作一个回调函数，比如在一个异步操作（如 Promise、Fetch API 调用等）完成后被调用，并将结果作为参数传递给这个函数。例如：

someAsyncOperation()  
    .then(res => {  
        console.log(res); // 当异步操作成功完成时，这里会打印出操作的结果  
    })  
    .catch(error => {  
        console.error(error); // 如果异步操作失败，这里会打印出错误信息  
    });

在这个例子中，someAsyncOperation() 是一个返回 Promise 的函数，当这个 Promise 解决（fulfilled）时，.then() 方法中的箭头函数会被调用，并将 Promise 的结果作为参数 res 传递给这个函数。如果 Promise 被拒绝（rejected），则 .catch() 方法中的箭头函数会被调用，并将拒绝的原因作为参数传递给这个函数。