ASCII码 ASCII码

实例演示fetch api使用和node常用操作命令及模块的导出和导入

发布于：2022-04-17 13:18:38  栏目：技术文档

11. 实例演示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</title>
  8.   </head>
  9.   <body>
  10.     <button onclick="getUser(this,url)">用户信息：fetch()</button>
  11.     <script>
  12.       //   fetch(url).then(success);
  13.       //   fetch("https://jsonplaceholder.typicode.com/todos/1")
  14.       //   fetch("https://jsonplaceholder.typicode.com/users")
  15.       //     .then((response) => response.json())
  16.       //     .then((json) => console.log(json));
  17.       fetch("http://php0411.edu/users.php")
  18.         .then((response) => response.json())
  19.         .then((json) => console.log(json));
  20.       // ecma2017,async.await 来简化fetch
  21.       //   必须将函数getUser声明为异步：async
  22.       // 接口url
  23.       let url = "http://php0411.edu/users.php";
  24.       async function getUser(btn, url) {
  25.         //   fetch是异步请求
  26.         // response是相应对象，response.json()
  27.         const response = await fetch(url);
  28.         //   .then((response) => response.json())
  29.         const result = await response.json();
  30.         console.log(result);
  32.         // 将接口数据渲染到页面中
  33.         render(result, btn);
  34.       }
  35.     </script>
  36.     <script src="function.js"></script>
  37.   </body>
  38. </html>

2. node和npm的常用操作命令

  1. # 版本号
  2. node -v
  4. # 查看当前路径
  5. pwd
  7. # 切换路径
  8. cd
  10. # 回到上一级
  11. cd ..
  12. cd ../../
  14. # 清屏
  15. clear

node: 完成参数前用二个--,简化参数用一个-

命令行 node 环境下,执行简单的 js

  1. # 进入
  2. node
  3. #退出
  4. .exit

node: 执行 js

npm

  • npm: node 内置的”包”管理器,与 node 发行版本一起提供
  • npm version: 查询当前npm更详细的描述信息

NPM 是通过package.json配置文件管理当前项目依赖项

  • 生成package.json

    • 交互式: npm init
    • 默认: npm init --yes 或 npm init -y(推荐)
  1. "axios": "^0.26.1"
  2. 0: 大版本
  3. 26:小版本
  4. 1: 补丁
  5. ^: 仅允许小版本更新
  6. *: 允许大版本更新
  7. ~: 仅允许修复补丁

npm i axios -S: 生产依赖npm i axios -D:开发依赖npm i axios -g:全局npm root -g: 查看全局模块的路径

3. 模块的导出和导入

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.     <!-- 传统js导入方式 -->
  9.     <!-- <script src="1.js"></script> -->
  10.     <!-- <script src="2.js"></script> -->
  11.   </head>
  12.   <body>
  13.     <script type="module">
  14.       // 模块导入修改type类型为module
  15.       //   模块有自己的独立作用域
  16.       //   import 成员列表 from 模块路径
  17.       //   import { email } from "./1.js";
  18.       //   两个导出值
  19.       //   import { email, hello } from "./1.js";
  20.       //   hello as default 默认导出,放在前面
  21.       //   import hello, { email } from "./1.js";
  22.       //   命名空间导出，挂载
  23.       import * as phpcn from "./1.js";
  24.       //   console.log(email);
  25.       //   console.log(hello(email));
  26.       console.log(phpcn.email);
  27.       console.log(phpcn.hello(phpcn.email));
  29.       //   出现命名冲突用别名as解决:as myemail
  30.       //   import { myemail } from "./2.js";
  31.       import { email as myemail } from "./2.js";
  32.       console.log(myemail);
  33.     </script>
  34.   </body>
  35. </html>

1.js代码

  1. let email = "admin1@qq.com";
  2. // export { email };
  3. function hello(email) {
  4.   return "my email is :" + email;
  5. }
  6. export { email, hello };
  7. // hello是默认导出
  8. // export { email, hello as default };

2.js代码

  1. let email = "admin2@qq.com";
  2. // 出现命名冲突用别名as解决
  3. // export { email as myemail };
  4. export { email };
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行