Ajax内容

最新推荐文章于 2024-06-14 10:21:04 发布

晊恦－love

最新推荐文章于 2024-06-14 10:21:04 发布

阅读量124

点赞数 1

文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/m0_73715441/article/details/130459920

版权

Ajax内容

1. Promise介绍和使用
- 1.1解决异步中回调函数问题
- 1.2创建promise
- 1.3从Promise中读取数据：
- 1.4 Promise 中维护了两个隐藏属性：
- 1.5 Promise的使用
- 1.6 Promise中的静态方法（直接用类.方法调用）
2.宏任务和微任务
- 2.1 简介
3. Async_和await
4.ES模块
5.Process
6. FS文件模块
- 6.1 小案例
7.path模块
8. 创建web服务器
- **8.1. request请求对象**
- **8.2.response响应对象：**
- **8.3.res.end()**
9.模块
10. npm和包
- 10.1 格式化时间的两种做法
- - 10.1.1 传统
  - 10.1.2 npm操作(moment)
- 10.2
11.制作一个包
12.Express(可以快速的创建 web网站的服务器或者api接口服务器)
1. Promise介绍和使用
- 1.1**解决异步中回调函数问题**
- 1.2创建promise
- 1.3从Promise中读取数据：
- 1.4 Promise 中维护了两个隐藏属性：
- 1.5 Promise的使用
- 1.6 Promise中的静态方法（直接用类.方法调用）
2.宏任务和微任务
- 2.1 简介
3. Async_和await
4.ES模块
5.Process
6. FS文件模块
- 6.1 小案例
7.path模块
8. 创建web服务器
- 8.1. request请求对象
- 8.2.response响应对象：
- **8.3.res.end()**
9.模块
10. npm和包
- 10.1 格式化时间的两种做法
- - 10.1.1 传统
  - 10.1.2 npm操作(moment)
- 10.2
11.制作一个包
12.Express(可以快速的创建 web网站的服务器或者api接口服务器)

1. Promise介绍和使用

1.1解决异步中回调函数问题

一个用来存储数据的容器
他用有一套特殊的存取数据的方式
这个方式使得他里面可以存储异步调用的结果

1.2创建promise

//创建Promise 的时候需要一个函数作为参数
//Promise 构造函数的回调函数，他会在创建Promise的时候调用，调用的时候会有两个参数传递进去

1.3从Promise中读取数据：

可以通过Promise的实例方法then来读取Promise中存储的数据
then需要两个回调函数作为参数，回调函数用来获取Promise 中的数据
通过resolve存储的数据，会带哦哟个第一个函数返回
可以在第一个函数中编写处理数据的代码
通过reject调用的函数，会调用第二个函数返回
可以在第二个函数中编写处理异常的代码

1.4 Promise 中维护了两个隐藏属性：

promiseresult：

-用来存储数据

promisestate

-记录Promise的状态（三种状态）

fulfilled 表示完成通过resolve 存储数据的时候

rejected 表示拒绝，出错了出错了，或者通过reject存储数据的时候

pedding 表示数据在进行中

-State只能修改一次，修改以后永远不会改变

流程：

当promise创建时，promisestate初始值是pending，

当通过resolve存储数据的时候，promisestate变成fulfilled(完成)

promiseresult变为存储的数据

当通过reject存储数据的时候，promisestate变成rejected(表示拒绝，出错了 )

promiseresult变为存储的数据或者异常对象

当我们通过then读取数据的时候，相当于给promise设置了两个回调函数

如果promisestate变成fulfilled，则调用第一个函数返回数据

如果promisestate变成rejected，则调用第一个函数返回数据

promise调用数据必定比后面慢

catch( ) 用法和then类似，但是只需要一个回调函数作为参数

catch( ) 中的回调函数指挥在promise被拒绝的时候调用

catch( ) 相当于 then( null ,reason => { } )

catch( ) 就是一个专门处理promise异常的方法

promise.catch( ( reason ) => { } )

finally( ) 和catc和then都类似

无论是正常存储数据，还是异常处理出局，finally总会执行

promise.finally( ( ) => { } )

但是finally的回调函数张不会接受到数据

finally中通常编写一些无论成功与否都要执行的代码用的特别少

1.5 Promise的使用

Function sum(a , b) {
return new Promise ((resolve , reject ) => {
setTimeout ( () => {
resolve( a + b);
} , 1000)
})
}  //设置函数
//接受数据

Promise
.then( ( result ) => {
console.log("Promise中的数据" , result); 
return "我真帅" ; 
})
.then( (result ) =>{
Console.log( "上一个then中的数据" , result);
return "你也真帅" ; 
})
.then( (result ) =>{
Console.log( result);
})

每一个then都是调用上一个then返回的数据

Promise的链式调用

e.g. 本例子输出的数据为：

Promise
.then( ( result ) => {
console.log("Promise中的数据" , result); 
return "我真帅" ; 
})
.then( (result ) =>{
Console.log( "上一个then中的数据" , result);
return "你也真帅" ; 
})
.then( (result ) =>{
Console.log( result);
})

每一个then都是调用上一个then返回的数据

e.g. 本例子输出的数据为：

promise中的数据

上一个then中的数据我真帅

你也真帅

1.6 Promise中的静态方法（直接用类.方法调用）

Promise.resolve(10) 创建一个立即完成的promise 等价于

New Promise ( (resolve , reject ) => {
Resolve(10) ; 
})

