search

博客列表 >xhr与fetch异步编程步骤及实例和模块成员导出与导入_别名_命名空间的实例

xhr与fetch异步编程步骤及实例和模块成员导出与导入_别名_命名空间的实例

P粉479712293
P粉479712293原创
2022年09月08日 12:04:31469浏览

题目一：xhr与fetch这两种数据的发送与接收方式

1.对应的html文件如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>xhr与fetch这两种数据的发送与接收</title>
  8. </head>
  9. <body>
  10.     <button onclick="getUser1(this)">查询用户信息：XHR</button>
  11.     <!-- *改用Fetch布局 -->
  12.     <button onclick="getUser2(this)">查询用户信息：Fetch</button>
  13.     <script src="../static/第23章/js/demo2.js"></script>
  14.     <script src="../static/第23章/js/function.js"></script>
  15. </body>
  16. </html>

2.对应的demo2.js文件如下：

  1. function getUser1(btn){
  2.     // *1.创建请求的实例
  3.     const xhr=new XMLHttpRequest();
  4.     // *2该实例所得到的响应的类型
  5.     xhr.responseType='json';
  6.     // *3配置请求的服务器及请求的脚本
  7.     // *如果get没有参数(即无传id),则按如下：
  8.     let url='http://website.io/users.php';
  9.     // *反之按如下：
  10.     //let url = 'http://website.io/users.php?id=3';
  11.     // *该实例去执行请求的类型(默认)及服务器地址
  12.     xhr.open('GET',url);
  13.     // *4.请求回调
  14.     xhr.onload=()=>{
  15.       console.log(xhr.response);
  16.       // *将数组渲染到页面中
  17.       render(xhr.response, btn);
  18.     };
  19.     // *5.失败回调
  20.     xhr.onerror=()=>console.log("Error");
  21.     // *6.发起请求
  22.     xhr.send(null);
  23. }
  25. // *fetch
  26. // *先通过以下地址进行请求，然后对结果进行处理
  27.     //    * fetch(url)
  28.     //    * .then(res)
  29.     //    * .then(...)
  30.     //    * .catch(err)
  31.       function getUser2(btn) {
  32.         //let url = 'http://website.io/users.php';
  33.         let url = 'http://website.io/users.php?id=2';
  34.         // *fetch的所有操作都是异步的,但是通过then使用顺序可控
  35.         fetch(url)
  36.           .then(function (response) {
  37.             return response.json();
  38.           })
  39.           .then(function (json) {
  40.             // *控制台
  41.             console.log(json);
  42.             // *将数组渲染到页面中
  43.             render(json, btn);
  44.           });
  45.       }

3.对应的function.js文件如下：

  1. // * 渲染用户数据到页面中,其中data为渲染的数据，btn为显示的位置
  2. function render(data, btn) {
  3.     //* 1. 如果是数组,则创建表格展示
  4.     if (Array.isArray(data)) {
  5.       //* 创建表格
  6.       const table = document.createElement('table');
  7.       // *设置表格样式
  8.       table.border = 1;
  9.       table.cellPadding = 3;
  10.       table.cellSpacing = 0;
  11.       table.width = 360;
  12.     // *设置标题
  13.       const caption = table.createCaption();
  14.       caption.textContent = '用户信息列表';
  15.       caption.style.fontSize = '18px';
  16.       caption.style.fontWeight = 'bolder';
  17.       caption.style.marginBottom = '8px';
  18.       // *创建表头
  19.       const thead = table.createTHead();
  20.       thead.style.backgroundColor = 'lightcyan';
  21.       thead.innerHTML = '<tr><th>ID</th><th>用户名</th><th>邮箱</th></tr>';
  23.       // *创建表格主体
  24.       const tbody = table.createTBody();
  25.       tbody.align = 'center';
  27.       //* 遍历数组
  28.       data.forEach(user => {
  29.         let html = `
  30.                   <tr>
  31.                     <td>${user.id}</td><td>${user.name}</td><td>${user.email}</td>
  32.                   </tr>
  33.                 `;
  34.         // 插入到表格中
  35.         tbody.insertAdjacentHTML('beforeEnd', html);
  36.       });
  38.       // *防止重复生成表格,应该判断一下当前按钮的下一个兄弟是否是表格
  39.       if (btn.nextSibling.tagName !== 'TABLE') {
  40.         btn.after(table);
  41.       }
  42.     }
  43.     // *2. 如果是单个对象,则用列表渲染
  44.     else {
  45.       // *创建列表元素,用于显示用户信息
  46.       const ul = document.createElement('ul');
  48.       // *使用模板字面量,快速创建用户数据
  49.       ul.innerHTML = `
  50.               <li>ID : <span class="user">${data.id}</span></li>
  51.               <li>用户名 : <span class="user">${data.name}</span></li>
  52.               <li>邮箱 : <span class="user">${data.email}</span></li>
  53.             `;
  55.       // *与上面功能一样,也是为了防止重复创建列表
  56.       if (btn.nextSibling.tagName !== 'UL') {
  57.         btn.after(ul);
  58.         // *添加自定义样式,将用户信息高亮显示
  59.         document.querySelectorAll('ul li .user').forEach(item => (item.style.color = 'red'));
  60.       }
  61.     }
  62.   }

