美文网首页
41.异步代码解决方案

41.异步代码解决方案

作者: 静昕妈妈芦培培 | 来源:发表于2021-11-25 08:28 被阅读0次

需求:

  • 第一次请求:url: 'aaa',
  • 第二次请求:url: 第一次请求结果拼接上'bbb',
  • 第三次请求:url: 第二次请求结果拼接上'ccc',

方案一

//请求封装
function requestData(url, successCallback, failureCallback) {
  //模拟异步请求
  setTimeout(() => {
    if (typeof url === "string") {
      successCallback(url);
    } else {
      failureCallback("参数url必须是字符串类型");
    }
  }, 3000);
}

//第一次请求
requestData(
  "aaa",
  (res1) => {
    //第二次请求
    requestData(
      res1 + "bbb",
      (res2) => {
        //第三次请求
        requestData(
          res2 + "ccc",
          (res3) => {
            console.log("最终请求结果为", res3);
          },
          (err) => {
            console.log(err);
          }
        );
      },
      (err) => {
        console.log(err);
      }
    );
  },
  (err) => {
    console.log(err);
  }
);

//执行结果:最终请求结果为 aaabbbccc

方案二:promise

//请求封装
function requestData(url) {
  return new Promise((resolve, reject) => {
    //模拟异步请求
    setTimeout(() => {
      if (typeof url === "string") {
        resolve(url);
      } else {
        reject("参数url必须是字符串类型");
      }
    }, 3000);
  });
}

//方式一:
//第一次请求
requestData("aaa").then((res1) => {
  //第二次请求
  requestData(res1 + "bbb").then((res2) => {
    //第三次请求
    requestData(res2 + "ccc").then((res3) => {
      console.log("最终请求结果为", res3);
    });
  });
});
//执行结果:最终请求结果为 aaabbbccc

//方式二:
requestData("aaa")
  .then((res1) => {
    //第二次请求
    return requestData(res1 + "bbb");
  })
  .then((res2) => {
    //第三次请求
    return requestData(res2 + "ccc");
  })
  .then((res3) => {
    console.log("最终请求结果为", res3);
  });

//执行结果:最终请求结果为 aaabbbccc

方案三:promise + generator

//请求封装
function requestData(url) {
  return new Promise((resolve, reject) => {
    //模拟异步请求
    setTimeout(() => {
      if (typeof url === "string") {
        resolve(url);
      } else {
        reject("参数url必须是字符串类型");
      }
    }, 3000);
  });
}


//创建生成器函数
function* getData() {
  const res1 = yield requestData("aaa");
  const res2 = yield requestData(res1 + "bbb");
  const res3 = yield requestData(res2 + "ccc");
  console.log("执行结果:最终请求结果为", res3);
}

//手动执行生成器函数
const generator = getData();

//第一次请求
generator
  .next().value.then((res1) => {
    // 第二次请求
    return generator.next(res1).value;
  })
  .then((res2) => {
    // 第三次请求
    return generator.next(res2).value;
  })
  .then((res3) => {
    generator.next(res3);
  });

// 执行结果:最终请求结果为 aaabbbccc

方案四:promise + generator

封装一个自动执行生成器函数

//请求封装
function requestData(url) {
  return new Promise((resolve, reject) => {
    //模拟异步请求
    setTimeout(() => {
      if (typeof url === "string") {
        resolve(url);
      } else {
        reject("参数url必须是字符串类型");
      }
    }, 3000);
  });
}


//创建生成器函数
function* getData() {
  const res1 = yield requestData("aaa");
  const res2 = yield requestData(res1 + "bbb");
  const res3 = yield requestData(res2 + "ccc");
  console.log("执行结果:最终请求结果为", res3);
}

//封装一个自动执行生成器函数
function execGenerator(generatorFn) {
  const generator = generatorFn();

  function exec(res) {
    const result = generator.next(res);
    if (result.done) return result.value;
    result.value.then((res) => {
      exec(res);
    });
  }
  exec();
}

execGenerator(getData);

方案五:借助co模块

npm install co
const co = require('co')

//请求封装
function requestData(url) {
  return new Promise((resolve, reject) => {
    //模拟异步请求
    setTimeout(() => {
      if (typeof url === "string") {
        resolve(url);
      } else {
        reject("参数url必须是字符串类型");
      }
    }, 3000);
  });
}



//创建生成器函数
function* getData() {
  const res1 = yield requestData("aaa");
  const res2 = yield requestData(res1 + "bbb");
  const res3 = yield requestData(res2 + "ccc");
  console.log("执行结果:最终请求结果为", res3);
}

co(getData)
//执行结果:最终请求结果为 aaabbbccc

方案六:async/await

const co = require("co");

//请求封装
function requestData(url) {
  return new Promise((resolve, reject) => {
    //模拟异步请求
    setTimeout(() => {
      if (typeof url === "string") {
        resolve(url);
      } else {
        reject("参数url必须是字符串类型");
      }
    }, 3000);
  });
}



//创建生成器函数
async function getData() {
  const res1 = await requestData("aaa");
  const res2 = await requestData(res1 + "bbb");
  const res3 = await requestData(res2 + "ccc");
  console.log("执行结果:最终请求结果为", res3);
}

getData();
//执行结果:最终请求结果为 aaabbbccc

非常感谢王红元老师的深入JavaScript高级语法让我学习到很多 JavaScript 的知识

相关文章

  • 41.异步代码解决方案

    需求: 第一次请求:url: 'aaa', 第二次请求:url: 第一次请求结果拼接上'bbb', 第三次请求:u...

  • 从回调函数到 async await,理清异步编程解决方案

    异步解决方案历程 1. 回调函数 回调函数是最开始的异步解决方案,在异步代码执行完后去执行回调函数 这样做有几个缺...

  • Promise

    Promise是异步编程的一种解决方案。异步的一个特点是,由于异步代码执行完的时间不确定,通常需要编写嵌套代码。而...

  • JS异步编程——从一个应用场景讲起

    本文旨在通过实例演示JS异步编程几种常见的解决方案,让你写出最优雅的异步代码。 异步是Javascript区别于其...

  • Promise实现原理

    Promise概述 是异步编程解决方案,本质上讲是callback的变相处理,使得代码更加优雅和可扩展; 异步发展...

  • 初识Promise并手写符合PromiseA+规范的Promis

    ### 背景 Promise是异步编程的一种解决方案,它可以解决异步回调地狱的问题,防止层层嵌套对程序代码带来的难...

  • JavaScript异步处理——Promise

    Promise是一种异步编程解决方案,可以使异步代码更加优雅。 例如,我们需要进行这么一个操作: 向一个url获取...

  • Promise介绍及jQuery deferred详解

    Promise介绍 Promise 是 JavaScript 的异步操作解决方案,是ES6提出的异步操作解决方案之...

  • ES6学习笔记——Generator 函数语法

    Generator 函数是 ES6 提供的一种异步编程解决方案 Generator 函数的基本形式 从上面的代码可...

  • 知识点整理之ES6

    .说说Promise Promise 是异步编程的一种解决方案,比传统的异步解决方案【回调函数】和【事件】更合理、...

网友评论

      本文标题:41.异步代码解决方案

      本文链接:https://www.haomeiwen.com/subject/pzgntrtx.html