Network下方什么请求也没有_(二)请求响应原理及HTTP协议

1.服务器端基础概念

网站分为两大部分:客户端和服务器端。

客户端：浏览器交互界面程序，由HTML、CSS、JavaScript构建

服务器端：负责存储数据和处理应⽤逻辑

IP地址：互联网中设备的唯一标识

域名：平时所用的网址。域名自动转为IP地址后访问服务器

端口：计算机与外界通讯交流的出口，不同端口得到服务器电脑的不同服务

URL：更详细的网址

http：超⽂本传输协议，提供了⼀种发布和接收HTML页⾯的方法

2.创建web服务器

用node.js环境，创建软件层面的服务器

const 

第一句引用系统模块。

第二句创建web服务器。

第三局添加请求事件。

• 格式：服务器对象.on( '事件名称', 事件处理函数 );
• 函数里第一个参数req是请求对象，里面包含请求地址，请求IP等信息；第二个参数res是响应对象，函数里可以使用此对象的方法。

第四句是监听端口，服务器只有监听端口后才能为外界提供服务；3000是端口号。

启动网站服务器

终端里写：nodemon 文件名.js

访问此服务器

浏览器输入网址localhost:3000

3.HTTP协议

用户请求网站和网站应答用户的标准。

报文：客户端与服务器端交流的数据块，有请求报文和响应报文。

查看报文

浏览器—检查—Network—刷新一下—点击一个

Headers

• Response Headers响应报文
• Request Headers请求报文

Response

• 反馈的完整的html文件

需要掌握的信息

1.请求报文

(1)客户端的请求方式

req.method

• GET 索要数据 例如：浏览器输入网址回车
• POST 发送数据 例如：HTML页面的表单标签提交方式<form method = "post">
• 若只是网站的基本逻辑，既不是索取也不是发送，比如登录，就用POST，因为更安全。

服务器端可以通过区分请求方式做不同的事情

if 

(2)客户端请求地址

req.url

服务器端可以通过区分请求地址做不同的事情

if 

(3)客户端的请求报文

req.headers

具体到哪一项可以写req.headers['accept']

2.响应报文 writeHead

(1)HTTP状态码

表示响应报文的状态，检查—Network—Status就是

• 200 成功
• 404 没找到请求的资源
• 500 服务器错误
• 400 客户端请求有语法错误

(2)内容类型

一定要写对，不然会乱码

• text/html
• text/css
• application/javascript
• image/jpeg
• application/json

res

4.HTTP请求与响应的处理

1.请求参数

登录时，传输用户名、密码到服务器端

发表文章时，传输标题、作者、事件、内容到服务器端

客户端请求途径

GET方式：

浏览器地址栏；link标签的href属性；script的src属性；img的src属性；Form表单提交。

POST方式：

Form表单提交。

GET请求参数

• 放在地址栏中传输；用&分隔。
• 内置模块url，是用来处理url地址的
• req.url是网址+参数 http://localhost:3000/?name=zhangsan&age=20
• pathname是网址

// 用于创建网站服务器的模块

POST请求参数

放在请求报文中传输，服务器通过input标签的name属性获取内容。

查看位置：检查—Network—Name—Headers—FormData

POST请求参数是通过事件接收的。当有参数传输时，触发data事件；当参数传输完成时，触发end事件

POST参数有可能很大，所以是分多次传输的，减轻服务器压力

• 声明空变量用来存参数
• data事件就是传输信息的，参数名自定义params，参数就是信息
• params拼接存到空变量里
• 传输完成后，end事件输出变量
• 给服务器端写个end响应，不然客户端一直处于等待状态

const 

2.路由

客户端请求地址与服务器端程序代码的对应关系，请求什么就响应什么。

// 引入系统模块

3.静态资源

浏览器能直接响应的资源，比如：CSS、JavaScript、image等。

http://www.itcast.cn/images/logo.png

就能读取图片

动态资源

请求地址相同，参数不同，得到结果不同的资源。

http://www.itcast.cn/article?id=1

http://www.itcast.cn/article?id=2

读取静态资源的步骤

1. req.url获取到用户的请求路径
2. 将请求路径转换为文件物理路径
3. 读取文件内容
4. 将内容返回给客户端

// 引入用到的模块

修补1

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

结构是三元表达式，然后把三元表达式的结果赋值给变量

解决了localhost:3000/default.html能读取到页面，localhost:3000读取不到页面的问题

修补2

资源的类型太多，将所有类型赋值给一个变量，方便后面调用

5.Node.js异步编程

同步API：当前API执行完，才能进行下一个。结果通过返回值得到。

异步API：当前API不会阻塞后面的API，比如：定时器。结果通过回调函数得到。

回调函数：自己定义函数，让别人调用。

function 

详解

console

结果是 代码开始执行 代码结束执行 0s 2s

第一句是同步代码直接放入同步执行区打印，第二句是异步代码放异步执行区，并把回调函数放到回调函数队列，第三句同第二句，第四句是同步代码直接放入同步执行区打印。

同步区执行完，执行异步区，按照延时顺序把对应的回调函数放入同步区执行。

常见的异步API

读取文件

fs

事件监听

var 

那么问题来了

如果异步API后面代码的执行依赖当前异步API的执⾏结果，但实际上后续代码在执行的时候异步API还没有返回结果，这个问题要怎么解决?

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

方法一：回调地狱，套娃

const 

方法二：Promise

没有特别的功能，只是语法上的改进，可以把异步API的执行和结果处理进行分离

const 

• 是个构造函数，需要用new创造实例对象
• resolve是个函数，有返回结果就调用它，并且把异步API的执行结果通过参数形式传递出去
• reject也是个函数，当异步API执行失败了，就调用它，把失败的消息传到promise外面去
• promise.then方法拿到异步API成功执行的结果，相当于resolve
• promise.catch方法拿到失败的信息块，相当于reject

解决Node.js异步编程中回调地狱的问题

const 

异步函数

promise太繁琐，用异步函数写法更简单。

异步函数就是在promise的基础上进行封装，开放几个关键字供使用，并且能将异步代码写成同步的形式。

普通函数前写上async，就变成异步函数了，它的返回值是promise对象。就不用写创建promise对象了。

• 在异步函数内部使用return关键字进行结果返回，结果会被包裹的promise对象中return关键字代替resolve方法
• 调⽤异步函数，再链式调用then方法，能获取异步函数执⾏结果
• 调⽤异步函数，再链式调用catch⽅法，能获取异步函数执行的错误信息

async 

throw关键字可以抛出异常

async 

await关键字，后面的promise对象有返回结果后，再向下执行，从而保证有序执行。await关键字只能出现在异步函数中，后⾯面只能写promise对象类的API。

util模块

fs模块下的readfile方法是获取文件读取结果，但是它不返回promise对象

util模块下的promisify方法，可以让改造异步API，让它返回promise对象

// 导入fs模块