4.对应的浏览器效果图如下：

题目二：fetch异步操作与async及await

1.对应的html文件如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  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异步操作与async及await</title>
  8. </head>
  9. <body>
  10.     <button onclick="getUser(this)">查询用户信息：Fetch</button>
  11.     <script src="../static/第23章/js/function.js"></script>
  12.     <script src="../static/第23章/js/demo3.js"></script>
  13. </body>
  14. </html>

2.对应的demo3.js文件如下：

  1. // *使用fetch异步操作下载网上的数据
  2. fetch('https://jsonplaceholder.typicode.com/todos/2')
  3. //*fetch('https://jsonplaceholder.typicode.com/users')
  4.   .then(response => response.json())
  5.   .then(json => console.log(json));
  7. //   *用async,await来简化异步回调方法
  8. //   *async:当前是一个异步函数
  9. async function getUser(btn){
  10.     // *对自己的数据接口进行请求
  11.     //let url='http://website.io/users.php?id=1';
  12.     let url='http://website.io/users.php';
  13.     // *异步耗时操作，需要等待结果才能进入下一步
  14.     // *先等待，然后响应
  15.     const response=await fetch(url);
  16.     // *获取到结果后，再转为json,然后保存在result中
  17.     const result=await response.json();
  18.     console.log(result);
  19.     // *调用render()方法，将数组渲染到页面中
  20.     render(result,btn);
  21. }

3.对应的浏览器效果图如下：

题目三：模块1-模块成员导出与导入

1.对应的html文件如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>模块1-模块成员导出与导入</title>
  8. </head>
  9. <body>
  10.     <!-- *默认script在浏览器环境下不支持模块,需要指定type -->
  11.     <script type="module">
  12.         // js中, 所有代码共用一个全局作用域: window
  13.         // 导入模块
  14.         import { username, hello } from '../static/第23章/modules/m1.js';
  15.         console.log(username);
  16.         console.log(hello(username));
  17.       </script>
  18.  </body>
  19. </html>

2.对应的m1.js模块文件如下：

  1. //  * JS模块知识
  2. //  * 1. 模块就是一个js文档
  3. //  * 2. 模块有自己的独立作用域(全局,函数,块)
  4. //  * 3. 模块内成员,默认全部私有,只有导出后才可以被外部使用
  7. // *1. 逐个导出
  8. // *export let username = '猪老师';
  9. // *export function hello(username) {
  10. //   *return `Hello, ${username}`;
  11. // *}
  13. // *2. 统一导出
  14. // *二步走:
  15. // *(1) 声明
  16. let username = '猪老师';
  17. function hello(username) {
  18.   return `Hello, ${username}`;
  19. }
  21. // *(2) 导出: 对象字面量 {...}
  22. export { username, hello };

