Node.js(二) -请求响应原理及HTTP协议、回调地狱、promise、异步函数

最新推荐文章于 2024-05-09 00:45:00 发布

Ludwig1597

最新推荐文章于 2024-05-09 00:45:00 发布

阅读量401

点赞数

分类专栏： Node.js 文章标签： http node

本文链接：https://blog.csdn.net/Ludwig1957/article/details/114339064

版权

Node.js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

2021.3.1

Node.js(二)

请求响应原理及HTTP协议

服务器端基础概念

网站的组成

网站应用程序主要分为两大部分：客户端和服务器端。

客户端：在浏览器中运行的部分，就是用户看到并与之交互的界面程序。使用HTML、CSS、JavaScript构建。
服务器端：在服务器中运行的部分，负责存储数据和处理应用逻辑。

在这里插入图片描述

Node网站服务器

能够提供网站访问服务的机器就是网站服务器，它能够接受客户的请求，也能够对请求做出响应。

IP地址

互联网中设备的唯一标识。
IP是Internet Protocol Address的简写，代表互联网协议地址。

域名

由于IP地址难于记忆，所以产生了域名的概念，所谓域名就是平时上网所使用的网址，其与IP是一一对应的关系。
www.baidu.com------>202.108.22.5
虽然在地址栏输入的是网址，但是最终还是会将域名转换为ip才能访问到指定的网站服务器。

端口

端口是计算机与外界通讯交流的出口，用来区分服务器电脑中提供的不同的服务。

在一台服务器中，可以提供很多种服务，比如网站服务、比如邮件服务、比如文件上传下载服务，当客户端通过IP，找到服务器端电脑以后，服务器端怎样知道你想找他提供哪种服务呢？此时端口就出现了。
在这里插入图片描述

创建web服务器

//引用系统模块
const http=require('http');
//创建web服务器，createServer()有个返回值，就是服务器对象
const app=http.createServer();
//Node.js也是基于事件驱动的语言
//当客户端发送请求的时候
app.on('request',(req,res)=>{
    //响应请求,res是response对象
    res.end('<h1>hi,user</h1>');
});
//监听3000端口
app.listen(3000);
console.log('服务器已启动，监听3000端口，请访问localhost:3000')

在命令行中切换到当前文件夹下，使用nodemon .\app.js执行当前文件，如果出现防火墙提示信息则允许访问，之后打开浏览器输入http://localhost:3000/，这是一个特殊的域名，localhost代表自己的电脑。

HTTP协议

HTTP协议的概念

HTTP协议：超文本传输协议（HyperText Transfer Protocol）规定了如何从网站服务器传输超文本到本地浏览器，它基于客户端服务器架构工作，是客户端（用户）和服务器端（网站）请求和应答的标准。
在这里插入图片描述

报文

在HTTP请求和响应的过程中传递的数据块就叫报文，包括要传送的数据和一些附加信息，并且要遵守规定好的格式。
在这里插入图片描述

在浏览器中按f12点击network可以看见报文。

请求报文

请求方式（Request Method）
- GET：请求数据（获取数据）
- POST：发送数据（添加数据），相对于GET要安全一些
在服务器端可以通过req.method获取客户端的请求方式。然后可以根据请求方式的不同去做不同的事情。

请求地址（Request URL）

app.on('request',(reg,res)=>{
    req.headers;//获取请求报文
    req.url;//获取请求地址
    req.method;//获取请求方式
});

响应报文

HTTP状态码
- 200：请求成功
- 404：请求的资源没有找到
- 500：服务器端错误
- 400：客户端请求有语法错误
在浏览器f12–>network–>status可以看到这个状态码
内容类型
- text/html
- text/css
- application/javascript
- image/jpeg
- application/json