Promise.reject(10) 创建一个立即拒绝的promise 用catch读取数据

Promise.all( [ ] ) :同时返回多个promise的执行结果

Function sum(a , b) {
return new Promise ((resolve , reject ) => {
setTimeout ( () => {
resolve( a + b);
} , 1000)
})
} 
 
Promise.all([
Sum(234 + 123),
Sum(5 +9),
Sum(3 +8 )
]) . Then ( r => {
Console.log( r ) ;
})
 
//输出结果：(3)[357 , 14 , 11]

缺点：其中有一个报错就返回错误！

Promise.allsettled( [ ] )：同时返回多个promise的执行结果（无论错误或者正确）

Promise.allsettled([
Sum(234 + 123),
Sum(5 +9),
Sum(3 +8 )
]) . Then ( r => {
Console.log( r ) ;
})
 
//输出结果：(3)[{…},{…},{…}] 返回三个数据，需要在最后一步打断点即可查看。

promise.race() 返回执行最快的数据（不考虑对错）

promise.any() 返回执行最快的完成的数据（）只有全部报错才会报错

2.宏任务和微任务

2.1 简介

-调用栈：

栈：是一种数据结构，后进先出

调用栈中放的是要执行的代码

-任务队列：

-队列：队列是一种数据结构，先进先出

-任务队列中放的是将要执行的代码

-当调用栈中的代码执行完毕后，队列中的代码才会进入调用栈

-任务队列有两种：

-宏任务队列(大部分代码去宏任务队列)：

-微任务队列(Promise的回调函数 then、catch、finally)：

-整个流程

1.执行调用栈中代码

2.执行微任务队列中的所有任务

3.执行宏任务队列中的所有任务

-一个函数：

queueMicrotask(); 用来向微任务队列中添加一个任务

queueMicrotask( () => {
Console.log(2);
})  //将console.log添加到 微任务队列

Console.log 是在调用栈中执行，在全局定义中！

Stetimeout 在任务队列排队执行，所以console比settimeout执行快

Promise执行原理：

-promise 在执行，then就相当于给promise了回调函数

-当promise的状态从pending变成fulfilled的时候

then的回调函数会被放入任务队列中

3. Async_和await

**async：**可以快速的创建异步函数(返回promise的函数)

