【前端--异步编程】

码上有前

已于 2024-02-16 17:16:06 修改

阅读量225

点赞数

分类专栏：前端文章标签：前端 javascript html

于 2023-04-19 18:08:32 首次发布

本文链接：https://blog.csdn.net/qq_45832651/article/details/130247788

版权

前端专栏收录该内容

23 篇文章 1 订阅

订阅专栏

🚀 作者：“码上有前”
🚀 文章简介：前端

前端--异步编程

往期精彩内容
🍓为什么使用Promise
🍓Promise的基本用法
🍓Promise的方法
🍓常见的问题及回答
🍓async与awite
🍓async基本语法
🍓awite

往期精彩内容

【前端高频面试题–HTML篇】
【前端高频面试题–CSS上篇】
【前端高频面试题–CSS下篇】
【前端高频面试题–JS上篇】
【前端高频面试题–JS下篇】
【前端高频面试题–ES6篇】
【前端高频面试题–ES7-ES11】
【前端–异步编程】
【前端高频面试题–TypeScript篇】

【前端高频面试题–git篇】
【前端高频面试题–微信小程序篇】

【前端高频面试题–Vue基础篇】
【前端高频面试题–虚拟DOM篇】
【前端高频面试题–Vue3.0篇】
【前端高频面试题–Vuex上篇】
【前端高频面试题–Vuex下篇】
【前端高频面试题–Vue生命周期篇】
【前端高频面试题–Vue组件通信篇】
【前端高频面试题–Vue路由篇】

【前端-Vue3创建一个新项目】
【前端大屏自适应缩放】
【前端Vue3 + TS项目开发一般流程】

🍓为什么使用Promise

解决回调地狱

setTimeout(function () {
    console.log("First");
    setTimeout(function () {
        console.log("Second");
        setTimeout(function () {
            console.log("Third");
        }, 3000);
    }, 4000);
}, 1000);

虽然这段程序实现了这个功能，但是它是用 “函数瀑布” 来实现的。但是用 “函数瀑布” 实现的程序无论是维护还是异常处理都是特别繁琐，而且会让缩进格式变得非常冗赘。
现在我们用 Promise 来实现同样的功能：

new Promise(function (resolve, reject) {
    setTimeout(function () {
        console.log("First");
        resolve();
    }, 1000);
}).then(function () {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log("Second");
            resolve();
        }, 4000);
    });
}).then(function () {
    setTimeout(function () {
        console.log("Third");
    }, 3000);
});

总结： Promise不仅解决了回调地狱的问题，同时对于管理异步操作，让异步看起来像同步一样（以同步方式写异步，其实还是异步），代码更加扁平化，使得我们可以书写复杂的异步任务变的更加优雅

🍓Promise的基本用法

语法和实例
Promise是一个构造函数，构造函数通过new实例化对象，Promise 接受函数作参数。该函数是同步的并且会被立即执行，所以我们称之为起始函数。
起始函数包含两个参数 resolve 和 reject，分别表示 Promise 成功和失败的状态。
起始函数执行成功时，它应该调用 resolve 函数并传递成功的结果。失败时，它应该调用 reject 函数并传递失败的原因。

const p = new Promise（（resolve, reject）=> {
	//要处理的事情
}）

state三种状态以及改变方法（调用对应函数）

pending:准备，待解决，进行中
fulfilled：已完成，成功
rejected：已拒绝，失败

注意： 状态改变是一次性的，改了再改其他的就没有用了，pending是默认状态，且修改状态是一次性的，要么调用fulfill，要么rejected
3. result结果
由参数成功失败传入对象结果

const p = new Promise（（resolve, reject）=> {
	resolve('成功的结果')
	//reject（）失败的结果
}）

🍓Promise的方法

Promise 构造函数返回一个 Promise 对象，该对象具有以下几个方法：

