Fetch API的使用,npm的常用操作,node模块声明与导入导出

Fetch API的使用

1. fetch: 发请求,返回响应对象response
2. response.json: 将响应数据转为json格式
3. 将json渲染到页面中

常用简单操作

function getUser2() {
    let url = 'http://xhr411.com/users.php?id=3';
    fetch(url)
        .then(response => response.json())
        //成功执行then里面的函数
        .then(json => console.log(json))
        //失败执行catch里面的回调函数
        .catch(err => console.log('error'));
}

ecma2017, async , await 来简化fetch

在函数前面加async来为函数声明为异步函数

// 使用这个方法必须将该函数 getUser声明为异步的
let url = 'http://xhr411.edu/users.php';
async function getUser(btn, url) {
    // fetch 异步请求,需要一个不确定的等待时间
    const response = await fetch(url);
    const result = await response.json();
    //对返回值进行操作,渲染到界面上
    console.log(result);
}

npm的常用操作

nmp是node内置的’包’管理器,与node发行版本一起提供

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

• 生成package.json

  • 交互式: npm init
  • 默认: npm init --yes 或 npm init -y(推荐)

"axios": "^0.26.1"
0: 大版本
26:小版本
1: 补丁
^: 仅允许小版本更新
*: 允许大版本更新
~: 仅允许修复补丁

命令介绍	命令内容
查询当前nmp详细描述信息	npm version
查看npm版本	npm -v
初始化生成包管理package.json	npm init -y
安装包(默认安装到当前目录)	npm i axios npm+install+包名,默认生产依赖npm i axios -S: 生产依赖 npm i axios -D:开发依赖
安装包到全局	npm i axios -g
删除卸载包	npm uni axios npm+uninstall+包名
查看全局模块的路径	npm root -g
查看当前目录下已安装的node包	npm list -g
查看npm帮助命令	npm --help
更新指定的包	npm update 包名
查看配置信息	npm config list

node模块声明与导入导出

模块就是一个js文件,内部成员全部私有化

有独立的作用域,成员只有导出才可以被外部访问

模块分为三种

• 核心模块:内置,开箱即用

  //利用require进行导入,就可以开始操作了
  const http = require('http');
  console.log(http);

• 文件模块:自定义

  • 导出

    //文件模块
    // 1. 逐个导出
    // 声明与导出二合一
    // 需要一个挂载器,导出对象 exports
    // 将需要导出的成员,做为exports对象的属性
    exports.site = 'php中文网';
    exports.getSite = function () {
        php中文网 (php.cn)
        return this.site + ' (php.cn)';
    };
    //2. 统一导出
    //声明
    let site = 'php中文网';
    let getSite = function () {
      return this.site + ' (php.cn)';
    };
    // 导出
    exports.site = site;
    exports.getSite = getSite;
    // 常用的另外一种
    // const exports = module.exports
    // 以下方式是最容易理解,更直观
    module.exports = {
      site: '第19期欢迎你,我是猪老师',
      getSite() {
        return this.site + ' (php.cn)';
      },
    };

  • 导入

    //文件模块导入
    let mysite = require('./m1.js');
    // console.log(mysite);
    // console.log(mysite.site);
    console.log(mysite.getSite());

• 第三方模块:npm安装的