异步函数会自动封装到一个promise中返回

 Async function fu(){
	Return 10;
}
Fu.then(r => {
	Console.log;
})
```

**Await：**当通过await去带哦用异步函数的时候，他会停止

代码运行，当异步有结果的时候，才会返回。

Try{
	Let result = await sum(1,2)
}catch( e ) {
	Console.log("出错了~");
}

注意：智能用于async声明的异步函数，或者es模块的顶级作用域中

await阻塞的只是异步函数内部的代码，不会影响外部代码

通过await调用代码时候，需要通过try-catch来处理异常

await在当前函数执行完毕后，将aiait后面代码

添加到微任务队列

4.ES模块

默认情况下，node中的模块化标准是 commonJS

-要想使用ES模块化，可以采用一下两种方案

使用mjs为扩展名 (可以使用打印moudle来检测)
直接修改package.json 将模块化规范设置为ES

{
	"type" : "moudle"  //将所有模块改为ES模块
}

**ES模块化： **

1.向外导出内容 export let a = 10;或者export const b = “芜湖”;

导入模块：import {需要导出的东西} from "./文件地址"

或者import{a as hello} from "文件地址"将a从文件中取出，赋值给hello

或者 import * as m4 from "文件地址" 将文件所有东西取出，将其命名为m4

export default function sum(a,b){  //export default后面必须跟一个值，这叫做默认导出
Return a+b; 
}

导入默认模块：import sum from “文件地址” sum可以修改，名字可以不同。一个模块中只能有一个默认导出

3.导入进来的值是常量，不能修改。常量不影响对象的修改！

4.ES模块化在浏览器中同样支持，但是通常不会直接使用

5.Process

//核心模块：是node中自带的模块，可以在node中直接使用

//window是浏览器的宿主对象，node中没有

在node中，全局变量叫 global ，作用类似与window

核心模块：

process：

-表示当前node的进程

-通过该对象可以获取进程的信息，或者对进程做各种操作

-如何使用：

1.如何获取对象：process是一个全局变量，可以直接使用！

2.有哪些属性和方法：

process.exit()结束当前进程。只能执行该代码之前的代码
Process.netTick(callback[,…args]) 将函数插入到tick队列中

tick队列的执行顺序在微任务之前，调用栈之后！

6. FS文件模块

fs文件模块：需要导入模块 const fs = require('fs')

Fs.readFile(path[,options],callback) 可以读取指定文件的内容

[] 包括的是可选参数

Path 表示文件的路径

Option 表示以什么什么编码格式读取文件

Callback 表示读取文件后的返回值

const fs = require('fs')
fs.readFile('./1.txt','utf8' , function(err,dataStr){
   console.log(err),
   console.log("-------"),
   console.log(dataStr);
})
//可以判断是否存在该文件
const fs = require('fs')
fs.readFile('./1.txt','utf8' , function(err,dataStr){
   if(err){
        return console.log("文件错误，无法查找到内容"+err);
   }
     console.log("查找到内容，内容是："+dataStr);
})

Fs.writeFile(file,data[,options],callback) 可以向指定文件中写入内容

File 文件路径字符串，表示文件存放路径

Data 必表示写入什么内容

Option 表示以什么什么编码格式读取文件

Callback 表示读取文件后的返回值

const fs = require('fs')
fs.writeFile('./1.txt','我是大哥','utf8',function(err){
    if(err){
        console.log(err/message)
    }
})

fs处理路径问题：

出现路径拼接错误，是因为提供了./或者…/开头的相对路径

为了解决这个问题，可以直接提供一个完整的文件存放路径

完整路径(移植性差！不利于维护)

__dirname 表示当前文件所处的目录代表的值不会变化

const fs = require('fs')
fs.readFile(__dirname+"./1.txt","utf8",function(err,dataStr){
    //写入之后，err显示undefined 
    //写入错误，会返回一个错误对象
    if(err){
       return  console.log(err)
    }
})

6.1 小案例

//将./1.txt中的数据改变格式
const fs = require('fs')
fs.readFile("./1.txt","utf8",function(err,dataStr){
    //写入之后，err显示undefined 
    //写入错误，会返回一个错误对象
    if(err){
       return  console.log(err)
    }
    // console.log(dataStr)
    //将成绩按照空格分隔
    const arrold = dataStr.split(' '); //在两个数据之间加入空格分隔
    console.log(arrold)
    //循环分割后的数组，对每一项数据进行字符串替换操作
    const arrnew = [];
    arrold.forEach(element => {
        arrnew.push(element.replace('=',': ')) //foreach 可以遍历数组 
push可以添加数组 replace=可以将左边的换成右边
    });
    // console.log(arrnew)
    //把新数组中的每一项，进行合并，得到一个新的字符串
    const newStr = arrnew.join("\r\n")   // \r 表示回车 \n表示换行
    console.log(newStr);
    //将新数组写入文档中
    fs.writeFile('./2.txt',newStr,function(err){
        if(err){
            return console.log(err.message)
        }
        console.log("写入成功!")
    })
})

7.path模块

Path.join() 可以将多个路径片段拼接成一个完整路径字符串

Path.basename() 从路径字符串中将文件名解析出来

引入path模块：

Const path = require('path')

Path.join()语法格式：

Path.join([…path])

Path(string) 需要拼接的字符串

返回值(string)

const path = require('path')
const result = path.join('/a','/b/c','../','/o')   //  '../' 可以抵消前
面一个路径
console.log(result)  //输出 \a\b\o /c被../抵消
 
const result1 =path.join(__dirname,'./1.txt') //当前目录文件地址+./1.txt
console.log(result1)

Path.basename() 可以获取路径的最后一部分

Path.basename(path[,ext])

Path 表示一个路径

Ext 表示文件扩展名

返回值路径的最后一部分

const path = require('path')
const Mypath = "/a/b/c/index.html"
//获取到文件最后一个路径的全部名称
const fullpath = path.basename(Mypath)  
console.log(fullpath)   // 结果 index.html
//剪切掉文件最后的扩展名的最后一个名称
const extpath = path.basename(Mypath,'.html')
console.log(extpath)  //结果 index

Path.extname() 获取路径中文件扩展名

Path.extname(path)

Path 文件路径

返回值扩展名

const path = require('path')
const Mypath = "/a/b/c/index.html"
//可以获取到文件的扩展名
const extpath = path.extname(Mypath)
console.log(extpath)

8. 创建web服务器

步骤：

导入http模块
创建web服务器实例
为服务器绑定request事件，监听客户端请求
启动服务器

//创建一个简单的服务器
const http = require('http')
//创建web服务器实例
const server = http.createServer();
//为服务器绑定request事件
//使用服务器实例的 .on()方法，为服务器绑定request事件
server.on('request',(require,response) =>{
    //只有客户端来请求我们服务器，会触发 request 事件，从而调用事件函数
    console.log('Someone visit our web server')
})
//启动服务器
//使用 .listen(端口号，cd回调)方法，即可启动当前的web服务器实例
server.listen(8000,function(){
    console.log('http server running at http://127.0.0.1:8000')
})

8.1. request请求对象

只要服务器接收到了客户端的请求，就可以用server.on()为服务器request事件处理函数

可以访问客户端的数据或者属性

Request.url 可以获取客户端请求的 URL 地址

Requset.method 可以获取客户端的 method 请求类型

8.2.response响应对象：

Res.end() 向客户端发送指定内容，并且结束本次请求的处理过程

const http = require('http')
//创建web服务器实例
const server = http.createServer();
//为服务器绑定request事件
//使用服务器实例的 .on()方法，为服务器绑定request事件
server.on('request',(request,response) =>{
    //只有客户端来请求我们服务器，会触发 request 事件，从而调用事件函数
    const url = request.url
    const method = request.method
    const str ='your url is'+ url+'your method is'+ method
    response.end(str)
})
//启动服务器
//使用 .listen(端口号，cd回调)方法，即可启动当前的web服务器实例
server.listen(8000,function(){
    console.log('http server running at http://127.0.0.1:8000')
})

8.3.res.end()

向客户端发送中文的时候，会出现乱码，需要手动调试需要设置响应头

response.setheader('Content-Type' , 'text/html ; charset=utf-8')

const http = require('http')
//创建web服务器实例
const server = http.createServer();
//为服务器绑定request事件
server.on('request',(request,response)=>{
    const url = request.url
    //设置想用响应内容
    let cocntent = '<h1>404 Not found</h1>'
    if(url === '/' || url === '/index.html'){
        cocntent = '<h1>首页</h1>'
    } else if(url === '/about.html'){
        cocntent = '<h1>关于页面</h1>'
    }
    //防止中文乱码
    response.setHeader('Content-Type' , 'text/html ; charset=utf-8')
    response.end(cocntent)
})
server.listen(8000,function(){
    console.log("8000端口已监听..... http://127.0.0.1:8000")
})

9.模块

使用 **require() **加载模块

加载内置模块

Const fs = require ('fs')

加载用户自定义模块

Const custom = require('./custom.js')

加载第三方模块

Const moment = require('moment')

**Moudle.export() **可以输出对象，其他模块中引入的就是上一个模块输出的对象

使用：

Moudle.exports.名称=值 （向moudle.exports对象上挂载一个属性）

Modlue.exports和exports指向同一个对象，最终以modlue.exports指向的对象为准

//text.js中内容
const path = require('path')
module.exports.username='你爹'
module.exports.sayHello=function(username){
    console.log(path.join("欢迎来到",username,"的世界"))
}
//只会打印下面的，require 指向的永远是moudle.exports直接指向的对象
module.exports = {
    nickname:'我',
    saybye:function(){
        console.log("哈哈哈")
    }
}
//server.js中内容
const sayHello=require('./text')
console.log(sayHello)

10. npm和包

包：第三方模块也可以叫做包，是基于内置模块封装出来的

在哪里下载包： http://www.npmjs.com/ 包共享平台(搜索需要的包)

https://registry.npmjs.org/ (下载需要的包)

10.1 格式化时间的两种做法

10.1.1 传统

//text.js内容
const dataformat = function(dtStr){
    //创建时间函数
    const dt = new Date(dtStr)
    //获取年月日
    const y = dt.getFullYear()
    const m = padZero(dt.getMonth() + 1) //获取的月份是0~11，需要加1
    const d = padZero(dt.getDay())
    //获取时分秒
    const hh = padZero(dt.getHours())
    const mm = padZero(dt.getMinutes())
    const ss = padZero(dt.getSeconds())
    //返回拼接值
    let result = y+'-'+m+'-'+d+' '+hh+':'+mm+':'+ss
    return result
}
//定义补零函数
function padZero(n){
    return n>9 ? n:'0'+n  //正则表达式
}
//对外暴露对象
module.exports={
    dataformat
}

//server.js内容
//导入自定义格式化事件的模块
const TIME = require('./text')
//调用方法，进行时间的格式化
const dt = new Date()
//打印
const newDT=TIME.dataformat(dt)
console.log(newDT)

10.1.2 npm操作(moment)

需要先在终端运行npm i moment 来安装moment包

//moment导包操作
//导包
const moment = require('moment')
//使用format添加日期
const dt = moment().format('YYYY-MM-DD HH:mm:ss')
console.log(dt)

10.2

如何安装指定版本的包：

Npm I moment@版本号可以下载指定版本的包

包的语义化版本规范:

第一位数字：大版本

第二位数字：功能版本

第三个数字：bug修复版本

（只要前面的版本号增长，后面的版本号都要归零）

11.制作一个包

安装方式、导入方式、格式化时间、转义HTML中的特殊字符、还原HTML中的特殊字符、开源协议

包中应该存在 index.js package.json README.md 各种方法js

{
    "name":"mahaobo-tools",
    "version": "1.0.0",
    "main": "index.js",
    "description": "提供了格式化时间,HTMLEscape的功能",
    "keywords": ["mahaobo","dataFormate","escape"],
    "license": "ISC"
}

//入口
const moment = require('moment')
//使用format添加日期
const dt = moment().format('YYYY-MM-DD HH:mm:ss')
//定义一个转义HTML的方法
function htmlEscape(htmlStr){
    return htmlStr.replace( /<|>|"|&/g ,(match)=>{
        switch(match){
            case '<': return '&alt';
            case '>': return '&gt';
            case '"': return '&quot';
            case '&': return '&amp';
        }
    })
}
//定义一个还原 HTML 的方法
//定义一个转义HTML的方法
function htmlUnEscape(htmlStr){
    return htmlStr.replace( /&alt|&gt|&quot|&amp/g ,(match)=>{
        switch(match){
            case '&alt': return '<';
            case '&gt': return '>';
            case '&quot': return '"';
            case '&amp': return '&';
        }
    })
}
module.exports={
    dt,
    htmlEscape,
    htmlUnEscape
}

README. md文档内容：说名该文档下载和各方法的使用

12.Express(可以快速的创建 web网站的服务器或者api接口服务器)

安装：npm install express@4.17.1

//使用express创建一个get请求服务器
//app.send() 既可以发送一个json类型的对象，也可以发送普通内容
//导入express
const express = require('express')
//创建web服务器
const app = express()
//监听 get 请求
app.get('/user',(request, response)=>{
    //向客户端发送json对象
    response.send(
        {
            name:'mahaobo',
            age:15,
            address:'china'
        }
    )
})
//启动web服务器
app.listen(80,()=>{
    console.log('express server running at http://127.0.0.1')
})

通过requset.query对象，可以访问到客户端通过查询字符串的形式，发送到服务器参数：

app.get('/',(req,res)=>{
 //通过req.query可以获得客户端发送过来的查询参数
 console.log(req.query)
 res.send(req.query)
})

通过req.params对象，可以访问到 URL 中，通过：匹配到的动态参数

// :名字 可以获取动态参数，可以添加多个
app.get('/user/:id',(req,res)=>{
  //这里的 :id 是一个动态的参数
  //通过 req.params 查询动态参数
  console.log( req.params)
  res.send( req.params)
})

Express.static() 可以创建一个静态资源：调用app.use()调用

app.use(express.static('./clock'))
//可以对外暴露 clock文件夹的资源
//外部使用时候，只需要在URL后加上 需要获取的文件名即可 
e.g. http://127.0.0.1/index.js

如果要托管多个静态资源目录，可以多次调用 express.static() 函数，查找文件时候，会按照先后顺序查找！

1. Promise介绍和使用

1.1解决异步中回调函数问题

一个用来存储数据的容器
他用有一套特殊的存取数据的方式
这个方式使得他里面可以存储异步调用的结果

1.2创建promise

//创建Promise 的时候需要一个函数作为参数
//Promise 构造函数的回调函数，他会在创建Promise的时候调用，调用的时候会有两个参数传递进去

1.3从Promise中读取数据：

可以通过Promise的实例方法then来读取Promise中存储的数据
then需要两个回调函数作为参数，回调函数用来获取Promise 中的数据
通过resolve存储的数据，会带哦哟个第一个函数返回
可以在第一个函数中编写处理数据的代码
通过reject调用的函数，会调用第二个函数返回
可以在第二个函数中编写处理异常的代码

1.4 Promise 中维护了两个隐藏属性：

promiseresult：

-用来存储数据

promisestate

-记录Promise的状态（三种状态）

fulfilled 表示完成通过resolve 存储数据的时候

rejected 表示拒绝，出错了出错了，或者通过reject存储数据的时候

pedding 表示数据在进行中

-State只能修改一次，修改以后永远不会改变

流程：

当promise创建时，promisestate初始值是pending，

当通过resolve存储数据的时候，promisestate变成fulfilled(完成)

promiseresult变为存储的数据

当通过reject存储数据的时候，promisestate变成rejected(表示拒绝，出错了 )

promiseresult变为存储的数据或者异常对象

当我们通过then读取数据的时候，相当于给promise设置了两个回调函数

如果promisestate变成fulfilled，则调用第一个函数返回数据

如果promisestate变成rejected，则调用第一个函数返回数据

promise调用数据必定比后面慢

catch( ) 用法和then类似，但是只需要一个回调函数作为参数

catch( ) 中的回调函数指挥在promise被拒绝的时候调用

catch( ) 相当于 then( null ,reason => { } )

catch( ) 就是一个专门处理promise异常的方法

promise.catch( ( reason ) => { } )

finally( ) 和catc和then都类似

无论是正常存储数据，还是异常处理出局，finally总会执行

promise.finally( ( ) => { } )

但是finally的回调函数张不会接受到数据

finally中通常编写一些无论成功与否都要执行的代码用的特别少

1.5 Promise的使用

Function sum(a , b) {
return new Promise ((resolve , reject ) => {
setTimeout ( () => {
resolve( a + b);
} , 1000)
})
}  //设置函数
//接受数据

Promise
.then( ( result ) => {
console.log("Promise中的数据" , result); 
return "我真帅" ; 
})
.then( (result ) =>{
Console.log( "上一个then中的数据" , result);
return "你也真帅" ; 
})
.then( (result ) =>{
Console.log( result);
})

每一个then都是调用上一个then返回的数据

Promise的链式调用

e.g. 本例子输出的数据为：

Promise
.then( ( result ) => {
console.log("Promise中的数据" , result); 
return "我真帅" ; 
})
.then( (result ) =>{
Console.log( "上一个then中的数据" , result);
return "你也真帅" ; 
})
.then( (result ) =>{
Console.log( result);
})

每一个then都是调用上一个then返回的数据

e.g. 本例子输出的数据为：

promise中的数据

上一个then中的数据我真帅

你也真帅

1.6 Promise中的静态方法（直接用类.方法调用）

Promise.resolve(10) 创建一个立即完成的promise 等价于

New Promise ( (resolve , reject ) => {
Resolve(10) ; 
})

Promise.reject(10) 创建一个立即拒绝的promise 用catch读取数据

Promise.all( [ ] ) :同时返回多个promise的执行结果

Function sum(a , b) {
return new Promise ((resolve , reject ) => {
setTimeout ( () => {
resolve( a + b);
} , 1000)
})
} 
 
Promise.all([
Sum(234 + 123),
Sum(5 +9),
Sum(3 +8 )
]) . Then ( r => {
Console.log( r ) ;
})
 
//输出结果：(3)[357 , 14 , 11]

缺点：其中有一个报错就返回错误！

Promise.allsettled( [ ] )：同时返回多个promise的执行结果（无论错误或者正确）

Promise.allsettled([
Sum(234 + 123),
Sum(5 +9),
Sum(3 +8 )
]) . Then ( r => {
Console.log( r ) ;
})
 
//输出结果：(3)[{…},{…},{…}] 返回三个数据，需要在最后一步打断点即可查看。

promise.race() 返回执行最快的数据（不考虑对错）

promise.any() 返回执行最快的完成的数据（）只有全部报错才会报错

2.宏任务和微任务

2.1 简介

-调用栈：

栈：是一种数据结构，后进先出

调用栈中放的是要执行的代码

-任务队列：

-队列：队列是一种数据结构，先进先出

-任务队列中放的是将要执行的代码

-当调用栈中的代码执行完毕后，队列中的代码才会进入调用栈

-任务队列有两种：

-宏任务队列(大部分代码去宏任务队列)：

-微任务队列(Promise的回调函数 then、catch、finally)：

-整个流程

1.执行调用栈中代码

2.执行微任务队列中的所有任务

3.执行宏任务队列中的所有任务

-一个函数：

queueMicrotask(); 用来向微任务队列中添加一个任务

queueMicrotask( () => {
Console.log(2);
})  //将console.log添加到 微任务队列

Console.log 是在调用栈中执行，在全局定义中！

Stetimeout 在任务队列排队执行，所以console比settimeout执行快

Promise执行原理：

-promise 在执行，then就相当于给promise了回调函数

-当promise的状态从pending变成fulfilled的时候

then的回调函数会被放入任务队列中

3. Async_和await

**async：**可以快速的创建异步函数(返回promise的函数)

异步函数会自动封装到一个promise中返回

 Async function fu(){
	Return 10;
}
Fu.then(r => {
	Console.log;
})
```

