JS异步编程

最新推荐文章于 2023-07-16 12:13:17 发布
最新推荐文章于 2023-07-16 12:13:17 发布
阅读量177 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_33591715/article/details/114251417
版权

JS异步编程

JS 异步编程方案

JS异步编程的使用

回调函数、事件监听、Promise、Generator、async/await

什么是同步
同步就是在执行某段代码时，在该代码没有得到返回结果之前，其他代码暂时是无法执行的，但是一旦执行完成拿到返回值之后，就可以执行其他代码了。换句话说，在此段代码执行完未返回结果之前，会阻塞之后的代码执行，这样的情况称为同步。

什么是异步
异步就是当某一代码执行异步过程调用发出后，这段代码不会立刻得到返回结果。而是在异步调用发出之后，一般通过回调函数处理这个调用之后拿到结果。异步调用发出后，不会影响阻塞后面的代码执行，这样的情形称为异步。

JS 编程中为什么需要异步
我们都知道 JavaScript 是单线程的，如果 JS 都是同步代码执行意味着什么呢？这样可能会造成阻塞，如果当前我们有一段代码需要执行时，如果使用同步的方式，那么就会阻塞后面的代码执行；而如果使用异步则不会阻塞，我们不需要等待异步代码执行的返回结果，可以继续执行该异步任务之后的代码逻辑。因此在 JS 编程中，会大量使用异步来进行编程。

JS 异步编程的实现方式

回调函数

使用回调函数来实现存在一个很常见的问题： 回调地狱

fs.readFile(A, 'utf-8', function(err, data) {
    fs.readFile(B, 'utf-8', function(err, data) {
        fs.readFile(C, 'utf-8', function(err, data) {
            fs.readFile(D, 'utf-8', function(err, data) {
                //....
            });
        });
    });
});

回调实现异步编程的场景也有很多，比如：

  • ajax 请求的回调
  • 定时器中的回调
  • 事件回调
  • Nodejs 中的一些方法回调

异步回调如果层级很少，可读性和代码的维护性暂时还是可以接受，一旦层级变多就会陷入回调地狱，上面这些异步编程的场景都会涉及回调地狱的问题。

Promise-ECAMSCRIPT2015

采用 Promise 的实现方式在一定程度上解决了回调地狱的问题

function read(url) {
    return new Promise((resolve, reject) => {
        fs.readFile(url, 'utf8', (err, data) => {
            if(err) reject(err);
            resolve(data);
        });
    });
}
read(A).then(data => {
    return read(B);
}).then(data => {
    return read(C);
}).then(data => {
    return read(D);
}).catch(reason => {
    console.log(reason);
});

function read(url) {
    return new Promise((resolve, reject) => {
        fs.readFile(url, 'utf8', (err, data) => {
            if(err) reject(err);
            resolve(data);
        });
    });
}
// 通过 Promise.all 可以实现多个异步并行执行，同一时刻获取最终结果的问题
Promise.all([read(A), read(B), read(C)]).then(data => {
    console.log(data);
}).catch(err => 
    console.log(err)
);

Generator-ECAMSCRIPT2015

最大的特点就是可以交出函数的执行权，Generator 函数可以看出是异步任务的容器，需要暂停的地方，都用 yield 语法来标注。
Generator 函数一般配合 yield 使用，Generator 函数最后返回的是迭代器。
参考文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Iterators_and_Generators

function* gen() {
  console.log("enter");
  let a = yield 1;
  let b = yield (function () {return 2})();
  return 3;
}
var g = gen()           // 阻塞住，不会执行任何语句
console.log(typeof g)   // 返回 object 这里不是 "function"
console.log(g.next())
console.log(g.next())
console.log(g.next())
console.log(g.next()) 
// output:
// { value: 1, done: false }
// { value: 2, done: false }
// { value: 3, done: true }
// { value: undefined, done: true }

async/await-ECAMSCRIPT2016

async 是 Generator 函数的语法糖，async/await 的优点是代码清晰（不像使用 Promise 的时候需要写很多 then 的方法链），可以处理回调地狱的问题

