博主信息
博文 37
粉丝 0
评论 0
访问量 22302
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
xhr与fetch异步编程的步骤,xhr与fetch异步编程的步骤
秋闲独醉
原创
545人浏览过

1. xhr与fetch异步编程的步骤,实例演示

  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>ajax和fetch请求</title>
  8. </head>
  9. <body>
  10. <button onclick="fun()">ajax-GET获取数据</button>
  11. <button onclick="fun1()">fetch获取数据</button>
  12. <script>
  13. function fun() {
  14. //ajax请求数据
  15. const url = "http://jsonplaceholder.typicode.com/users";
  16. //实例化
  17. const xhr = new XMLHttpRequest();
  18. //响应类型
  19. xhr.response = "json";
  20. xhr.open("GET", url);
  21. //请求回调
  22. xhr.onload = () => console.log(xhr.response);
  23. xhr.onerror = () => console.log("Error");
  24. //发起请求
  25. xhr.send();
  26. }
  27. //fetc请求
  28. function fun1() {
  29. const url = "http://jsonplaceholder.typicode.com/users";
  30. fetch(url)
  31. .then((response) => response.json())
  32. .then((json) => console.log(json));
  33. }
  34. </script>
  35. <!-- 默认script在浏览器环境下不支持模块,需要指定type -->
  36. <script type="module">
  37. // 导入单个模块
  38. import { username, getUserName } from "./modules.js";
  39. console.log(username, getUserName(username));
  40. //导入统一模块
  41. import { age, getAge } from "./modules.js";
  42. console.log(age, getAge(age));
  43. //别名导入
  44. import { addr } from "./modules.js";
  45. console.log(addr);
  46. //默认导入
  47. import User from "./modules.js";
  48. const user = new User("nnd");
  49. console.log(user.username);
  50. console.log(user.getUsername(user.username));
  51. </script>
  52. <script>
  53. // 接收混合导入成员,默认成员的命名,必须放在非默认的前面
  54. // 默认导出成员,在导入时可以随意命名的,useremail只是巧合
  55. import email, { username, hello } from "./modules.js";
  56. console.log(email);
  57. console.log(hello(username));
  58. </script>
  59. </body>
  60. </html>

2. 模块成员导出与导入,别名使用场景与命名空间演示

  1. //1.逐个导出
  2. export let username = "Tim";
  3. export function getUserName() {
  4. return username;
  5. }
  6. //统一导出
  7. let age = 18;
  8. function getAge() {
  9. return `${age}`;
  10. }
  11. export { age, getAge };
  12. // 别名导出;
  13. let address = "北京市";
  14. export { address as addr };
  15. //默认导出,导出的是一个声明
  16. //只是导出一个值,不是声明,没有被 命名,由导入时重命名
  17. //一个模块,只能有一个默认导出
  18. export default class {
  19. constructor(username) {
  20. this.username = username;
  21. }
  22. getUsername() {
  23. return `hello ${this.username}`;
  24. }
  25. }
  26. let username = "龙";
  27. function hello(username) {
  28. return `hello${username}`;
  29. }
  30. let useremail = "dddkj@djked";
  31. export { username, hello, useremail as default };
批改老师:PHPzPHPz

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学