app.on('request', (req, res) => {
    //获取请求方式req.method
    //console.log(req.method);

    //获取请求地址 req.url
    //console.log(req.url);

    //获取请求报文信息 req.headers
    //console.log(req.headers);

    //写状态码
    res.writeHead(200, {
        //'content-type': 'text/plain' //plain代表纯文本
        'content-type': 'text/html;charset=utf8'
    });
    console.log(req.headers['accept']);
    if (req.url == '/index' || req.url == '/') {
        //res.end('<h2>welcome to homepage</h2>');
        res.end('<h2>welcome to 首页</h2>');
    } else if (req.url == '/list') {
        res.end('welcome to listpage');
    } else {
        res.end('not found');
    }
});

HTTP请求与响应处理

请求参数

客户端向服务器端发送请求的时候，有时需要携带一些客户信息，客户信息需要通过请求参数的形式传递到服务器端，比如登录操作。

GET请求参数

参数被放置在浏览器地址栏中，例如：http://localhost:3000/?name=zhangsan&age=20

const http = require('http');
//用于处理url地址
const url = require('url')
const app = http.createServer();

app.on('request', (req, res) => {
    console.log(req.url);
    //第一个参数：要解析的url地址
    //第二个参数：将查询参数解析成对象形式，布尔值，默认false
    //console.log(url.parse(req.url, true).query);
    //let params = url.parse(req.url, true).query;
    //采用对象解构
    let { query, pathname } = url.parse(req.url, true);

    console.log(query.name);
    console.log(query.age);
    if (pathname == '/index' || pathname == '/') {
        //res.end('<h2>welcome to homepage</h2>');
        res.end('<h2>welcome to 首页</h2>');
    } else if (pathname == '/list') {
        res.end('welcome to listpage');
    } else {
        res.end('not found');
    }
});
//监听端口
app.listen(3000);
console.log('网站服务器启动成功');

POST请求参数

参数被放置在请求体中进行传输
获取POST参数需要使用data事件和end事件
使用querystring系统模块将参数转换为对象格式

//导入系统模块querystring用于将HTTP参数转换为对象格式
const querystring = require('querystring');
//为网站服务器添加一个请求事件
app.on('request', (req, res) => {
    //post参数是通过事件的方式接受的
    //事件名称分别是data事件和end事件
    //data 当请求参数传递的时候触发data事件
    //end 当请求参数传递完成的时候触发end事件
    let postParams = '';
    req.on('data', params => {
        postParams += params
    });
    req.on('end', () => {
        console.log(querystring.parse(postParams));
    });

    res.end('ok');
});

路由

路由是指客户端请求地址与服务器端程序代码的对应关系。简单的说，就是请求什么响应什么。
在这里插入图片描述

实际上路由就是一堆判断代码，判断客户端请求的地址是什么，然后调用服务器端处理程序对应代码。

//当客户端发来请求的时候
app.on('request',(req,res)=>{
    //获取客户端的请求路径
    let{pathname}=url.parse(req.url);
    if(pathname=='/'||pathname=='/index'){
        res.end('欢迎来到首页');
    }else if(pathname=='/list'){
        res.end('欢迎来到列表页面');
    }else{
        res.end('抱歉，您访问的页面出游了');
    }
})

route>app.js

//1.引入系统模块http
//2.创建网站服务器
//3.为网站服务器对象添加请求事件
//4.实现路由功能
//4.1)获取客户端的请求方式
//4.2)获取客户端的请求地址
const http = require('http');
const url = require('url');
const app = http.createServer();

app.on('request', (req, res) => {
    //获取请求方式
    const method = req.method.toLowerCase(); //转换成小写
    //获取请求地址
    const pathname = url.parse(req.url).pathname;

    //响应报文的处理，不让中文乱码
    res.writeHead(200, {
        'content-type': 'text/html;charset=utf8'
    })
    if (method == 'get') {
        if (pathname == '/' || pathname == '/index') {
            res.end('欢迎来到首页')
        } else if (pathname == '/list') {
            res.end('欢迎来到列表页')
        } else {
            res.end('您访问的页面不存在')
        }
    } else if (method == 'post') {

    }
})