function testWait() {
    return new Promise((resolve,reject)=>{
        setTimeout(function(){
            console.log("testWait");
            resolve();
        }, 1000);
    })
}
async function testAwaitUse(){
    await testWait()
    console.log("hello");
    return 123;
    // 输出顺序：testWait，hello
    // 第十行如果不使用await输出顺序：hello , testWait
}
console.log(testAwaitUse());

深入理解异步编程的核心 Promise

what

简单来说它就是一个容器，里面保存着某个未来才会结束的事件（通常是异步操作）的结果。
从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。

结合JS 异步编程的实现方式-Promise中的代码分析Promise内部的状态流转情况：

一般 Promise 在执行过程中，必然会处于以下几种状态之一

  • 待定（pending）：初始状态，既没有被完成，也没有被拒绝。
  • 已完成（fulfilled）：操作成功完成。
  • 已拒绝（rejected）：操作失败。
待定状态的 Promise 对象执行的话，最后要么会通过一个值完成，要么会通过一个原因被拒绝。
当其中一种情况发生时，我们用 Promise 的 then 方法排列起来的相关处理程序就会被调用。
因为最后 Promise.prototype.then 和 Promise.prototype.catch 方法返回的是一个 Promise， 所以它们可以继续被链式调用。
注意：内部状态改变之后不可逆

解决回调地狱

  1. 回调地狱的问题
    • 多层嵌套
    • 每种任务的处理结果存在两种可能性（成功或失败），那么需要在每种任务执行结束后分别处理这两种可能性
  2. 如何处理
    • 回调函数延迟绑定
    • 返回值穿透
    • 错误冒泡
let readFilePromise = filename => {
  return new Promise((resolve, reject) => {
    fs.readFile(filename, (err, data) => {
      if (err) {
        reject(err)
      } else {
        resolve(data)
      }
    })
  })
}
readFilePromise('1.json').then(data => {
  return readFilePromise('2.json')
});

从上面的代码中可以看到，回调函数不是直接声明的，而是通过后面的 then 方法传入的，即延迟传入，这就是回调函数延迟绑定。

let x = readFilePromise('1.json').then(data => {
  return readFilePromise('2.json')  //这是返回的Promise
});
x.then(/* 内部逻辑省略 */)

我们根据 then 中回调函数的传入值创建不同类型的 Promise，然后把返回的 Promise 穿透到外层，以供后续的调用。这里的 x 指的就是内部返回的 Promise，然后在 x 后面可以依次完成链式调用。这便是返回值穿透的效果。

readFilePromise('1.json').then(data => {
    return readFilePromise('2.json');
}).then(data => {
    return readFilePromise('3.json');
}).then(data => {
    return readFilePromise('4.json');
}).catch(err => {
  // xxx
})

这样前面产生的错误会一直向后传递，被 catch 接收到，就不用频繁地检查错误了。

Promise的静态方法
1. Promise.all

语法： Promise.all（iterable）
参数： 一个可迭代对象，如 Array。
描述： 此方法对于汇总多个 promise 的结果很有用，在 ES6 中可以将多个 Promise.all 异步请求并行操作，返回结果一般有下面两种情况。

  • 当所有结果成功返回时按照请求顺序返回成功。
  • 当其中有一个失败方法时，则进入失败方法。
//1.获取轮播数据列表
function getBannerList(){
  return new Promise((resolve,reject)=>{
      setTimeout(function(){
        resolve('轮播数据')
      },300) 
  })
}
//2.获取店铺列表
function getStoreList(){
  return new Promise((resolve,reject)=>{
    setTimeout(function(){
      resolve('店铺数据')
    },500)
  })
}
//3.获取分类列表
function getCategoryList(){
  return new Promise((resolve,reject)=>{
    setTimeout(function(){
      resolve('分类数据')
    },700)
  })
}
function initLoad(){ 
  Promise.all([getBannerList(),getStoreList(),getCategoryList()])
  .then(res=>{
    console.log(res) 
  }).catch(err=>{
    console.log(err)
  })
} 
initLoad()

