初学第二十三章:同步与异步/ajax的应用/模块化js

本文阅读 3 分钟
首页 前端,JavaScript/ES6 正文

什么是同步与异步?

同步操作:顺序执行、异步操作:乱序执行

同步操作中的代码具有可控性能知道下一步会执行什么代码,但是很容易被一些耗时任务给阻塞导致卡住,异步操作中的代码执行顺序是不可控的,但是不会被一些耗时任务阻塞
我们可以将一些加载速度慢的代码用异步任务操作他例如定时器

  1. 定时器任务:setTimeout, setInterval
  2. 事件监听: addEventListener
  3. 网络请求: ajax, promise,fetch
  4. 文件读写等涉及IO的操作

以上都是异步任务

AJAX异步操作方式

传统 XHR异步执行

创建传统的XHR有6步

  1. 创建对象: new XMLHttpRequest();
  2. 响应类型: xhr.responseType = "json";
  3. 配置参数: xhr.open("GET", url, true);
  4. 请求回调: xhr.onload = () => console.log(xhr.response);
  5. 失败回调: xhr.onerror = () => console.log("Error");
  6. 发起请求: xhr.send(null);

l6bi23lw.png

      function f(btn) {
        //   1.创建对象
        let xhr = new XMLHttpRequest();
        // 2.设置响应类型
        xhr.responseType = "json";
        // 3.配置参数 第一个参数是传参方式,第一个参数是读取数据的地址,第三个参数是同步还是异步读取默认是true可以不写
        let url = "https://jsonplaceholder.typicode.com/users";
        xhr.open("GET", url, true);
        //4.请求回调
        xhr.onload = () => {
          console.log(xhr.response);
          render(xhr.response, btn);
        };
        //5.失败回调
        xhr.onerror = () => console.log("Error");
        // 6.发起请求传个空值以防报错
        xhr.send(null);

fetch异步操作方式

发起fetch异步操作
fetch(url).then(res).then(...).catch(err)

l6bjezzc.png

      function f1(btn) {
        let url = "https://jsonplaceholder.typicode.com/users";
        //fecth的所有操作都是异步的可以通过.then使用顺序控制
        fetch(url)
          .then((response) => response.json())
          .then((json) => {
            console.log(json);
            render(json, btn);
          });
      }
      //使用async 和await简化
      async function f2(btn) {
        let url = "https://jsonplaceholder.typicode.com/users?id=1";
        const reponse = await fetch(url);
        const res = await reponse.json();
        console.log(res);
        render(res, btn);
      }

xhr:这个是传统方法 fecth:现在的异步请求操作,基于promise对象

模块化的操作

**模块的概念:用来将可以复用的代码进行封装,方便后续应用中其他模块使用
注:模块导入的时候需要在一对script标签内声明type类型为module
模块导入关键字import 模块导出关键字 export**
  1. 模块导出和导入
    l6blwqhk.png
    l6blx6he.png
  2. 默认导出:一个模块只有一个默认导出
    l6bmbqst.png
    l6bmczzl.png
  3. 命名空间导入
    l6bmyezx.png
    l6bmynkd.png
本文来自投稿,不代表本站立场,如若转载,请注明出处:https://www.hui-xiang.cn/archives/158.html
-- 展开阅读全文 --
初学第二十二章:js购物车/json常用转换API
« 上一篇 08-01
初学第二十四章:node.js安装/npm常用指令
下一篇 » 08-03