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

Fetch API的使用

fetch: 发请求,返回响应对象response
response.json: 将响应数据转为json格式
将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安装的

Fetch API的使用

常用简单操作

ecma2017, async , await 来简化fetch

npm的常用操作

node模块声明与导入导出

更多相关文章

随机推荐