**Await：**当通过await去带哦用异步函数的时候，他会停止

代码运行，当异步有结果的时候，才会返回。

Try{
	Let result = await sum(1,2)
}catch( e ) {
	Console.log("出错了~");
}

注意：智能用于async声明的异步函数，或者es模块的顶级作用域中

await阻塞的只是异步函数内部的代码，不会影响外部代码

通过await调用代码时候，需要通过try-catch来处理异常

await在当前函数执行完毕后，将aiait后面代码

添加到微任务队列

4.ES模块

默认情况下，node中的模块化标准是 commonJS

-要想使用ES模块化，可以采用一下两种方案

使用mjs为扩展名 (可以使用打印moudle来检测)
直接修改package.json 将模块化规范设置为ES

{
	"type" : "moudle"  //将所有模块改为ES模块
}

**ES模块化： **

1.向外导出内容 export let a = 10;或者export const b = “芜湖”;

导入模块：import {需要导出的东西} from "./文件地址"

或者import{a as hello} from "文件地址"将a从文件中取出，赋值给hello

或者 import * as m4 from "文件地址" 将文件所有东西取出，将其命名为m4

export default function sum(a,b){  //export default后面必须跟一个值，这叫做默认导出
Return a+b; 
}

导入默认模块：import sum from “文件地址” sum可以修改，名字可以不同。一个模块中只能有一个默认导出