3.对应的浏览器效果图如下：

题目四：模块2-模块别名导出与导入

1.对应的html文件如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>模块2-模块别名导出与导入</title>
  8. </head>
  9. <body>
  10.     <script type="module">
  11.         // *导入时与m2模块中导出时的别名一致
  12.         import{myname,getName} from '../static/第23章/modules/m2.js';
  13.         console.log(myname);
  14.         console.log(getName(myname));
  15.     </script>
  16. </body>
  17. </html>

2.对应的m2.js模块文件如下：

  1. // *别名导出
  2. // *(1) 声明
  3. let username = '欧阳老师';
  4. function hello(username) {
  5.   return `Hello, ${username}`;
  6. }
  8. // *(2) 别名导出: 隐藏模块成员的真实名称, as
  9. export { username as myname, hello as getName };

3.对应的浏览器效果图如下：

题目五：模块3-默认导出

1.对应的html文件如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>模块3-默认导出</title>
  8. </head>
  9. <body>
  10.      <!-- *默认script在浏览器环境下不支持模块,需要指定type -->
  11.      <script type="module">
  12.         //  导入模块的默认成员吧要用对象字面量，而用标识符
  13.         import User from '../static/第23章/modules/m3.js';
  14.         console.log(User);
  15.         console.log(typeof User);
  16.         // 创建一个实例
  17.         const user=new User('李老师');
  18.         console.log(user.username);
  19.         console.log(user.getUsername(user.username));
  20.      </script>
  21. </body>
  22. </html>

2.对应的m3.js模块文件如下：

  1. //* 默认导出
  3. // *之前,导出的是一个声明
  4. // *默认导出,只是导出一个值,不是声明,没有被命名,由导入时重命名
  5. //* 一个模块,只能有一个默认导出
  7. export default class {
  8.     constructor(username) {
  9.       this.username = username;
  10.     }
  12.     getUsername() {
  13.       return `Hello, ${this.username}`;
  14.     }
  15.   }

3.对应的浏览器效果图如下：

题目六：模块4-混合导出

1.对应的html文件如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>模块4-混合导出</title>
  8. </head>
  9. <body>
  10.     <script type="module">
  11.     //接收时混合成员的名称应在非混合成员名称前面
  12.     // 混合成员名称可以随便写
  13.     import email,{username,hello} from '../static/第23章/modules/m4.js'
  14.     console.log(email);
  15.     console.log(hello(username));
  16.     </script>
  17. </body>
  18. </html>

2.对应的m4.js模块文件如下：

  1. // *默认成员与非默认成员的导出
  2. let username = '刘老师';
  3. function hello(username) {
  4.   return `Hello, ${username}`;
  5. }
  6. let useremail = 'admin@php.cn';
  8. // *这个不导出，因为是私有成员, 不对外
  9. let sex = 'male';
  11. // *这个是默认导出，之所以叫默认导出，是因为起了个别名叫'default'(默认)
  12. export { username, hello, useremail as default };

3.对应的浏览器效果图如下：

题目七：模块4-命名空间

1.对应的html文件如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>模块4-命名空间</title>
  8. </head>
  9. <body>
  10.     <script type="module">
  11.         // 导入的成员,过多时,使用{...}会很长的
  12.         // 可以将所有的导入成员,全部挂载到一个对象上
  13.         // 此时, 导入模块的成员,自动成为该对象上的属性
  14.         // 这个对象就是: 命名空间
  15.         // import email, { username, hello } from './modules/m4.js';
  16.         import * as user from '../static/第23章/modules/m4.js';
  17.         console.log(user);
  18.         // 此时,访问模块成员时, 必须添加空间前缀,其实就是user对象
  19.         console.log(user.username);
  20.         console.log(user.hello(user.username));
  21.         // 访问默认
  22.         console.log(user.default);
  23.       </script>
  24. </body>
  25. </html>

对应的浏览器效果图如下：

上一条：vue+element操作与接口下一条：PHP性能优化大全
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多