简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >1. xhr与fetch异步编程的步骤,实例演示 2. 模块成员导出与导入,别名使用场景与命名空间演示

1. xhr与fetch异步编程的步骤,实例演示 2. 模块成员导出与导入,别名使用场景与命名空间演示

P粉314265155
P粉314265155原创
2022年08月03日 19:27:25432浏览

同步与异步

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>同步与异步</title>
  8. </head>
  9. <body>
  10. <!-- 定数器 -->
  12. <script>
  13.     /**
  14.        * (一): 同步与异步
  15.        * 1. 同步: 顺序执行, 优点: 静态预判结果可控, 缺点: 耗时任务阻塞执行
  16.        * 2. 异步: 乱序执行, 优点: 不会阻塞代码,体验好, 缺点: 顺序不可控
  17.        *
  18.        * 以银行排队办业务为例
  19.        * 1. 同步: 默认排队叫号, 依次办理
  20.        * 2. 异步: 耗时任务(如修改密码忘带身份证)则离开队列, 后面任务继续
  21.        * 3. 任务队列: 取了身份证回来了, 就待在"任务队列"中等待再次叫号
  22.        *
  23.        * 哪些是异步任务(耗时)?
  24.        * 1. 定时任务: setTimeout, setInterval
  25.        * 2. 事件监听: addEventListener
  26.        * 3. 网络请求: ajax, promise,fetch
  27.        * 4. 文件读写等涉及IO的操作
  28.        *
  29.        * -----------------------------------------------------------------
  30.        *
  31.        * (二) 进程与线程
  32.        * 1. 进程: 程序的运行状态, 执行实例
  33.        * 2. 一个cpu同一时刻只能执行一个进程,通过上下文切换实现多任务,除非多核
  34.        * 3. 线程: 进程中的某个任务,即一个进程,可以由多个线程完成
  35.        * 4. js的特征,决定了它只能是单线程,例如dom操作中, 增删元素就不可能同时进行
  36.        * 5. 单线程可确保js按用户要求的顺序执行,并确定业务逻辑正确,结果可控
  37.        * 6. 但是单线程,也决定了所有任务必须在一个执行栈中完成,导致耗时任务必然会阻塞整个线程
  38.        * 7. 解决文案: 任务队列与事件循环(事件轮询)
  39.        * 通信解释:http://www.ruanyifeng.com/blog/2013/04/processes_and_threads.html
  40.        *
  41.        * -----------------------------------------------------------------
  42.        *
  43.        * (三) 单线程,任务队列,事件循环之间的关系与协同
  44.        * 1. js所有任务都在主线程中"同步"执行
  45.        * 2. 异步任务以回调的形式声明,并离开主线程,交给多线程的浏览器去执行
  46.        * 3. 异步任务执行完毕,进入到"任务队列"中排队等待进入主线程执行
  47.        * 4. 主线程同步任务全部完成后, 通过"事件循环"查询"任务队列"中是否有等待的任务
  48.        * 5. 如果有,则该就绪任务进入主线程同步执行
  49.        * 6. 该任务完成后, 事件循环会再次取出下一个就绪的异步任务进入主线程
  50.        * 7. 以上过程不断重复, 直到主线程中的同步任务, 任务队列中的异步任务全部执行完毕
  51.        */
  53.       // 定时器演示
  54.       // console.log(): 同步代码, 在函数栈/单线程中执行
  55.     console.log('100');
  56.     console.log('200');
  57.     console.log('300');
  58.     console.log('--------');
  59.     console.log('10');
  60.     setTimeout(function(){
  61.         console.log('20');
  62.     },5000);
  63.     setTimeout(() => {console.log('21'); },6000);
  64.     setTimeout('console.log(400)', 2000);
  66.     console.log('30');
  67.     // 异步任务优先级比 setTimeout高
  68.     window.onload = ( ) => console.log('等待');
  69. </script>
  70. </body>
  71. </html>

效果