3.导入进来的值是常量，不能修改。常量不影响对象的修改！

4.ES模块化在浏览器中同样支持，但是通常不会直接使用

5.Process

//核心模块：是node中自带的模块，可以在node中直接使用

//window是浏览器的宿主对象，node中没有

在node中，全局变量叫 global ，作用类似与window

核心模块：

process：

-表示当前node的进程

-通过该对象可以获取进程的信息，或者对进程做各种操作

-如何使用：

1.如何获取对象：process是一个全局变量，可以直接使用！

2.有哪些属性和方法：

process.exit()结束当前进程。只能执行该代码之前的代码
Process.netTick(callback[,…args]) 将函数插入到tick队列中

tick队列的执行顺序在微任务之前，调用栈之后！

6. FS文件模块

fs文件模块：需要导入模块 const fs = require('fs')

Fs.readFile(path[,options],callback) 可以读取指定文件的内容

[] 包括的是可选参数

Path 表示文件的路径

Option 表示以什么什么编码格式读取文件

Callback 表示读取文件后的返回值

const fs = require('fs')
fs.readFile('./1.txt','utf8' , function(err,dataStr){
   console.log(err),
   console.log("-------"),
   console.log(dataStr);
})
//可以判断是否存在该文件
const fs = require('fs')
fs.readFile('./1.txt','utf8' , function(err,dataStr){
   if(err){
        return console.log("文件错误，无法查找到内容"+err);
   }
     console.log("查找到内容，内容是："+dataStr);
})

