search

博客列表 >xhr与fetch异步实例演示 模块成员导出与导入 别名使用场景与命名空间实例演示

xhr与fetch异步实例演示 模块成员导出与导入 别名使用场景与命名空间实例演示

早晨
早晨原创
2022年08月02日 00:48:03562浏览

传统 XHR

  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);
    xhr 至少监听2个事件: load,error, 调用2个函数: open,send
    post请求,需要设置一下请求头与请求的数据,其它与get请求完全相同

fetch

fetch api : 浏览器原生实现的异步技术
axios: 基于 xhr / fetch
fetch: 基于Promise, 返回 Promise对象

演示实例代码

  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>xhr与fetch异步编程实例演示</title>
  8.   </head>
  9.   <body style="display: grid; gap: 1.5em">
  10.     <button onclick="getxhr(this)">XHR同步</button>
  11.     <button onclick="getfetch(this)">FETCH同步</button>
  12.     <script>
  13.       function getxhr(btn) {
  14.         //  1. 创建对象
  15.         const getxhr = new XMLHttpRequest();
  16.         //    2. 响应类型
  17.         getxhr.responseType = "json";
  18.         //    3. 配置参数
  19.         let url = "https://jsonplaceholder.typicode.com/users";
  20.         // url = "https://jsonplaceholder.typicode.com/todos/1";
  21.         getxhr.open("GET", url, true);
  22.         // 4. 请求回调
  23.         getxhr.onload = () => console.log(getxhr.response);
  24.         // 5. 失败回调
  25.         getxhr.onerror = () => console.log("Error");
  26.         //    6. 发起请求
  27.         getxhr.send(null);
  28.         console.log("---------------------XHR同步---------------------------");
  29.       }
  31.       function getfetch(btn) {
  32.         fetch("https://jsonplaceholder.typicode.com/todos/1")
  33.           .then((response) => response.json())
  34.           .then((json) => console.log(json));
  35.         console.log("----------------------FETCH同步------------------------");
  36.       }
  37.     </script>
  38.   </body>
  39. </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="module">
  11.       import { name, abc } from "./m1.js";
  12.       console.log(name);
  13.       console.log(abc(name));
  14.     </script>
  15.   </body>
  16. </html>

js代码（m1.js）

  1. // 声明
  2. let name = "早上好";
  3. function abc(name) {
  4.   return `老师, ${name}`;
  5. }
  6. // 导出
  7. export { name, abc };

运行效果

模块别名导出演示实例代码

  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">
  11.       import { myuser, obq } from "./m2.js";
  12.       console.log(myuser);
  13.       console.log(obq(myuser));
  14.     </script>
  15.   </body>
  16. </html>

js代码（m2.js）

  1. //  声明
  2. let user = "别名导出";
  3. function abc(user) {
  4.   return `这个是, ${user}`;
  5. }
  6. // 别名导出
  7. export { user as myuser, abc as obq };

运行效果

模块命名空间演示实例代码

  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">
  11.       import * as phpname from "./m3.js";
  12.       console.log("------------------模块所有成员-------------------------");
  13.       console.log(phpname);
  14.       console.log("------------------模块成员----------------------------");
  15.       console.log(phpname.name);
  16.       console.log(phpname.tel(phpname.name));
  17.       console.log("------------------访问默认----------------------------");
  18.       console.log(phpname.default);
  19.     </script>
  20.   </body>
  21. </html>

js代码（m3.js）

  1. let name = "命名空间";
  2. function tel(name) {
  3.   return `这个是, ${name}`;
  4. }
  5. let email = "xxxxxx@xxx.com";
  6. let status = "1";
  8. export { name, tel, email as default };

运行效果

上一条：边缘计算：盘点100个知识点下一条：ajax操作与模块成员相关操作
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多