学习使用Node-HTTP模块

前言

🫥做前端的时候我们经常会学习写自己的项目，但是如果我们仅仅写纯前端的内容，我们很多功能往往是比较受限制的，这个时候我们通常会期望自己去开发一个服务器，我们可能就会想去学习服务器的技术，在编程的世界中编程语言是多种多样的，常见的服务端技术有Java，Python，Golang等等，但是这些内容单独拿出来就有很多相关的内容，来一个灵魂级别的拷问，前端写好了吗？所以当我们前端出身的程序员更好的选择就是Node，这样不仅能够促进对JavaScript更深的理解还能学习掌握后端相关的内容，并且Node的性能也是比较高的特别在I/O方面，并且在CPU密集型的任务目前也有对应的解决方案。

一.HTTP模块的基本使用

😣首先我们来创建一个服务器，在Node中创建服务器我们通常会使用createServer来进行创建。

js 复制代码

const http = require("http")
const HTTP_PORT = 8000
const server = http.createServer((req, res) => {
  res.end("Hello World")
})
server.listen(HTTP_PORT, () => {
  console.log(`🚀服务器在${HTTP_PORT}启动`)
})

🫥还有另外一种方式是直接使用Server类进行初始化，其实createServer底层就是通过这种方式进行的

js 复制代码

function createServer(opts,requestListener){
  return new Server(opts,requestListener)
}

二.request对象解析

🥱在进行request对象的解析之前我们可以使用apifox来尝试进行接口的请求，然后在Node中获取响应的数据来学习它，再次之前我们首先安装一个工具nodemon为什么要使用这个工具，主要因为在Node中我们每次修改内容如果想立马看到内容的结果需要重新启动来查看结果，这样就会非常的麻烦，而nodemon就是一个热更新的工具能够帮助我们热更新，我们就能够在修改完代码立即看到结果。

npm install nodemon -g

接下来我们直接创建一个服务器然后打印出来对应的属性值，我们通过这属性就可以拿到客户端的请求中的各种信息来响应不同的内容，我们前端开发过程中，免不了需要调用接口这个操作，那么什么是接口哪？

js 复制代码

const http = require("http")
const server = http.createServer((req, res) => {
  // 获取req的参数
  console.log("URL", req.url) // 请求的url
  console.log("methods", req.method) // 请求的方法
  console.log("Head", req.headers['header-name']) // 请求头部信息
  console.log(req.httpVersion) // 请求使用的http协议类型
  console.log(req)
  res.end("Hello-World!!!")
})
server.listen(8000, () => {
  console.log("服务启动在8000端口")
})

💡什么是接口？

🤡我们常见的接口的内容如http://yourdomin/api这样的格式，其实这个就是一个请求路径，跟我们在apifox或者postman发出的请求是一个东西，然后我们就会在request中拿到这些参数，根据前端传递过来的不同的参数属性，判断返回什么内容，从而实现不同的功能，而一版情况下我们在服务端会告诉前端"这个功能你需要给我传什么xxxx内容"其实就是一个协商固定的过程，这个经过限定的请求就是服务端给前端获取数据开的一个口子，也就是所谓的接口，他的具体流程如下

既然我们理解了什么是接口，那么我们就基于Node的http模块和request的属性来写一个简单的用来获取用户信息的接口。

js 复制代码

const http = require("http")
const server = http.createServer((req, res) => {
  if (req.method === 'GET' && req.url === '/api/user') {
    res.setHeader("Content-type", "application/json")
    const user = [
      { id: 1, name: "Alice" },
      { id: 2, name: "Bob" },
      { id: 3, name: "Cede" },
    ]
    res.end(JSON.stringify(user))
  } else {
    res.statusCode = 404
    res.end("not found")
  }
})

server.listen(8000, () => {
  console.log("程序运行在8000端口")
})

然后我们通过apifox；输入地址栏中localhost:8000/api/user来请求一下发现可以拿到对应的数据，当然我们给客户端返回的数据是自己定义的数据，在实际的开发过程中这些数据一版来自于数据库中。

然后我们再输入一些不符合规范的内容看下返回的结果，就是我们在服务端处理的当没有匹配到就返回没有找到。

三.response属性解析