Fs.writeFile(file,data[,options],callback) 可以向指定文件中写入内容

File 文件路径字符串，表示文件存放路径

Data 必表示写入什么内容

Option 表示以什么什么编码格式读取文件

Callback 表示读取文件后的返回值

const fs = require('fs')
fs.writeFile('./1.txt','我是大哥','utf8',function(err){
    if(err){
        console.log(err/message)
    }
})

fs处理路径问题：

出现路径拼接错误，是因为提供了./或者…/开头的相对路径

为了解决这个问题，可以直接提供一个完整的文件存放路径

完整路径(移植性差！不利于维护)

__dirname 表示当前文件所处的目录代表的值不会变化

const fs = require('fs')
fs.readFile(__dirname+"./1.txt","utf8",function(err,dataStr){
    //写入之后，err显示undefined 
    //写入错误，会返回一个错误对象
    if(err){
       return  console.log(err)
    }
})

6.1 小案例

//将./1.txt中的数据改变格式
const fs = require('fs')
fs.readFile("./1.txt","utf8",function(err,dataStr){
    //写入之后，err显示undefined 
    //写入错误，会返回一个错误对象
    if(err){
       return  console.log(err)
    }
    // console.log(dataStr)
    //将成绩按照空格分隔
    const arrold = dataStr.split(' '); //在两个数据之间加入空格分隔
    console.log(arrold)
    //循环分割后的数组，对每一项数据进行字符串替换操作
    const arrnew = [];
    arrold.forEach(element => {
        arrnew.push(element.replace('=',': ')) //foreach 可以遍历数组 
push可以添加数组 replace=可以将左边的换成右边
    });
    // console.log(arrnew)
    //把新数组中的每一项，进行合并，得到一个新的字符串
    const newStr = arrnew.join("\r\n")   // \r 表示回车 \n表示换行
    console.log(newStr);
    //将新数组写入文档中
    fs.writeFile('./2.txt',newStr,function(err){
        if(err){
            return console.log(err.message)
        }
        console.log("写入成功!")
    })
})