app.listen(3000);
console.log('服务器启动成功');

静态资源

服务器端不需要处理，可以直接响应给客户端的就是静态资源，如CSS、JavaScript、image文件。

const http = require('http');
const url = require('url');
const path = require('path');
const fs = require('fs');
const mime = require('mime');

const app = http.createServer();

app.on('request', (req, res) => {
    //res.end(url.parse(req.url).pathname);
    //获取用户的请求路径
    let pathname = url.parse(req.url).pathname;

    pathname = pathname == '/' ? '/default.html' : pathname;

    //将用户的请求路径转换为实际的服务器硬盘路径
    let realPath = path.join(__dirname, 'public', pathname)

    let type = mime.getType();

    //读取文件
    fs.readFile(realPath, (error, result) => {
        //如果文件读取失败
        if (error != null) {
            res.writeHead(404, {
                'content-type': 'text/html;charset=utf8'
            })
            res.end('文件读取失败');
            return;
        }
        res.writeHead(200, {
            'content-type': type
        })
        res.end(result);
    })
});

app.listen(3000);
console.log('服务器启动成功');

动态资源

相同的请求地址不同的响应资源，这种资源就是动态资源。
在这里插入图片描述

Node.js异步编程

同步API，异步API

//路径拼接
const public=path.join(__dirname,'public');
//请求地址解析
const urlObj=url.parse(req.url);
//读取文件
fs.readFile('./demo.txt','utf8',(err,result)=>{
    console.log(result);
})

同步API：只有当前API执行完成之后，才能继续执行下一个API（sync同步）。

console.log('before');
console.log('after');

异步API：当前API的执行不会阻塞后续代码的执行（async异步）。

console.log('before');
setTimeout(()=>{
    console.log('last');
},2000)
console.log('after');

同步API，异步API的区别1（获取返回值）

同步API可以从返回值中拿到API执行的结果，但是异步API是不可以的。

//同步
function sum(n1,n2){
    return n1+n2;
}
const result=sum(10,20);
//异步
function getMsg(){
    setTimeout(function(){
        return {msg:'Hello Node.js'}
    },2000);
}
const msg=getMsg();

回调函数

自己定义函数让别人去调用。

//callback是形参，实参实际上是一个函数，将一个函数作为零一个函数的参数
//callback所对应的函数就是回调函数

//getData函数定义
function getData(callback){}
//getData函数调用
getData(()=>{});

实例：

function getData(callback) {
    callback(123);
}

getData(function(n) {
    console.log('callback函数被调用了');
    console.log(n);
})

异步API中我们不能通过返回值去拿结果，只能通过回调函数callback去取得结果。

function getMsg(callback) {
    setTimeout(function() {
        callback({
            msg: 'hello node.js'
        })
    }, 2000)
}
getMsg(function(data) {
    console.log(data);
})

同步API，异步API的区别2（代码执行顺序）

同步API从上到下依次执行，前面代码会阻塞后面代码的执行。

for(var i=0;i<10000000;i++){
    console.log(i);
}
console.log('for循环后面的代码');

异步API不会等待API执行完成后再向下执行代码

console.log('代码开始执行');
setTimeout(()=>{console.log('2秒后执行的代码')},2000);
setTimeout(()=>{console.log('0秒后执行的代码')},0);
console.log('代码执行结束');
/* 码开始执行
代码执行结束
0秒后执行的代码
2秒后执行的代码 */

在这里插入图片描述

Node.js中的异步API

fs.readFile('./demo.txt',(err,result)=>{});

var server=http.createServer();
server.on('request',(req,res)=>{});

一个问题：如果异步API后面的代码执行依赖当前异步API的执行结果，但实际上后续代码在执行的时候异步API还没有返回结果，这个问题如何解决？比如：

fs.readFile('./demo.txt',(err,result)=>{});
console.log('文件读取结果');

需求：依次读取A文件、B文件、C文件