ajax-xhr

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>ajax-xhr</title>
  8. </head>
  9. <body>
  10.      <button onclick="getUser1(this)">查询用户信息:XHR</button>
  11.      <button onclick="getUser2(this)">查询用户信息:fetch</button>
  12.   <script>
  13.     //  AJAX  : 局部更新，用户不需要离开当前页面就能看到新内容
  14.  // 1. 传统 XHR
  15.       /**
  16.        * 1. 创建对象: new XMLHttpRequest();
  17.        * 2. 响应类型: xhr.responseType = "json";
  18.        * 3. 配置参数: xhr.open("GET", url, true);
  19.        * 4. 请求回调: xhr.onload = () => console.log(xhr.response);
  20.        * 5. 失败回调: xhr.onerror = () => console.log("Error");
  21.        * 6. 发起请求: xhr.send(null);
  22.        *
  23.        * xhr 至少监听2个事件: load,error, 调用2个函数: open,send
  24.        * post请求,需要设置一下请求头与请求的数据,其它与get请求完全相同
  25.        */
  26.       function  getUser1 ( btn) {
  27.     //   1. 创建对象: new XMLHttpRequest();
  28.         const xhr = new XMLHttpRequest();
  29.     //    * 2. 响应类型: xhr.responseType = "json";
  30.         xhr.responseType = "json"
  31.     //    * 3. 配置参数: xhr.open("GET", url, true);  默认 是 true  可以不写
  32.     // let url = 'https://jsonplaceholder.typicode.com/users';
  34.     let url = 'https://jsonplaceholder.typicode.com/users?id=1';
  35. //    不传 get  参数默认是所有用户信息  ， // 如果有get参数,用户id,用ul列表显示
  36.     xhr.open("GET", url, true);
  37.     //    * 4. 请求回调: xhr.onload = () => console.log(xhr.response);
  38.     xhr.onload = () =>
  39.      {
  40.         console.log(xhr.response);
  41.         render(xhr.response, btn);
  42.     }
  44.     //    * 5. 失败回调: xhr.onerror = () => console.log("Error");
  45.     xhr.onerror = () => console.log("Error");
  46.     //    * 6. 发起请求: xhr.send(null);
  47.     xhr.send(null);
  48. }
  49.     </script>
  51.       <script>
  52.         //2、 fetch  链式操作    操作都是异步的，通过then  使顺序可控. then （里面是函数）
  53.           /**
  54.        * fetch(url)
  55.        * .then(res) 
  56.        * .then(...)
  57.        * .catch(err)
  58.        */
  59.       function getUser2 ( btn ) {
  60.         let url = 'https://jsonplaceholder.typicode.com/users?id=2';
  61.         fetch( url)
  62.         .then (function (response){
  63.             return response.json();
  64.         }  )
  65.         .then (function(json){
  66.             // 控制台
  67.             console.log(json);
  68.             // 页面渲染到页面
  69.             render(json,btn)
  70.         } );
  71.     /**
  72.        * xhr 与 fetch?
  73.        * 1. xhr: 传统ajax
  74.        * 2. fetch: 现代异步请求, 推荐,基于Promise对象
  75.        */
  76.       }
  78.       </script>
  79.         <script src="../0801/0801/js/function.js"></script>
  80. </body>
  81. </html>

效果

fetch-api 、async、await

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>fetch-api 、async、await</title>
  8. </head>
  9. <body>
  10.     <!-- fetch-api  是浏览器原生实现的异步技术  可直接用 -->
  11.     <button onclick="getUser(this)">查询用户信息: Fetch</button>
  12.     <script>
  13.         // axios : 基于 异步  xhr 、fetch
  14.         // fetch  ：基于 promise  ，返回 promise 对象
  15.         // console.log(fetch());
  16. //         fetch('https://jsonplaceholder.typicode.com/todos/1')
  17. //   .then(response => response.json())
  18. //   .then(json => {
  19. //     console.log(json)
  20. // });
  21. // async   当前是个异步函数
  23.  async    function getUser( btn){
  24.     let url = 'https://jsonplaceholder.typicode.com/todos/1';
  25.     //  异步耗时操作，需要等待结果才能进入一下步
  26.     const response = await fetch(url);
  27. //    获取到 结果之后，再转为json
  28.   const result =    await   response.json()
  29.     console.log(result);
  30.     render(result,btn);
  31.  }
  32.     </script>
  33.     <script src="../0801/0801/js/function.js"></script>
  34.     <script>
  35.               // fetch api : 浏览器原生实现的异步技术
  36.       // axios: 基于 xhr / fetch
  37.       // fetch: 基于Promise, 返回 Promise对象
  39.       //   console.log(fetch());
  40.       //   fetch('https://jsonplaceholder.typicode.com/todos/2')
  41.       //     .then(response => response.json())
  42.       //     .then(json => console.log(json));
  44.       //   fetch('https://jsonplaceholder.typicode.com/users')
  45.       //     .then(response => response.json())
  46.       //     .then(json => console.log(json));
  48.       // 下面我们请求自己的数据接口
  49.       //   let url = 'http://website.io/users.php';
  50.       //   fetch(url)
  51.       //     .then(response => response.json())
  52.       //     .then(json => console.log(json));
  54.       // 报 CORS 跨域请求错误
  55.       // 同源策略: 仅允许"协议相同,域名相同,端口相同",否则就是跨域请求,这是禁止的
  57.       //   function getUser(btn) {
  58.       //     let url = 'http://website.io/users.php?id=1';
  59.       //     fetch(url)
  60.       //       .then(response => response.json())
  61.       //       .then(json => {
  62.       //         console.log(json);
  63.       //         // 将数组渲染到页面中
  64.       //         render(json, btn);
  65.       //       });
  66.       //   }
  68.       //   ECMA2017中, 有async,await,用来简化异步回调方法
  69.       // async: 当前是一个异步函数
  70.     </script>
  71. </body>
  72. </html>

效果