7.path模块

Path.join() 可以将多个路径片段拼接成一个完整路径字符串

Path.basename() 从路径字符串中将文件名解析出来

引入path模块：

Const path = require('path')

Path.join()语法格式：

Path.join([…path])

Path(string) 需要拼接的字符串

返回值(string)

const path = require('path')
const result = path.join('/a','/b/c','../','/o')   //  '../' 可以抵消前
面一个路径
console.log(result)  //输出 \a\b\o /c被../抵消
 
const result1 =path.join(__dirname,'./1.txt') //当前目录文件地址+./1.txt
console.log(result1)

Path.basename() 可以获取路径的最后一部分

Path.basename(path[,ext])

Path 表示一个路径

Ext 表示文件扩展名

返回值路径的最后一部分

const path = require('path')
const Mypath = "/a/b/c/index.html"
//获取到文件最后一个路径的全部名称
const fullpath = path.basename(Mypath)  
console.log(fullpath)   // 结果 index.html
//剪切掉文件最后的扩展名的最后一个名称
const extpath = path.basename(Mypath,'.html')
console.log(extpath)  //结果 index

Path.extname() 获取路径中文件扩展名

Path.extname(path)

Path 文件路径

返回值扩展名

const path = require('path')
const Mypath = "/a/b/c/index.html"
//可以获取到文件的扩展名
const extpath = path.extname(Mypath)
console.log(extpath)

8. 创建web服务器

步骤：

导入http模块
创建web服务器实例
为服务器绑定request事件，监听客户端请求
启动服务器

//创建一个简单的服务器
const http = require('http')
//创建web服务器实例
const server = http.createServer();
//为服务器绑定request事件
//使用服务器实例的 .on()方法，为服务器绑定request事件
server.on('request',(require,response) =>{
    //只有客户端来请求我们服务器，会触发 request 事件，从而调用事件函数
    console.log('Someone visit our web server')
})
//启动服务器
//使用 .listen(端口号，cd回调)方法，即可启动当前的web服务器实例
server.listen(8000,function(){
    console.log('http server running at http://127.0.0.1:8000')
})

8.1. request请求对象

只要服务器接收到了客户端的请求，就可以用server.on()为服务器request事件处理函数

可以访问客户端的数据或者属性

Request.url 可以获取客户端请求的 URL 地址

Requset.method 可以获取客户端的 method 请求类型

8.2.response响应对象：

Res.end() 向客户端发送指定内容，并且结束本次请求的处理过程

const http = require('http')
//创建web服务器实例
const server = http.createServer();
//为服务器绑定request事件
//使用服务器实例的 .on()方法，为服务器绑定request事件
server.on('request',(request,response) =>{
    //只有客户端来请求我们服务器，会触发 request 事件，从而调用事件函数
    const url = request.url
    const method = request.method
    const str ='your url is'+ url+'your method is'+ method
    response.end(str)
})
//启动服务器
//使用 .listen(端口号，cd回调)方法，即可启动当前的web服务器实例
server.listen(8000,function(){
    console.log('http server running at http://127.0.0.1:8000')
})

8.3.res.end()

向客户端发送中文的时候，会出现乱码，需要手动调试需要设置响应头

response.setheader('Content-Type' , 'text/html ; charset=utf-8')

const http = require('http')
//创建web服务器实例
const server = http.createServer();
//为服务器绑定request事件
server.on('request',(request,response)=>{
    const url = request.url
    //设置想用响应内容
    let cocntent = '<h1>404 Not found</h1>'
    if(url === '/' || url === '/index.html'){
        cocntent = '<h1>首页</h1>'
    } else if(url === '/about.html'){
        cocntent = '<h1>关于页面</h1>'
    }
    //防止中文乱码
    response.setHeader('Content-Type' , 'text/html ; charset=utf-8')
    response.end(cocntent)
})
server.listen(8000,function(){
    console.log("8000端口已监听..... http://127.0.0.1:8000")
})

9.模块

使用 **require() **加载模块

加载内置模块

Const fs = require ('fs')

加载用户自定义模块

Const custom = require('./custom.js')

加载第三方模块

Const moment = require('moment')

**Moudle.export() **可以输出对象，其他模块中引入的就是上一个模块输出的对象

使用：

Moudle.exports.名称=值 （向moudle.exports对象上挂载一个属性）

Modlue.exports和exports指向同一个对象，最终以modlue.exports指向的对象为准

//text.js中内容
const path = require('path')
module.exports.username='你爹'
module.exports.sayHello=function(username){
    console.log(path.join("欢迎来到",username,"的世界"))
}
//只会打印下面的，require 指向的永远是moudle.exports直接指向的对象
module.exports = {
    nickname:'我',
    saybye:function(){
        console.log("哈哈哈")
    }
}
//server.js中内容
const sayHello=require('./text')
console.log(sayHello)

