【五】Ajax与异步编程之异步编程

【五】Ajax与异步编程之异步编程

【1】异步编程

  • js默认是单线程运行的，这意味着两段代码不能同时运行，所以在同步代码执行过程中，代码是逐行地运行的。

  • 简单来理解就是：

    • 同步按你的代码顺序执行，异步不按照代码顺序执行，异步的执行效率更高。

  • 关于在javascript中异步编程的方式

    • 常用的无非就是定时器、ajax、Promise、Generator、async/await、服务器推技术。

  • 服务器推技术：

    • WebSocket，Worker，EventSource三大技术。

【2】Promise

  • Promise 是ES6推出异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。
    • 它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。
  • Promise 对象是一个代理对象（代理一个值），被代理的值在 Promise 对象创建时可能是未知的。
    • 它允许你为异步操作的成功和失败分别绑定相应的处理方法（handlers）。
    • 这让异步方法可以像同步方法那样返回值，但并不是立即返回最终执行结果，而是一个能代表未来出现的结果的 promise 对象。

Promise的三种状态

  • pending：

    • 初始状态，既不是成功，也不是失败状态；

  • fulfilled：

    • 意味着操作成功完成；

  • rejected：

    • 意味着操作失败。

Promise 对象只有两种状态的变化可能性：

​ pending变为fulfilled状态

​ pending变为rejected状态。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
    var status = false;
    var response = new Promise((resolve, reject)=>{
      // 下载/读取文件等耗时操作，容易阻塞的代码
      // ....
      if(status === false){
        // 写耗时的代码，结果放在resolve作为参数提供给调用者
        resolve("成功的结果");
      }else{
        reject("错误了！！！你玩大了！");
      }
    });
    console.log("1")
    response.then(response=>{
        console.log(response);
    }).catch(error=>{
        console.log(error)
    })
    console.log("2")
    </script>
</body>
</html>

【3】Generator

生成器

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<script>
    // 生成器函数
    function* gen(){
        // yield 暂停
        yield 100
        yield 200
        yield 300
        yield 400
        return 500
    }
    // 生成器函数的返回值就是生成器对象
    let g = gen()
    console.log(g)
    console.log(g.next())
    console.log(g.next())
    console.log(g.next())
    console.log(g.next())
    console.log(g.next()) // 可以获取retrun返回值

    // for循环无法获取生成器的return返回值，仅能回去yield的返回值
    for(let item of gen()){
        console.log(item)
    }

</script>
</body>
</html>

【4】async/await

  • async/await 可以实现协程的简化
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // async 标记当前函数为异步
    async function request() {
        try {
            // await 等待
            const data1 = await fetch("http://127.0.0.1:8080",{mode:"cors"}).then(response=>response.json());
            const data2 = await fetch("http://127.0.0.1:8080",{mode:"cors"}).then(response=>response.json());
            console.log(data1);
            console.log(data2);
        } catch (e) {
            console.log('出错啦');
        }
    }
    request()
    console.log("hello!!")
</script>
</body>
</html>

【5】小结

  • 大部分公司：
    • 前端开发的技术：vue/react/angular + 打包工具 + web服务器软件 + 压缩工具
  • 一部分公司：
    • ts+vue/react/angular + 打包工具 + web服务器软件 + 压缩工具
  • 少部分公司：
    • jquery/bootstap + 打包工具 + web服务器软件 + 压缩工具
posted @ 2023-07-16 15:44  Chimengmeng  阅读(19)  评论(0)    收藏  举报