模块的导入与导出

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>模块成员导出与导入</title>
  8. </head>
  9. <body>
  10.     <!-- 默认script在浏览器环境下不支持模块,需要指定type -->
  11.     <script type="module">
  12.         // js中, 所有代码共用一个全局作用域: window
  14.         // 导入模块
  15.         import { username1, hello } from './zuoyemodules/m1.js';
  16.         console.log(hello());
  17.         console.log(username1);
  18.         console.log(hello(username1));
  19.         console.log('==============');
  20.         import{ username2, hello2 }from './zuoyemodules/m1.js';
  21.         console.log(hello2());
  22.         console.log(username2);
  23.         console.log(hello(username2));
  25. console.log('==============');
  26.         import   {myname,getName}  from './zuoyemodules/m1.js';
  27.         console.log(getName());
  28.         console.log(myname);
  29.          console.log(getName(myname));
  30.          console.log('==============');
  31. // 当前模块中不允许有 重名的成员
  32. import {   myname4 as name   ,  getName4 as  getUser }  from './zuoyemodules/m1.js';
  33.   let myname4 = '小龙'
  35.    function getName4 (name) {
  36.     return 'hell' +name; 
  38.    }
  39.    console.log(name);
  40.    console.log(getUser(name));
  42.    console.log('==============');
  43. //    导入模块的默认成员 不要用对象字面量，用标识符
  44. // 只要不用对象字面量接收模块成员，就是默认导出
  45. // 自己命名 User
  46. import User from   './zuoyemodules/m1.js';
  48. console.log(typeof User);
  49. const user = new User('小猫')
  50. console.log(user.username5);
  51. console.log(user.geUsername5(user.username5));
  52. console.log('==============');
  53. // 只要不用对象字面量接收模块成员，就是默认导出
  54. //   混合导入
  55. // 接收混合导入成员，默认成员命名，必须要放到 非默认的前面
  56. // import  useremail , { username6, hello6} from './zuoyemodules/m2.js';
  57. // console.log(useremail);
  59. // console.log(username6);
  60. // console.log(hello6(username6));
  62.   </script>
  63. </body>
  64. </html>

JS

  1. // js 模块知识
  2. // 模块就是一个js文档
  3. //  模块有自己独立的作用域（全局、函数、块）
  4. // 模块内成员，默认全部私有。只有导出后才能呗外部使用
  5. // 1、逐个导出
  6. // export  let username1 = "小猪" ;
  7. // export function hello (username1){
  8. //     return 'hello,  ${username1}';
  9. //     // return ' ${username1}';
  10. // }
  11. export let username1 = '猪老师';
  12. export function hello(username1) {
  13.     // 注意反引号
  14.   return `Hello, ${username1}`;
  15. }
  17. // 2、批量导出
  18. // 两步走
  19. // 2.1、声明
  21. let username2 = '小狗';
  22. function hello2 (username2 ){
  23.     // 注意反引号
  24.   return `hello,${username3}`;
  25. }
  26. // 2.2批量导出
  27. export  {username2,hello2};
  30. // 3 别名导出
  31. // 3.1声明
  32. let username3 = '小马';
  33. function hello3 (username3){
  34.   return `Hello, ${username3}`;
  35. }
  36. // 3.2 别名导出
  37. export  {username3 as myname ,hello3  as getName};
  39. // 4 别名导出
  40. // 4.1声明
  41. let username4 = '小马';
  42. function hello4 (username4){
  43.   // 注意反引号
  44.   return `hello,${username4}`;
  45. }
  46. // 4.2 别名导出
  47. export  {username4 as myname4 ,hello4  as getName4};
  49. //5、 默认导入
  50. // 5.1、
  51. export default class {
  52. constructor (username5) {
  53.   this.username5  =username5;
  55. }
  56.  geUsername5 (){
  57.   return `hell0 , ${this.username5}`;
  58.  }
  59. }

效果

混合导出与命名空间

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>混合导出与命名空间</title>
  8. </head>
  9. <body>
  10.     <script type="module">
  12. import  useremail , { username6, hello6} from './zuoyemodules/m2.js';
  13. console.log(useremail);
  15. console.log(username6);
  16. console.log(hello6(username6));
  18.     console.log('=========');
  19.     // 导入的成员过多时，使用 {。。。。}会很长
  20.     // 可以将所有导入的成员都挂载到 一个对象上
  21.     // 此时导入的模块成员，自动成为该对象的属性
  22. //    这个对象就是命名空间
  23. import * as user from  './zuoyemodules/m2.js';
  24. console.log(user);
  25. console.log(user.username6);
  26. console.log(user.hello6(username6));
  27. console.log(user.default);
  28. console.log(user.hello6(user.username6));
  29.     </script>
  30. </body>
  31. </html>

js

  1. //6、 混合导出  默认成员与非默认成员的导出
  2. // 6.1、
  3. let username6 = '小妞';
  4. function hello6 (username6) {
  5.  return `hel ,${username6}`;
  6. }
  7. let  email6= '1234@qq.com';
  8. // //  私有成员不对外
  9. let sex = 'male';
  10. // //  将邮箱 email6作为默认导出 
  11. export {username6 ,hello6 , email6 as default};

效果

上一条：学习404方法下一条：node ,npm
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多