Promise.allSettled

语法： Promise.allSettled（iterable）
参数： 一个可迭代对象，如 Array。
描述： 全部处理完成后，我们可以拿到每个 Promise 的状态，而不管其是否处理成功

const resolved = Promise.resolve(2);
const rejected = Promise.reject(-1);
const allSettledPromise = Promise.allSettled([resolved, rejected]);
allSettledPromise.then(function (results) {
  console.log(results);
});
// 返回结果：
// [
//    { status: 'fulfilled', value: 2 },
//    { status: 'rejected', reason: -1 }
// ]

Promise.any

语法： Promise.any（iterable）
参数： 一个可迭代对象，如 Array。
描述： any 方法返回一个 Promise，只要参数 Promise 实例有一个变成 fulfilled 状态，最后 any 返回的实例就会变成 fulfilled 状态；如果所有参数 Promise 实例都变成 rejected 状态，包装实例就会变成 rejected 状态。

const resolved = Promise.resolve(2);
const rejected = Promise.reject(-1);
const allSettledPromise = Promise.any([resolved, rejected]);
allSettledPromise.then(function (results) {
  console.log(results);
});
// 返回结果：
// 2

Promise.race

语法： Promise.race（iterable）
参数： 一个可迭代对象，如 Array。
描述： race 方法返回一个 Promise，只要参数的 Promise 之中有一个实例率先改变状态，则 race 方法的返回状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给 race 方法的回调函数。

//请求某个图片资源
function requestImg(){
  var p = new Promise(function(resolve, reject){
    var img = new Image();
    img.onload = function(){ resolve(img); }
    img.src = 'http://www.baidu.com/img/flexible/logo/pc/result.png';
  });
  return p;
}
//延时函数，用于给请求计时
function timeout(){
  var p = new Promise(function(resolve, reject){
    setTimeout(function(){ reject('图片请求超时'); }, 5000);
  });
  return p;
}
Promise.race([requestImg(), timeout()])
.then(function(results){
  console.log(results);
})
.catch(function(reason){
  console.log(reason);
});

总结

Promise方法总结
all参数所有返回结果为成功才返回
allSettled参数不论返回结果是否成功，都返回每个参数执行状态
any参数中只要有一个成功，就返回改成功的执行结果
race返回最先返回执行成功的参数的执行结果

理解 Generator、Async/await 等异步编程的语法糖

Generator

结合JS 异步编程的实现方式-Generator中的代码分析Generator函数的执行情况：
Generator 中配合使用 yield 关键词可以控制函数执行的顺序，每当执行一次 next 方法，Generator 函数会执行到下一个存在 yield 关键词的位置。
总结Generator的执行：

  1. 调用 gen() 后，程序会阻塞住，不会执行任何语句。
  2. 调用 g.next() 后，程序继续执行，直到遇到 yield 关键词时执行暂停。
  3. 一直执行 next 方法，最后返回一个对象，其存在两个属性：value 和 done。

yield

yield 同样也是 ES6 的新关键词，配合 Generator 执行以及暂停。yield 关键词最后返回一个迭代器对象，该对象有 value 和 done 两个属性，其中 done 属性代表返回值以及是否完成。yield 配合着 Generator，再同时使用 next 方法，可以主动控制 Generator 执行进度。

function* gen1() {
    yield 1;
    yield* gen2();
    yield 4;
}
function* gen2() {
    yield 2;
    yield 3;
}
var g = gen1();
console.log(g.next())
console.log(g.next())
console.log(g.next())
console.log(g.next())
// output:
// { value: 1, done: false }
// { value: 2, done: false }
// { value: 3, done: false }
// { value: 4, done: false }
// {value: undefined, done: true}

从上面的代码中可以看出，使用 yield 关键词的话还可以配合着 Generator 函数嵌套使用，从而控制函数执行进度。这样对于 Generator 的使用，以及最终函数的执行进度都可以很好地控制，从而形成符合你设想的执行顺序。即便 Generator 函数相互嵌套，也能通过调用 next 方法来按照进度一步步执行。