🫥在HTTP协议中，有请求当然也应该有返回，其实在上面我们写的接口demo中我们已经看给前端返回的内容了，没错向客户端返回数据使用的就是response，response比request要简单很多，下面我们就先来看下response有哪些常用属性可以使用。

res.end()：向客户端响应内容，并且会关闭数据流
res.write():向客户端相应数据，但是不会关闭数据流
res.setHeaer(key,value):设置头部字段
res.getHeader(key):获取头部字段
res.setTimeout(ms,callback):设置超时时间
res.statusCode:设置Http状态码
res.statusMessage:设置状态数据

js 复制代码

const http = require("http")
const server = http.createServer((req, res) => {
  if (req.url === '/api/user' && req.method === 'GET') {
    const user = [
      { id: 1, name: 'Alice' },
      { id: 2, name: 'Bob' },
      { id: 3, name: 'Wuhu' }
    ]
    // 测试res的属性
    res.setHeader('Content-Type', 'json') // 设置头部字段
    console.log(res.getHeader('Content-Type')) // 获取对应的字段内容
    res.write("向客户端写入内容") // 向客户端写入内容
    res.setTimeout(1000, () => {
      console.log("超时时间")
    })
    res.end(JSON.stringify(user))
  } else {
    res.statusCode = '404' // 设置Http状态码
    res.statusMessage = "数据没有找到" // 设置状态信息
  }
})
server.listen(8000, () => {
  console.log("服务启动在8000端口")
})

四.在Node中请求接口

🤗我们平时在进行接口请求的时候都是在前端通过浏览器，然后我们使用AJAX或者通过Fetch来进行接口的请求，那么在服务端如果我们需要在当前服务中发送接口我们一般会使用http模块提供的功能去进行接口的请求，并且我们在前端中经常使用的axios请求库（基于AJAX）在Node中也是可以使用的，在Node中请求方式会切换成HTTP模块的方式，axios做了兼容，那既然知道了在Node中请求接口的方式，就让我们来尝试着写一下。

首先，我们先搭建起来一个简单的后台服务，依然使用HTTP模块来搭建，创建一个简单的接口

js 复制代码

const http = require("http")
const server = http.createServer((req, res) => {
  if (req.url === '/getList' && req.method === 'GET') {
    const list = [
      { id: 1, name: "张三", age: 12 },
      { id: 2, name: "李四", age: 13 }
    ]
    res.end(JSON.stringify(list))
  }
})
server.listen(8000, () => {
  console.log("server 开启在8000端口")
})

接下来我们先使用apifox来测试下是否是可以访问的，使用localhost:8000/getList发送请求。

可以看到数据的正常返回，接下来我们将请求方式更换成在Node中进行请求，切记这个时候我们就不是很需要搭建服务了，我们可以直接进行请求，方式如下：

js 复制代码

const http = require("http")

// 定义数据
const option = {
  hostname: 'localhost',
  path: '/getList',
  method: 'GET',
  port: 8000
}
http.get(option, (res) => {
  let data = ''
  res.on('data', (chunk) => {
    data += chunk
  })

  res.on('end', () => {
    console.log(data)
  })
})

我们可以看到请求成功了。

🫥接下来我们再尝试下POST的接口请求方式，我们首先把我们简易的接口更改成POST接口，然后在Node中发起POST请求，需要注意的是在Node中只有get请求可以直接通过http.get来使用，其他方式需要http.request的方式来进行请求。

js 复制代码

const http = require('http')

const options = {
  hostname: 'localhost',
  path: '/getList',
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  port: 8000
}

const req = http.request(options, (res) => {
  let data = ''

  res.on('data', (chunk) => {
    data += chunk
  })

  res.on('end', () => {
    console.log(data)
  })
})

req.on('error', (error) => {
  console.error(error)
})

const postData = JSON.stringify({ key: 'value' })

req.write(postData)
req.end()

五.总结

🤡以上就是HTTP模块的基本使用了，HTTP模块能够帮助我们快速的搭建起来一个后端服务，我们在真实开发中可能并不会直接使用HTTP进行开发，但是我们使用的express koa框架都是基于HTTP模块来开发的，所以HTTP模块的使用能够让我们更加了解后端这个黑盒子，同时为服务端开发打下坚实的基础。