nodejs系列:28.koa之koa-body中间件-上篇

121 阅读4分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第1天,点击查看活动详情

系列介绍

该系列主要是介绍一些nodejs相关的基础知识,没有什么特别难的知识点,都是一些比较基础知识点。大家学习起来,也会比较容易理解和接收。

这些知识点,也是以前自己学习nodejs的时候,学习过的知识点。有些知识点,可能是由于学习的时间比较久了,也有可能是平时工作中用到的机会比较少,也差不多快把它们都忘记掉了。现在把它们都写下来,写成文章,一方面是记录下自己以前学习的nodejs知识点,一方面也是复习巩固自己以前学习的nodejs知识点。不要学着学着,就把以前的知识点都忘光了。

环境安装

实现之前,你首先需要安装nodejs环境。因为我们写的代码需要在node环境上运行,如果你没有,那么文件会运行不了。

以下是nodejs的安装地址,如果你没有安装的话,可以先把它安装上。安装了可以忽略这一步,跳到下面一步。

nodejs安装

前言

在上一篇文章里nodejs系列:23.koa 中间件,介绍了koa里的中间件是什么。

在koa框架里,中间件的本质是一个回调函数,参数包含请求对象、响应对象和执行下一个中间件的函数

中间件是什么已经介绍了,那么在接下来的几篇文章里,会介绍一下koa里常用到的一些中间件。

本篇文章,就介绍一下koa常用中间件:koa-body中间件

koa-body

url模块的介绍和使用这篇文章里,我们介绍了使用node的内置模块-url模块来解析get请求的请求参数。

而在node的querystring模块里文章里,我们又介绍了使用node的内置模块querystring来解析post请求的请求参数。不过要想拿到post请求的参数,还需要监听request对象的data事件和end事件。然后才能拿到post请求的请求参数。

我们想要拿到网络请求的请求参数,每次都要使用url模块或者监听request对象的data事件和end事件吗?

如果每次都这么操作获取的话,那就会比较麻烦。所以,我们就可以使用koa-body中间件来解决这个问题。

koa-body中间件,可以解析网络请求里的请求参数。使用了该中间件,我们就不用每次都使用url模块或者监听request对象的data事件和end事件来获取请求参数了。

使用

创建index.html页面

创建一个index.html页面,并写上里面的html结构

<button id="get">发送get请求</button>
<button id="post">发送post请求</button>

主要是在body标签里添加两个button,一个用来发送get请求,一个用来发送post请求。

封装ajax请求方法
​
function ajax(method, url, data = "") {
                let xhr = new XMLHttpRequest()
                xhr.open(method, url)
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4) {
                        console.log(xhr.responseText)
                    }
                }
                xhr.send(data)
            }

创建一个XMLHttpRequest实例对象,利用该实例对象,来发送ajax请求。把这个过程封装成一个函数,方便后面调用来发送ajax请求。

获取button的dom对象
​
let getBtn = document.querySelector("#get")
let postBtn = document.querySelector("#post")

获取两个button的dom对象

监听点击事件
​
getBtn.addEventListener("click", () => {
                ajax("get", "http://localhost:3000/index?id=1&type=user")
            })
postBtn.addEventListener("click", () => {
                ajax("post", "http://localhost:3000", "name=alin&age=18&sex=男")
            })

分别给两个button的dom对象监听点击事件,发送ajax请求,并设置对应的请求参数。

小结

本篇文章主要介绍了koa-body中间件,以及该中间件的作用。

同时,创建了一个html页面,把发送ajax请求的逻辑写好。

在下一篇文章里,我们将要使用到这个html页面来发送ajax请求,所以先把html页面创建好。

最后,放上自己比较喜欢的一句诗句:

千淘万漉虽辛苦,吹尽狂沙始到金 - 唐 刘禹锡《浪淘沙》