thunk 函数

let isString = (obj) => {
  return Object.prototype.toString.call(obj) === '[object String]';
};
let isFunction = (obj) => {
  return Object.prototype.toString.call(obj) === '[object Function]';
};
let isArray = (obj) => {
  return Object.prototype.toString.call(obj) === '[object Array]';
};
....

可以看到，其中出现了非常多重复的数据类型判断逻辑，平常业务开发中类似的重复逻辑的场景也同样会有很多。我们将它们做一下封装，如下所示。

let isType = (type) => {
  return (obj) => {
    return Object.prototype.toString.call(obj) === `[object ${type}]`;
  }
}

let isString = isType('String');
let isArray = isType('Array');
isString("123");    // true
isArray([1,2,3]);   // true

像 isType 这样的函数我们称为 thunk 函数，它的基本思路都是接收一定的参数，会生产出定制化的函数，最后使用定制化的函数去完成想要实现的功能

Generator 和 thunk 结合

const readFileThunk = (filename) => { // thunk 函数
  return (callback) => {
    fs.readFile(filename, callback);
  }
}
const gen = function* () {
  const data1 = yield readFileThunk('1.txt')
  console.log(data1.toString())
  const data2 = yield readFileThunk('2.txt')
  console.log(data2.toString)
}
let g = gen();
g.next().value((err, data1) => {
  g.next(data1).value((err, data2) => {
    g.next(data2);
  })
})

readFileThunk 就是一个 thunk 函数，上面的这种编程方式就让 Generator 和异步操作关联起来了。上面第三段代码执行起来嵌套的情况还算简单，如果任务多起来，就会产生很多层的嵌套，可读性不强，因此我们有必要把执行的代码封装优化一下，如下所示。

function run(gen){
  const next = (err, data) => {
    let res = gen.next(data);
    if(res.done) return;
    res.value(next);
  }
  next();
}
run(g);

我们可以看到 run 函数和上面的执行效果其实是一样的。

Generator 和 Promise 结合

// 最后包装成 Promise 对象进行返回
const readFilePromise = (filename) => {
  return new Promise((resolve, reject) => {
    fs.readFile(filename, (err, data) => {
      if(err) {
        reject(err);
      }else {
        resolve(data);
      }
    })
  }).then(res => res);
}
// 这块和上面 thunk 的方式一样
const gen = function* () {
  const data1 = yield readFilePromise('1.txt')
  console.log(data1.toString())
  const data2 = yield readFilePromise('2.txt')
  console.log(data2.toString)
}
// 这块和上面 thunk 的方式一样
function run(gen){
  const next = (err, data) => {
    let res = gen.next(data);
    if(res.done) return;
    res.value.then(next);
  }
  next();
}
run(g);

thunk 函数的方式和通过 Promise 方式执行效果本质上是一样的，只不过通过 Promise 的方式也可以配合 Generator 函数实现同样的异步操作。

co 函数库
co 函数库是著名程序员 TJ 发布的一个小工具，用于处理 Generator 函数的自动执行。核心原理其实就是上面讲的通过和 thunk 函数以及 Promise 对象进行配合，包装成一个库。

co 的源码库: https://github.com/tj/co/blob/master/index.js

const co = require('co');
let g = gen();
co(g).then(res =>{
  console.log(res);
})

co 函数库处理原理:

  1. 因为 Generator 函数就是一个异步操作的容器，它需要一种自动执行机制，co 函数接受 Generator 函数作为参数，并最后返回一个 Promise 对象。
  2. 在返回的 Promise 对象里面，co 先检查参数 gen 是否为 Generator 函数。如果是，就执行该函数；如果不是就返回，并将 Promise 对象的状态改为 resolved。
  3. co 将 Generator 函数的内部指针对象的 next 方法，包装成 onFulfilled 函数。这主要是为了能够捕捉抛出的错误。
  4. 关键的是 next 函数，它会反复调用自身。

