Node.js之创建web服务器和HTTP请求与响应处理

古城微笑少年丶 2023-02-16 15:30 240阅读 0赞

### Node.js之创建web服务器和HTTP请求与响应处理 ###

*  Node.js之创建web服务器和HTTP请求与响应处理
 *   *  1 创建web服务器
     *   *  1.1 服务器端基础概念
         *  1.2 web服务器的创建
     *  2 HTTP请求与响应处理
     *   *  2.1 HTTP协议介绍
         *  2.2 GET与POST请求
         *  2.3 路由
         *  2.4 静态资源与动态资源
     *  3 Node.js异步编程
     *   *  3.1 同步API与异步API
         *  3.2 代码执行顺序分析
         *  3.3 Promise
         *  3.4 异步函数async关键字
         *  3.5 异步函数await关键字

# Node.js之创建web服务器和HTTP请求与响应处理 #

## 1 创建web服务器 ##

### 1.1 服务器端基础概念 ###

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70]  
在开发阶段，客户端和服务器端使用同一台电脑，即开发人员电脑。  
![在这里插入图片描述][20200610143128375.png]  
本机域名：localhost  
本地IP ：127.0.0.1

### 1.2 web服务器的创建 ###

// 引用系统模块
     const http = require('http');
      // 创建web服务器
     const app = http.createServer();
      // 当客户端发送请求的时候
     app.on('request', (req, res) => { 
            // 响应
           res.end('<h1>hi, user</h1>');
     });
      // 监听3000端口
     app.listen(3000);
     console.log('服务器已启动，监听3000端口，请访问 localhost:3000')

## 2 HTTP请求与响应处理 ##

### 2.1 HTTP协议介绍 ###

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

**1.请求方式：**

*  GET 请求数据
 *  POST 发送数据

**2.请求地址：**

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

**3.响应报文：**

app.on('request', (req, res) => { 
         // 设置响应报文
         res.writeHead(200, {   'Content-Type': 'text/html;charset=utf8‘
         });
     });

其中HTTP状态码常见的有如下：

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

内容类型如下：

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

### 2.2 GET与POST请求 ###

**1.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);

**2.POST请求**  
参数被放置在请求体中进行传输；  
获取POST参数需要使用data事件和end事件；  
使用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)); 
         }); 
     });

### 2.3 路由 ###

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

// 1.引入系统模块http
    // 2.创建网站服务器
    // 3.为网站服务器对象添加请求事件
    // 4.实现路由功能
    // 1.获取客户端的请求方式
    // 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('服务器启动成功')

### 2.4 静态资源与动态资源 ###

服务器端不需要处理，可以直接响应给客户端的资源就是静态资源，例如CSS、JavaScript、image文件。  
如：http://www.itcast.cn/images/logo.png

相同的请求地址不同的响应资源，这种资源就是动态资源。  
如：http://www.itcast.cn/article?id=1  
http://www.itcast.cn/article?id=2

## 3 Node.js异步编程 ##

### 3.1 同步API与异步API ###

同步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('代码结束执行');

### 3.2 代码执行顺序分析 ###

代码如下：

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

分析如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70 2]

### 3.3 Promise ###

Promise出现的目的是解决Node.js异步编程中回调地狱的问题。

### 3.4 异步函数async关键字 ###

1.  普通函数定义前加async关键字普通函数变成异步函数；
2.  异步函数默认返回promise对象；
3.  在异步函数内部使用return关键字进行结果返回结果会被包裹的promise对象中 return关键字代替了resolve方法；
4.  在异步函数内部使用throw关键字抛出程序异常；
5.  调用异步函数再链式调用then方法获取异步函数执行结果；
6.  调用异步函数再链式调用catch方法获取异步函数执行的错误信息。

### 3.5 异步函数await关键字 ###

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200610143347768.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx,size_16,color_FFFFFF,t_70
[20200610143128375.png]: https://img-blog.csdnimg.cn/20200610143128375.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200610145652630.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200610151259579.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx,size_16,color_FFFFFF,t_70