then：用于处理 Promise 成功状态的回调函数。
catch：用于处理 Promise 失败状态的回调函数。
finally：无论 Promise 是成功还是失败，都会执行的回调函数。
注意： catch 方法，该方法相当于最近的 then 方法的第二个参数，指向 reject 的回调函数，另一个作用是，在执行resolve回调函数时，如果出错，抛出异常，不会停止运行，而是进入catch 方法中。 catch 只捕获最近的 then 的回调函数，前面的then的执行不成功的结果，有后面 then 的 reject 回调函数执行，如果没有后续 then 回调函数执行，则会被 catch 捕获执行
实例：

const promise = new Promise((resolve, reject) => {
  // 异步操作，我们要做的事情
  setTimeout(() => {
    if (Math.random() < 0.5) {
      resolve('success'); //如果随机数小于0.5，执行promise成功时的状态
    } else {
      reject('error');  //如果随机数大于0.5，执行promise失败时的状态
    }
  }, 1000);
});
 //promise是Promise的实例化对象
promise.then(result => {
  // 这里的result为resolve函数中传入的参数	
  console.log(result);
}).catch(error => {
// 这里的error 为reject函数中传入的参数	
  console.log(error);
});

Promise 类有 .then() .catch() 和 .finally() 三个方法，这三个方法的参数都是一个函数，.then() 可以将参数中的函数添加到当前 Promise 的正常执行序列，.catch() 则是设定 Promise 的异常处理序列，.finally() 是在 Promise 执行的最后一定会执行的序列。 .then() 传入的函数会按顺序依次执行，有任何异常都会直接跳到 catch 序列
实例：

new Promise(function (resolve, reject) {
    console.log(1111);
    resolve(2222);
}).then(function (value) {
    console.log(value);
    return 3333;
}).then(function (value) {
    console.log(value);
    throw "An error";
}).catch(function (err) {
    console.log(err);
});
//输出结果： 1111 2222 3333 An error

解析如下图：
在这里插入图片描述
resolve() 中可以放置一个参数用于向下一个 then 传递一个值，then 中的函数也可以返回一个值传递给 then。
但是，如果 then 中返回的是一个 Promise 对象，那么下一个 then 将相当于对这个返回的 Promise 进行操作，这一点从刚才的计时器的例子中可以看出来。
reject() 参数中一般会传递一个异常给之后的 catch 函数用于处理异常。

注意：

resolve 和 reject 的作用域只有起始函数 （Promise对象的参数），不包括 then 以及其他序列；
resolve 和 reject 并不能够使起始函数停止运行，别忘了 return。

//最上述回调地狱的代码使用Promise函数之后
print(1000, "First").then(function () {
    return print(4000, "Second");
}).then(function () {
    print(3000, "Third");
});

🍓常见的问题及回答

Q: then、catch 和 finally 序列能否顺序颠倒？
A: 可以，效果完全一样。但不建议这样做，最好按 then-catch-finally 的顺序编写程序。有利于阅读与维护

Q: 除了 then 块以外，其它两种块能否多次使用？
A: 可以，finally 与 then 一样会按顺序执行，但是 catch 块只会执行第一个，除非 catch 块里有异常。所以最好只安排一个 catch 和 finally 块。

Q: then 块如何中断？
A: then 块默认会向下顺序执行，return 是不能中断的，可以通过 throw 来跳转至 catch 实现中断。

Q: 什么时候适合用 Promise 而不是传统回调函数？
A: 当需要多次顺序执行异步操作的时候，例如，如果想通过异步方法先后检测用户名和密码，需要先异步检测用户名，然后再异步检测密码的情况下就很适合 Promise。

Q: Promise 是一种将异步转换为同步的方法吗？
A: 完全不是。Promise 只不过是一种更良好的编程风格。

Q: 什么时候我们需要再写一个 then 而不是在当前的 then 接着编程？
A: 当你又需要调用另一个异步任务的时候。

🍓async与awite

以上的实例也可以使用async和awite来解决

//使用async来标记一个函数asyncFunc（）
//在函数体内执行异步操作
async function asyncFunc() {
    await print(1000, "First");
    await print(4000, "Second");
    await print(3000, "Third");
}
asyncFunc();