Async/await

// readFilePromise 依旧返回 Promise 对象
const readFilePromise = (filename) => {
  return new Promise((resolve, reject) => {
    fs.readFile(filename, (err, data) => {
      if(err) {
        reject(err);
      }else {
        resolve(data);
      }
    })
  }).then(res => res);
}
// 这里把 Generator的 * 换成 async，把 yield 换成 await
const gen = async function() {
  const data1 = await readFilePromise('1.txt')
  console.log(data1.toString())
  const data2 = await readFilePromise('2.txt')
  console.log(data2.toString)
}

async 函数对 Generator 函数的改进，主要体现在以下三点:

  1. 内置执行器：Generator 函数的执行必须靠执行器，因为不能一次性执行完成，所以之后才有了开源的 co 函数库。但是，async 函数和正常的函数一样执行，也不用 co 函数库，也不用使用 next 方法，而 async 函数自带执行器，会自动执行。
  2. 适用性更好：co 函数库有条件约束，yield 命令后面只能是 Thunk 函数或 Promise 对象，但是 async 函数的 await 关键词后面，可以不受约束。
  3. 可读性更好：async 和 await，比起使用 * 号和 yield，语义更清晰明了。
CrystalAngelLee
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript中的异步编程
tyxjolin的专栏
04-28 2656
然后，我们使用.then()方法指定一个函数，该函数将结果数组作为参数，并使用Promise.all()方法将结果数组中的所有响应对象转换为文本。在该函数中，我们可以访问响应文本并在控制台中打印它。在上面的例子中，我们定义了一个async函数getData()，并在其中使用Promise.all()方法同时发起两个HTTP请求并等待它们完成。在上面的例子中，我们使用Promise.race()方法处理两个Promise对象，其中一个会在2秒后返回字符串'foo'，另一个会在1秒后返回一个错误对象。
JS 异步编程方法：6种方案
热门推荐
w17624003437的博客
07-19 1万+
javascript语言的执行环境是"单线程"。也就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，在执行后面一个任务这种模式虽然实现起来比较简单，执行环境相对单纯，但是只要一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往是因为莫一段javascript代码长时间运行（比如死循环），导致整个页面卡在这个地方，其他任务无法运行。为了解决这个问题Javascript语言将任务的执行模式分成两种同步和异步。...
JavaScript协程（function*/yield）转化为异步（async/await）
大道至简
08-14 615
现在生成器函数是执行的主体，而调用方则是辅助的。一直感觉这两者之间存在某种联系，奈何智商不够，辗转反侧了好几年，终于查到了一篇醍醐灌顶的回答。函数里进一步包装成Promise，正如上述StackOverflow回答里面所写的那样。的重大意义在于让表达式的返回值“出去再进来”绕了一圈，这样就能在。当然，以上最简单的写法纯属“脱裤子放屁”，没有任何实际功能，把。，是返回数据给调用方的，调用方是主体。在生成器函数里的作用相当于。的关键字，需要写成诸如。后面语句的值，也就是。都删掉结果一样，但是。.........
JavaScript 异步编程
John_jian_yo的博客
07-13 2094
异步的概念 异步（Asynchronous, async）是与同步（Synchronous, sync）相对的概念。 在我们学习的传统单线程编程中，程序的运行是同步的（同步不意味着所有步骤同时运行，而是指步骤在一个控制流序列中按顺序执行）。而异步的概念则是不保证同步的概念，也就是说，一个异步过程的执行将不再与原有的序列有顺序关系。 简单来理解就是：同步按你的代码顺序执行，异步不按照代码顺序执行，异步的执行效果更高： 以上是关于异步的概念的解释，接下来我们通俗地解释一下异步：异步就是从主线程发射一个子
详解JavaScript 异步编程
10-15
JavaScript异步编程是JavaScript开发中不可或缺的一个重要概念，它允许代码在不阻塞主线程的情况下执行耗时操作，从而提高应用程序的响应性和用户体验。本文将深入探讨异步编程的原理、应用场景以及常见的实现方式。...
javascript异步编程
10-29
JavaScript中的异步编程是编程领域中的一个重要概念，它使得开发者能够编写非阻塞式的代码，提高了应用程序的响应性和效率。在同步编程模式中，代码按照顺序执行，每一行代码必须等待其前一行代码完成才能继续，这就...
javascript异步编程的六种方式总结
10-16
本文将详细介绍JavaScript异步编程的六种常见方式。 1. 回调函数 回调函数是最基础的异步编程模式。当一个异步操作完成时，我们传递一个函数作为参数，这个函数将在异步操作完成后被调用。例如，在处理异步的Ajax...
新手如何快速理解js异步编程
10-16
主要介绍了新手如何快速理解js异步编程，异步编程从早期的 callback、事件发布订阅模式到 ES6 的 Promise、Generator 在到 ES2017 中 async，看似风格迥异，但是还是有一条暗线将它们串联在一起的，,需要的朋友可以...
JS 异步编程都有哪些方案？
CRMEB小程序商城的博客
04-26 4021
什么是同步？ 所谓的同步就是在执行某段代码时，在该代码没有得到返回结果之前，其他代码暂时是无法执行的，但是一旦执行完成拿到返回值之后，就可以执行其他代码了。换句话说，在此段代码执行完未返回结果之前，会阻塞之后的代码执行，这样的情况称为同步。 什么是异步？ 所谓异步就是当某一代码执行异步过程调用发出后，这段代码不会立刻得到返回结果。而是在异步调用发出之后，一般通过回调函数处理这个调用之后拿到结果。异步调用发出后，不会影响阻塞后面的代码执行，这样的情形称为异步。 JS 编程中为什么需要异步？ 我们都知道 Jav
JS中异步编程
weixin_61891798的博客
03-08 131
为了解决这种地狱式的回调，可以使用Promise对象，且代码更优雅
详解JS的四种异步解决方案！
最新发布
chengbo_eva的博客
07-16 6882
详解JS的四种异步解决方案！
详解JS的四种异步解决方案！（新增了相亲小栏目~）
u012384510的博客
06-15 1155
大家好，我是若川。我持续组织了近一年的源码共读活动，感兴趣的可以点此扫码加我微信lxchuan12参与，每周大家一起学习200行左右的源码，共同进步。新增两位小姐姐和一位小哥哥：现有【L01】,【L02】,【L03】三个小姐姐，【N01】 一个小哥哥。具体在我的#公众号：若川视野 发消息回复 相应的关键词 获取微信号，或者查看文末。「异步编程」是前端工程师日常开发中经常会用到的技术，也是校...
JS 异步编程的 5 种解决方案
圆圆的 JavaScript 博客
02-23 4820
异步为什么很重要？如何使用异步来有效处理潜在的阻塞操作？我们知道 JS 语言的执行环境是"单线程"，所谓"单线程"，就是指一次只能完成一件任务，这种模式的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。为了解决这个问题，Javascript语言将任务的执行模式分成两种：同步（Synchronous）和异步（Asynchronous）。...
JavaScript异步编程(Promise教程和async、await原理)
qq_40529733的博客
06-05 723
javascript异步编程教程（即：promise使用方法，async、await的原理）
JSON.Stringify
CrystalLee
01-27 1万+
JSON.stringify 是日常开发中经常用到的 JSON 对象中的一个方法，JSON 对象包含两个方法：一是用于解析成 JSON 对象的 parse()；二是用于将对象转换为 JSON 字符串方法的 stringify() JSON.parse 【参考链接： https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse】 JSON.parse() 方法用来解析JSON字符串，构.
JavaScript异步编程：打造快速响应应用
"JavaScript异步编程.pdf" 在JavaScript中，异步编程是开发高效、响应迅速的Web应用程序的关键技术。本书《JavaScript异步编程》深入探讨了这一主题，旨在帮助开发者理解和掌握JavaScript的异步模式，从而编写出...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值