回调地狱

//回调地狱 callbackhell.js
const fs = require('fs');

fs.readFile('./1.txt', 'utf8', (err, result1) => {
    console.log(result1);
    fs.readFile('./2.txt', 'utf8', (err, result2) => {
        console.log(result2);
        fs.readFile('./3.txt', 'utf8', (err, result3) => {
            console.log(result3);
        })
    })
})

Promise

Promise出现的目的是解决Node.js异步编程中的回调地狱的问题。
帮助我们做到异步API的执行和结果处理的一个分离。
基础语法

let promise=new Promise((resolve,reject)=>{
    setTimeout(()=>{
        if(true){
            resolve({name:'张三'})
        }else{
            reject('失败了')
        }
    },2000);
});

promise.then(result=>console.log(result);)//{name:'张三'} 
        .catch(error=>console.log(error);)//失败了

实际上，promise本身是一个构造函数。如果想用promise去解决回调地狱的问题，我们需要先使用new运算符，去创建promise构造函数的实例对象。
在创建实例对象的过程中，我们需要给构造函数传递一个匿名函数，在匿名函数中它有两个参数，一个是resolve，一个是reject。
原本promise是想我们把异步API的代码，放在这个匿名函数中。比如说，这里的setTimeout,两秒钟的一个定时器，在定时器执行完成之后，那么这个异步API会有一个结果，promise不想让我们在内部再去处理这个结果，它希望我们能把这个拿到外面去处理。如何达到这个目的，我们通过result、reject这两个参数。
第一个project参数，实际上是一个函数。当异步API有返回结果的时候，我们可以去调用resolve这个函数，并且把异步API的执行结果，通过参数的形式把它传出去。简言之，resolve的一个作用是：将异步API的执行结果给它传递出去
第二个参数reject，reject本身也是一个函数，当这个异步API执行失败了，我们就可以调用reject这个函数，把这个失败的结果，传递到promise外面去。
promise实际上，就是在我们原本的异步API的外面，包裹了一层，然后，当我们原本的异步API有返回结果的时候，它给我们提供了两个方法：成功就调用resolve，把结果传递到整体的外面；如果失败就调用reject，把失败的信息传递到整体的外边去，就是这样的一个语法上的改进。

那么在promise的外面，我们怎样才能拿到这个异步API的执行结果呢？
注意，我们在new Promise()以后,我们得到了一个promise的实例对象，在promise这个实例对象下面我们有一个then方法，then有然后的意思，在then方法里面我们要传递一个函数，当异步API执行完成的时候，我们调用resolve这个参数，那么调用resolve实际是执行then里面的回调函数，这是获取成功里的结果。如果失败了，我们调用了reject，promise下我们除了then方法以外，还给我们提供了一个catch方法，catch方法里面也需要传递一个函数，我们调用reject实际上调用的就是catch这个方法内部的这个函数。我们在这个函数里面就能拿到失败的信息了。promise允许链式编程，在.then后面再有一个.catch。

我们把异步API的执行和结果实现了一个分离：

const fs = require('fs');
const { resourceLimits } = require('worker_threads');
let promise = new Promise((resolve, reject) => {
    fs.readFile('./1.txt', 'utf8', (err, result) => {
        if (err != null) {
            reject(err)
        } else {
            resolve(result);
        }
    });
});

promise.then((result) => {
    console.log(result);
}).catch((err) => {
    console.log(err);
})

那么如何用promise来解决回调地狱的问题呢？
如果我们想用promise去解决回调地狱的问题，首先我们要看，这个回调地狱中有多少个异步API，有三个异步API，我们就需要三个promise对象。我们在第一个promise对象里去读取第一个文件，以此类推。

//promise解决回调地狱 promise.js
const fs = require('fs');

/* fs.readFile('./1.txt', 'utf8', (err, result1) => {
    console.log(result1);
    fs.readFile('./2.txt', 'utf8', (err, result2) => {
        console.log(result2);
        fs.readFile('./3.txt', 'utf8', (err, result3) => {
            console.log(result3);
        })
    })
}) */

