前端系列--前后端交互(2)

1、服务端基础

网站主要由两部分组成：客户端和服务器端；


几个小概念：
1、ip地址：Internet Protocol Address，其是互联网中设备的唯一标识码，代表互联网协议地址；访问网站服务器本质上是通过ip地址进行的；
2、域名：由于ip地址难以记忆，故平时访问是通过域名去实现的；虽然在地址栏中输入的是网址，但是其会转为ip地址后再进行访问；
3、端口：计算机与外界交流通信的出口，用来区分服务器电脑中提供的不同服务；即我们通过上面两个概念可以访问到相应的服务器电脑，但是需要不同的服务则需通过不同的端口号以区别；平时输入时端口大多被省略了，浏览器会为我们补上；
4、URL：统一资源定位符Uniform Resource Locator，是专门为标识Internet网上资源位置而设置的一种编址方式，即平常所说的网页地址；注意上面的几部分是URL的组成部分

其中http是超文本（超级文本，除了文字外还可包括图片、视频、音频的类型内容…）传输协议，其提供了一种发布和接收html页面的方法；即其规定了客户端服务端之间应如何进行沟通；

整个服务端其实可以理解成一台电脑，在开发学习阶段我们可以客户端和服务端使用同一台电脑；

2、创建web服务器

.on代表监听request请求，第一个形参时请求对象req存储了请求相关的信息地址ip等等，第二个形参响应对象，要使用该对象的相关方法（如end表示结束请求，里面写的是响应的内容）对形参发来的请求作出响应；
此时再浏览器中输入地址即可访问：

3、HTTP协议

3.1http协议概念

3.2报文

通过浏览器中f12然后切换至networks选项可以查看报文详细内容：

其中有请求报文和响应报文：
1、请求报文，先介绍回调函数的形参req：
有get和post两种请求方式（如平时直接在地址栏中输入地址访问则是get方式，一些表单则用的是post方式，如下：

），在服务端函数中可以通过req得到具体：

并且可以根据其是不同方式而作出不同响应：

此外我们可以进一步获取headers（报文）中某一项的内容：

还可根据请求中的请求地址不同从而返回不同的内容：

也可多个地址返回同一内容，不同地址间通过||区分，当没有输入地址时获取到的则是/

2、响应报文：
和请求报文一样，返回的响应报文是通过res来完成的

200表示http状态码，常见状态码如下：
content-type是返回的内容类型，常见如下：

一般还需要加上执行编码类型，否则浏览器可能会解码出错：

3.2http请求与响应处理

在客户端向服务端发送请求时，通常需要携带一些信息通过请求参数的形式传递到服务器端，其中分为get请求参数、post请求参数：

1、get请求参数：
问号作为参数的开始，参数之间以&进行连接；


2、post请求参数：

由于post参数可以很大，所以要分多次进行接收，下面就是通过不断拼接返回的结果获取请求参数，传递结束后再于下面的end中将其转换成对象格式

两种方式总结：

3.3路由相关

路由是指客户端请求地址与服务端程序代码的对应关系，即判断请求的地址将其返回；

3.4静态资源与动态资源

1、静态资源：

通过判断传来的地址将相应的资源返回，下面先获取了请求地址pathname，然后通过拼接组成了服务端本地的地址，从该地址中取出文件返回；其中__dirname指向了node当前所运行的js文件的绝对路径；

上面的content-type在不同类型文件时应该填不同值，不能填死数据，可以通过以下数据获取：

将该值给content-type即可；

2、动态资源：

如下，地址一样但是通过参数不一样从而返回不同的资源：

4、node.js的异步编程

4.1同步api与异步api

1、同步api：只有当前api执行完成后才能执行下一个api，如下：

2、异步api：当前api的执行不会阻塞后面代码的执行，如下：

注意同步api中可以通过返回值拿到api执行结果；而异步api则不能，如下函数是不能得到正确结果的，其会输出undefined：

其必须通过异步函数才能获得；

4.2获取异步api的返回值

1、通过回调函数获取：调用getMsg函数时形参传入了个函数，getMsg函数异步api中调用该函数并给形参msg，则最后会输出msg的内容；即通过回调函数输出异步api定时器的返回结果；

2、通过promise，详细见下面章节；

4.3异步api执行顺序

我们已经知道同步api是只有等上一个api执行完后才能继续下面的代码，下面详细说明异步api的执行顺序：

先执行到第一句console语句，会将该语句放入同步代码执行区，而到第二个定时器的异步api时，会把其放入异步代码执行区中并将其回调函数放入回调函数队列中，第三个定时器也一样，最后的console语句放入同步执行区中；等待同步区中的所有代码执行完后，到异步区区执行代码，打开两个定时器，定时器到时后取其相应的回调函数到同步代码执行区中执行；

而在node.js中的异步api，如读取文件的便是异步api，当我们需要依次读取a、b、c三个文件时由于是异步api无法直接判断顺序，如果在每个的回调函数中再嵌入下一个读取则会出现回调地狱（回调函数嵌套层数过多难以维护）的问题；

利用promise可以解决回调地狱问题，见下面代码：

其实质是在异步api（定时器）的外部包裹一层，当异步api有返回结果时，promise有两个方法成功就通过resolve把结果传出，若失败则用reject把信息传出去；
而在外面则通过then以及catch来接收结果（注意其书写遵循连式法则）；

而要实现依次打开三个文件的效果，则可以定义三个promise，在每个中执行打开文件的异步操作，但为了防止promise直接执行，每个promise的创建都用一个函数包裹起来（为了在后面通过调用函数才执行打开文件操作），并把new的promise对象return回来：

然后通过

p1()返回的是promise对象，调用其then方法则会是在打开a文件后调用then中的函数，然后把p2()返回（即p2中的promise对象返回），通过链式法则再去调用其then函数；依次再返回p3(),然后then；

上面的promise虽然可以解决回调地狱的问题，但是其使用起来还是比较繁琐的；这时再介绍异步函数的概念：异步函数是异步编程语法的终极解决方案，让代码不再有回调函数嵌套，使代码简单明了，异步函数是在函数的前面加一个async，如下：


2、异步函数返回案例如下：

其返回是个promise对象，可以直接通过then方法进行接收（即异步函数的return相当于promise的resolve）：


由于其返回是promise对象，所以也可通过catch方法获取错误信息，但是在函数中返回错误信息时通过throw进行的，如下：

要利用异步函数完成依次打开文件的异步操作，还需要介绍最后一个await关键字：

如下代码，由于await后面只能是promise对象而异步函数又返回promise对象，所以run函数中在await后面紧跟着p1()等等…直到异步函数p1()有返回结果后才会执行下面的p2；


针对以上四项，我们只需让打开文件时返回的是个promise对象即可以通过await实现依次打开文件的效果了：


此时通过readFile方法打开文件返回的则是promise对象了：

执行run函数后可以依次打开三个文件；