http协议&如何获取请求参数&异步函数
服务器端基础概念
网站的组成
网站应用程序主要分为两大部分：客户端和服务器端。
**客户端：**在浏览器中运行的部分，就是用户看到并与之交互的界面程序。使用HTML、CSS、JavaScript构建。
**服务器端：**在服务器中运行的部分，负责存储数据和处理应用逻辑。
Node网站服务器
能够提供网站访问服务的机器就是网站服务器，它能够接收客户端的请求，能够对请求做出响应。
IP地址
互联网中设备的唯一标识。
IP是Internet Protocol Address的简写，代表互联网协议地址.
域名
由于IP地址难于记忆，所以产生了域名的概念，所谓域名就是平时上网所使用的网址
http://www.itheima.com => http://124.165.219.100/
虽然在地址栏中输入的是网址, 但是最终还是会将域名转换为ip才能访问到指定的网站服务器。
端口
使用端口区分不同的服务，它是一些具有一定范围的数字, 范围是0到65535, 每一个向外界提供服务的软件, 都要占用一个端口
URL(★★★)
统一资源定位符，又叫URL（Uniform Resource Locator），是专为标识Internet网上资源位置而设的一种编址方式，我们平时所说的网页地址指的即是URL。
URL的组成
传输协议://服务器IP或域名:端口/资源所在位置标识
http://www.itcast.cn/news/20181018/09152238514.html
http：超文本传输协议，提供了一种发布和接收HTML页面的方法。
开发过程中客户端和服务器端说明
在开发阶段，客户端和服务器端使用同一台电脑，即开发人员电脑。
**本机域名：**localhost
**本地IP ：**127.0.0.1
创建web服务器(★★★)
-
引用系统模块
const http = require('http'); -
创建web服务器
const app = http.createServer(); -
当客户端发送请求的时候(监听客户端发送过来的请求)
app.on('request', (req, res) => { // 响应 res.end('hi, user
'); }); -
监听端口
// 监听3000端口 app.listen(3000); console.log('服务器已启动，监听3000端口，请访问 localhost:3000')
HTTP协议
HTTP协议概念
超文本传输协议（英文：HyperText Transfer Protocol，缩写：HTTP）规定了如何从网站服务器传输超文本到本地浏览器，它基于客户端服务器架构工作，是客户端（用户）和服务器端（网站）请求和应答的标准。
报文
在HTTP请求和响应的过程中传递的数据块就叫报文，包括要传送的数据和一些附加信息，并且要遵守规定好的格式。
请求报文
请求方式 （Request Method）
- GET 请求数据
- POST 发送数据
请求地址 （Request URL）
app.on('request', (req, res) => {
req.headers // 获取请求报文
req.url // 获取请求地址
req.method // 获取请求方法
});
响应报文
HTTP状态码
- 100 系列代表服务器在等待
- 200 请求成功
- 300 系列代表重定向 一般是304
- 400 系列代表找不到资源 一般是404
- 500 系列服务器端错误，505
内容类型
text/html ： HTML格式
text/plain ：纯文本格式
text/xml ： XML格式
image/gif ：gif图片格式
image/jpeg ：jpg图片格式
image/png：png图片格式
以application开头的媒体格式类型：
application/xhtml+xml ：XHTML格式
application/xml ： XML数据格式
application/atom+xml ：Atom XML聚合格式
application/json ： JSON数据格式
application/pdf ：pdf格式
application/msword ： Word文档格式
application/octet-stream ： 二进制流数据（如常见的文件下载）
application/x-www-form-urlencoded ： 中默认的encType，form表单数据被编码为key/value格式发送到服务器（表单默认的提交数据的格式）
另外一种常见的媒体格式是上传文件之时使用的：
multipart/form-data ： 需要在表单中进行文件上传时，就需要使用该格式
app.on('request', (req, res) => {
// 设置响应报文
res.writeHead(200, {
'Content-Type': 'text/html;charset=utf8‘
});
});
HTTP请求与响应处理
请求参数(★★★)
客户端向服务器端发送请求时，有时需要携带一些客户信息，客户信息需要通过请求参数的形式传递到服务器端，比如登录操作。
GET请求参数
- 参数被放置在浏览器地址栏中，例如：http://localhost:3000/?name=zhangsan&age=20
- 安全性较低，大小有限制
- 参数获取需要借助系统模块url，url模块用来处理url地址
const http = require('http');
// 导入url系统模块 用于处理url地址
const url = require('url');
const app = http.createServer();
app.on('request', (req, res) => {
// 将url路径的各个部分解析出来并返回对象
// true 代表将参数解析为对象格式
let {query} = url.parse(req.url, true);
console.log(query);
});
app.listen(3000);
POST请求参数
- 参数被放置在请求体中进行传输
- 安全性高，大小没有限制
- 通过字节流的方式传递，每次传一部分所以获取POST参数需要使用data事件和end事件
- 请求头信息多了content-Type类型，content-length长度
- 使用querystring系统模块将参数转换为对象格式
// 导入系统模块querystring 用于将HTTP参数转换为对象格式
const querystring = require('querystring');
app.on('request', (req, res) => {
let postData = '';
// 监听参数传输事件
req.on('data', (chunk) => postData += chunk;);
// 监听参数传输完毕事件
req.on('end', () => {
console.log(querystring.parse(postData));
});
});
app.listen(3000);
路由(★★★)
http://localhost:3000/index
http://localhost:3000/login
路由是获取客户端请求地址，在服务器端request事件中做相应的判断。简单的说，就是请求什么响应什么。
核心代码
// 当客户端发来请求的时候
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('抱歉, 您访问的页面出游了');
}
});
示例demo
-
引入系统模块http
//服务器模块 const http = require('http'); //操作url的模块 const url = require('url'); -
创建网站服务器
const app = http.createServer(); -
为网站服务器对象添加请求事件，添加监听端口
app.on('request', (req, res) => { ... } app.listen(3000); -
实现路由功能
- 获取客户端的请求方式
- 获取客户端的请求地址
// 获取请求方式 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') { }
静态资源
服务器端不需要处理，可以直接响应给客户端的资源就是静态资源，例如CSS、JavaScript、image文件。
1.获取url地址
2.通过path拼接文件的绝对路径
3.通过fs.readFile读取文件内容
4.将内容响应给客户端
动态资源
相同的请求地址根据不同的参数响应相应的资源，这种资源就是动态资源
客户端请求途径
GET方式
- 浏览器地址栏
- link标签的href属性
- script标签的src属性
- img标签的src属性
- Form表单提交
POST方式
- Form表单提交
Node.js异步编程
同步API和异步API
**同步API：**只有当前API执行完成后，才能继续执行下一个API
console.log('before');
console.log('after');
**异步API：**当前API的执行不会阻塞后续代码的执行
console.log('before');
setTimeout(
() => { console.log('last');
}, 2000);
console.log('after');
区别
- 返回值不同，同步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 ();
-
代码执行顺序，
- 同步API从上到下依次执行，前面代码会阻塞后面代码的执行
for (var i = 0; i < 100000; i++) { console.log(i); } console.log('for循环后面的代码');- 异步API不会等待API执行完成后再向下执行代码
console.log('代码开始执行'); setTimeout(() => { console.log('2秒后执行的代码')}, 2000); setTimeout(() => { console.log('"0秒"后执行的代码')}, 0); console.log('代码结束执行');
Node.js中的Promise
Promise出现的目的是解决Node.js异步编程中回调地狱的问题
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); // 失败了)
异步函数(★★★)
异步函数是异步编程语法的终极解决方案，它可以让我们将异步代码写成同步的形式，让代码不再有回调函数嵌套，使代码变得清晰明了。
async关键字
const fn = async () => {};
async function fn () {}
- 普通函数定义前加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();