10. npm和包

包：第三方模块也可以叫做包，是基于内置模块封装出来的

在哪里下载包： http://www.npmjs.com/ 包共享平台(搜索需要的包)

https://registry.npmjs.org/ (下载需要的包)

10.1 格式化时间的两种做法

10.1.1 传统

//text.js内容
const dataformat = function(dtStr){
    //创建时间函数
    const dt = new Date(dtStr)
    //获取年月日
    const y = dt.getFullYear()
    const m = padZero(dt.getMonth() + 1) //获取的月份是0~11，需要加1
    const d = padZero(dt.getDay())
    //获取时分秒
    const hh = padZero(dt.getHours())
    const mm = padZero(dt.getMinutes())
    const ss = padZero(dt.getSeconds())
    //返回拼接值
    let result = y+'-'+m+'-'+d+' '+hh+':'+mm+':'+ss
    return result
}
//定义补零函数
function padZero(n){
    return n>9 ? n:'0'+n  //正则表达式
}
//对外暴露对象
module.exports={
    dataformat
}

//server.js内容
//导入自定义格式化事件的模块
const TIME = require('./text')
//调用方法，进行时间的格式化
const dt = new Date()
//打印
const newDT=TIME.dataformat(dt)
console.log(newDT)

10.1.2 npm操作(moment)

需要先在终端运行npm i moment 来安装moment包

//moment导包操作
//导包
const moment = require('moment')
//使用format添加日期
const dt = moment().format('YYYY-MM-DD HH:mm:ss')
console.log(dt)

10.2

如何安装指定版本的包：

Npm I moment@版本号可以下载指定版本的包

包的语义化版本规范:

第一位数字：大版本

第二位数字：功能版本

第三个数字：bug修复版本

（只要前面的版本号增长，后面的版本号都要归零）

11.制作一个包

安装方式、导入方式、格式化时间、转义HTML中的特殊字符、还原HTML中的特殊字符、开源协议

包中应该存在 index.js package.json README.md 各种方法js

{
    "name":"mahaobo-tools",
    "version": "1.0.0",
    "main": "index.js",
    "description": "提供了格式化时间,HTMLEscape的功能",
    "keywords": ["mahaobo","dataFormate","escape"],
    "license": "ISC"
}

//入口
const moment = require('moment')
//使用format添加日期
const dt = moment().format('YYYY-MM-DD HH:mm:ss')
//定义一个转义HTML的方法
function htmlEscape(htmlStr){
    return htmlStr.replace( /<|>|"|&/g ,(match)=>{
        switch(match){
            case '<': return '&alt';
            case '>': return '&gt';
            case '"': return '&quot';
            case '&': return '&amp';
        }
    })
}
//定义一个还原 HTML 的方法
//定义一个转义HTML的方法
function htmlUnEscape(htmlStr){
    return htmlStr.replace( /&alt|&gt|&quot|&amp/g ,(match)=>{
        switch(match){
            case '&alt': return '<';
            case '&gt': return '>';
            case '&quot': return '"';
            case '&amp': return '&';
        }
    })
}
module.exports={
    dt,
    htmlEscape,
    htmlUnEscape
}

README. md文档内容：说名该文档下载和各方法的使用

12.Express(可以快速的创建 web网站的服务器或者api接口服务器)

安装：npm install express@4.17.1

//使用express创建一个get请求服务器
//app.send() 既可以发送一个json类型的对象，也可以发送普通内容
//导入express
const express = require('express')
//创建web服务器
const app = express()
//监听 get 请求
app.get('/user',(request, response)=>{
    //向客户端发送json对象
    response.send(
        {
            name:'mahaobo',
            age:15,
            address:'china'
        }
    )
})
//启动web服务器
app.listen(80,()=>{
    console.log('express server running at http://127.0.0.1')
})

通过requset.query对象，可以访问到客户端通过查询字符串的形式，发送到服务器参数：

app.get('/',(req,res)=>{
 //通过req.query可以获得客户端发送过来的查询参数
 console.log(req.query)
 res.send(req.query)
})

通过req.params对象，可以访问到 URL 中，通过：匹配到的动态参数

// :名字 可以获取动态参数，可以添加多个
app.get('/user/:id',(req,res)=>{
  //这里的 :id 是一个动态的参数
  //通过 req.params 查询动态参数
  console.log( req.params)
  res.send( req.params)
})

Express.static() 可以创建一个静态资源：调用app.use()调用

app.use(express.static('./clock'))
//可以对外暴露 clock文件夹的资源
//外部使用时候，只需要在URL后加上 需要获取的文件名即可 
e.g. http://127.0.0.1/index.js

如果要托管多个静态资源目录，可以多次调用 express.static() 函数，查找文件时候，会按照先后顺序查找！

晊恦－love

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Ajax内容

一个用来存储数据的容器他用有一套特殊的存取数据的方式这个方式使得他里面可以存储异步调用的结果-调用栈：栈：是一种数据结构，后进先出调用栈中放的是要执行的代码-任务队列：-队列：队列是一种数据结构，先进先出-任务队列中放的是将要执行的代码-当调用栈中的代码执行完毕后，队列中的代码才会进入调用栈-宏任务队列(大部分代码去宏任务队列)：-整个流程1.执行调用栈中代码2.执行微任务队列中的所有任务3.执行宏任务队列中的所有任务用来向微任务队列中添加一个任务。
复制链接

扫一扫