大吃一斤！这岂不是将异步操作变得像同步操作一样容易了吗！
异步函数 async function 中可以使用 await 指令，await 指令后必须跟着一个 Promise，异步函数会在这个 Promise 运行中暂停，直到其运行结束再继续运行。
异步函数实际上原理与 Promise 原生 API 的机制是一模一样的，只不过更便于程序员阅读。处理异常的机制将用 try-catch 块实现：

async function asyncFunc() {
    try {
        await new Promise(function (resolve, reject) {
            throw "Some error"; // 或者 reject("Some error")
        });
    } catch (err) {
        console.log(err);
        // 会输出 Some error
    }
}
asyncFunc();

如果 Promise 有一个正常的返回值，await 语句也会返回它：

async function asyncFunc() {
    let value = await new Promise(
        function (resolve, reject) {
            resolve("Return value");
        }
    );
    console.log(value);
}
asyncFunc();
//输出 Return value

🍓async基本语法

async 是 ES7 才有的与异步操作有关的关键字，和 Promise ， Generator 有很大关联的。
语法

async function name([param[, param[, ... param]]]) { statements }
// name ：函数的名称
// param： 要传递给函数的参名称
// statements ： 函数体语句
// return ： async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数。

实例：

async function helloAsync(){
    return "helloAsync";
  }
console.log(helloAsync())  // Promise {<resolved>: "helloAsync"} Promise对象
//返回的是promise对象可以直接调用then方法
helloAsync().then(v=>{
   console.log(v);         // helloAsync
})

🍓awite

async 函数中可能会有 await 表达式，async 函数执行时，如果遇到 await 就会先暂停执行，等到触发的异步操作完成后，恢复 async 函数的执行并返回解析值。
await 关键字仅在 async function 中有效。如果在 async function 函数体外使用 await ，你只会得到一个
实例:

function testAwait(){
   return new Promise((resolve) => {
       setTimeout(function(){
          console.log("testAwait");
          resolve();
       }, 1000);
   });
}
 
async function helloAsync(){
   await testAwait();
   console.log("helloAsync");
 }
helloAsync();
// testAwait
// helloAsync

await 操作符用于等待一个 Promise 对象, 它只能在异步函数 async function 内部使用.
语法：[return_value] = await expression;
expression: 一个 Promise 对象或者任何要等待的值。
返回：

function testAwait (x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}
 
async function helloAsync() {
  var x = await testAwait ("hello world");
  console.log(x); 
}
helloAsync ();
// hello world

正常情况下，await 命令后面是一个 Promise 对象，它也可以跟其他值，如字符串，布尔值，数值以及普通函数。

function testAwait(){
   console.log("testAwait");
}
async function helloAsync(){
   await testAwait();
   console.log("helloAsync");
}
helloAsync();
// testAwait
// helloAsync

await针对所跟不同表达式的处理方式：

Promise 对象：await 会暂停执行，等待 Promise 对象 resolve，然后恢复 async 函数的执行并返回解析值。
非 Promise 对象：直接返回对应的值。

实例

async function a(){  
  console.log("1")  
   console.log("2")
}
a()
console.log("3")
//打印： 1 2 3

使用await测试

async function a(){  
  await 1  
  console.log("1")  
  console.log("2")
}
a()
console.log("3")
//打印： 3 1 2

又一实例

function getApiData() {
    // Promise异步编程的一种解决方案
    // 第一个参数是 Promise 执行成功时的回调，第二个参数是 Promise 执行失败时的回调
    return new Promise((resolve, reject) => {
        // 模拟延迟(获取服务的数据) 
       setTimeout(() => {
            // 执行成功
            resolve({name: 'kandy', age: 99})
        }, 3000)
    })
}

let user = {}

async function getUser() {
    // 执行 
   await getApiData().then(res => {
        user = res
    })
    // await后的该代码块在此会阻塞,直到 getApiData 执行后 then 完成工作后才能继续往下执行    
    console.log('获取数据完成: ', user)
}

getUser()  // 异步执行的方法
console.log('开始获取数据:')  // 此处无阻塞(同步代码)

//结果
//开始获取数据: 
//三秒后：获取数据完成:  {name: 'kandy', age: 99}