function p1() {
    //let p1 = new Promise((resolve, reject) => {
    return new Promise((resolve, reject) => {
        fs.readFile('./1.txt', 'utf8', (err, result) => {
            resolve(result);
        })
    })
}

function p2() {
    return new Promise((resolve, reject) => {
        fs.readFile('./2.txt', 'utf8', (err, result) => {
            resolve(result);
        })
    })
}

function p3() {
    return new Promise((resolve, reject) => {
        fs.readFile('./3.txt', 'utf8', (err, result) => {
            resolve(result);
        })
    })
}

p1().then((r1) => {
    console.log(r1);
    return p2();
}).then((r2) => {
    console.log(r2);
    return p3();
}).then((r3) => {
    console.log(r3);
    return p3();
})

异步函数

异步函数是异步编程语法的终极解决方案，它可以让我们将异步代码写成同步的形式，让代码不再有回调函数嵌套，使代码变得清晰明了。
异步函数基础语法：

const fn=async()=>{};

async function fn(){};

所谓异步函数，就是在普通函数定义的前面加上关键字，async这个关键字实际上就是异步的意思，加上async这个关键字之后，普通函数就变成了异步函数。

实例：

//asyncFunction.js

async function fn() {
    //return new Promise();
    throw '发生了一些错误';
    return 123;
    //我们现在使用了return这个关键字替代了原有的resolve方法
}

//console.log(fn());
fn().then(function(data) {
    console.log(data);
}).catch(function(err) {
    console.log(err);
})

async关键字

普通函数定义的前面加上async关键字，普通函数就变成了异步函数
异步函数默认的返回值是promise对象
在异步函数内部我们使用return关键字进行结果返回，结果会包裹在promise对象中，我们使用return关键字代替了resolve方法
在异步函数内部我们可以使用throw关键字抛出程序异常
在异步函数外面链式调用then方法可以获取异步函数执行结果
在异步函数外面链式调用catch方法可以获取异步函数执行的错误信息

await关键字

await关键字只能出现在异步函数中
await promise：await后面只能写promise对象，写其他类型的API不可以
await关键字可以暂停异步函数向下执行，直到promise返回结果

async function p1() {
    return 'p1';
}
async function p2() {
    return 'p2';
}
async function p3() {
    return 'p3';
}
//异步操作写成了同步代码的格式
async function run() {
    let r1 = await p1();
    let r2 = await p2();
    let r3 = await p3();
    console.log(r1);
    console.log(r2);
    console.log(r3);
}
run();

使用异步函数解决依次读取A、B、C三个文件

const fs = require('fs');
//改变现有异步函数api，让其返回promise对象，从而支持异步函数语法
const promisify = require('util').promisify;
//调用promisify方法改造现有异步api，让其返回promise对象
const readFile = promisify(fs.readFile);

async function run() {
    let r1 = await readFile('./1.txt', 'utf8');
    let r2 = await readFile('./2.txt', 'utf8');
    let r3 = await readFile('./3.txt', 'utf8');
    console.log(r1);
    console.log(r2);
    console.log(r3);
}
run();

Ludwig1597

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Node.js(二) -请求响应原理及HTTP协议、回调地狱、promise、异步函数

2021.3.1文章目录Node.js(二)请求响应原理及HTTP协议服务器端基础概念网站的组成Node网站服务器IP地址域名端口创建web服务器创建web服务器HTTP协议HTTP协议的概念报文请求报文响应报文HTTP请求与响应处理请求参数GET请求参数POST请求参数路由静态资源动态资源Node.js异步编程同步API，异步API同步API，异步API的区别1（获取返回值）回调函数同步API，异步API的区别2（代码执行顺序）Node.js中的异步API回调地狱Promise异步函数Node.j.
复制链接

扫一扫