Community Learn Tools Library Leisure
search
English
Home > List of blog posts > xhr与fetch异步实例演示 模块成员导出与导入 别名使用场景与命名空间实例演示
Blogger Information
Blog 36
fans 1
comment 0
visits 26502
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
xhr与fetch异步实例演示 模块成员导出与导入 别名使用场景与命名空间实例演示
早晨
Original
563 people have browsed it

传统 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 };

运行效果

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post