Node.js - 接收和发送 GET POST 请求

本文整理总结使用 Node.js 接收和发送 GET 请求、POST 请求的核心代码实现。

环境准备：node@16.17.0 npm@8.19.1 axios@0.27.2

1 服务端接收请求

客户端发送数据请求的时候，常见的方式是 GET 和 POST 请求，无论是发送 GET 还是 POST，其数据都在请求内容对象 request 中。

1.1 接收 GET 请求

GET 数据发送的时候都是在 request.url 中的，request 表示请求的内容对象，里面包括了很多请求相关的信息。

url 是 node 自带的一个模块，可以使用 url 模块中的 parse 方法将整个 url 解析成一个对象，其中 query 属性对应的就是我们要的 GET 数据，第二个参数传 true 会自动解析为 json 形式。

parse 将字符串转成对象, req.url=”/?url=123&name=321”，true 表示 params 是 {url:”123”, name:”321”}，false 表示 params 是 url=123&name=321。

var http = require('http');
var url = require('url');

// req 请求信息，res 返回信息
http.createServer(function(req, res) {
    res.writeHeader(200, {
        'Content-Type': 'text/javascript;charset=UTF-8'
    }); // 状态码 + 响应头属性

    // 解析 url 参数
    var params = url.parse(req.url, true).query;
    res.write("网站名：" + params.name);
    res.write("\n");
    res.write("网站 URL：" + params.url);
    res.end();
}).listen(3000);

1.2 接收 POST 请求

与 GET 数据相比，POST 数据量大，需要分段。通过 req.on('data', function(data) {}) 监听，当有一段数据到达的时候执行回调，回调函数参数 data 为每段达到的数据。

当数据全部到达时会触发 req.on('end', function() {}) 里面的回调函数。可以通过 querystring.parse(str) 解析成我们想要的 POST 请求数据格式。

var http = require('http');
var querystring = require('querystring');

http.createServer(function(req, res) {
    var str = '';
    var i = 0;
    req.on('data', function(data) {
        console.log(`第${++i}次收到数据`);
        str += data;
    }); // 当有一段数据到达的时候
    req.on('end', function() {
        var POST = querystring.parse(str);
        console.log(POST);
    }); // 数据全部到达
}).listen(8080);

1.3 读取接收文件

通过 fs 模块完成文件的读取，函数 readFile(filename， callback) 用于读取文件，读取结束执行回调。

针对三种请求：请求文件或者 get 请求或者 post 请求，搭建一个较完整的服务器雏形。

// 引入相应模块
const http = require('http'); // http协议相关
const fs = require('fs'); // 文件系统相关
const querystring = require('querystring'); // 查询字符串相关
const urlLib = require('url'); // 处理url相关

var server = http.createServer(function(req, res) {
    // GET
    var obj = urlLib.parse(req.url, true);
    var url = obj.pathname;
    const GET = obj.query;

    // POST
    var str = '';
    var POST = '';
    req.on('data', function(data) {
        str += data;
    });
    req.on('end', function() {
        POST = querystring.parse(str);
    });
    // console.log(url, GET, POST)

    // 文件请求
    var file_name = './www' + url;
    fs.readFile(file_name, function(err, data) {
        if (err) {
            res.write("404");
        } else {
            res.write(data);
        }
        res.end();
    });
});
server.listen(8080); // 定义监听端口

2 客户端发送请求

2.1 发送 GET 请求

var http = require('http'); 
var qs = require('querystring'); 

var data = { 
    a: 123, 
    time: new Date().getTime()}; // 这是需要提交的数据 
var content = qs.stringify(data); 

var options = { 
    hostname: '127.0.0.1', 
    port: 10086, 
    path: '/pay/pay_callback?' + content, 
    method: 'GET' 
}; 

var req = http.request(options, function (res) { 
    console.log('STATUS: ' + res.statusCode); 
    console.log('HEADERS: ' + JSON.stringify(res.headers)); 
    res.setEncoding('utf8'); 
    res.on('data', function (chunk) { 
        console.log('BODY: ' + chunk); 
    }); 
}); 

req.on('error', function (e) { 
    console.log('problem with request: ' + e.message); 
}); 
req.end();

2.2 发送 POST 请求

var http = require('http');
var querystring = require('querystring');

var contents = querystring.stringify({
    name: 'lpxz',
    email: 'lpxz@163.com',
    address: 'Xi\'an'
});

var options = {
    host: 'www.lpxz.work',
    path: '/application/node/post.php',
    method: 'POST',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'Content-Length': contents.length
    }
}

var req = http.request(options, function(res) {
    res.setEncoding('utf8');
    res.on('data', function(data) {
        console.log("data: ", data); // 一段 html 代码
    });
});

req.write(contents);
req.end;

3 使用 Axios 收发网络请求

Axios 是一个基于 promise 的网络请求库，Axios 使用简单,包尺寸小且提供了易于扩展的接口。

axios 特性:

• 从浏览器创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF

安装插件：

npm i axios -g

1、配置 axios

// request.js
import axios from 'axios'
import { Message, Loading } from 'element-ui' // 可以使用其他的 UI 可视化请求响应

const ConfigBaseURL = 'https://localhost:3000/' // 默认路径
let loadingInstance = null

// 使用 create 方法创建 axios 实例
export const request = axios.create({
    timeout: 7000, // 请求超时时间
    baseURL: ConfigBaseURL,
    method: 'post',
    headers: {
        'Content-Type': 'application/json;charset=UTF-8'
    }
})

// 添加请求拦截器
request.interceptors.request.use(config => {
    loadingInstance = Loading.service({
        lock: true,
        text: 'loading...'
    })
    return config
})

// 添加响应拦截器
request.interceptors.response.use(response => {
    loadingInstance.close()
    // console.log(response)
    return response.data
}, error => {
    console.log('TCL: error', error)
    const msg = error.Message !== undefined ? error.Message : ''
    Message({
        message: '网络错误' + msg,
        type: 'error',
        duration: 3 * 1000
    })
    loadingInstance.close()
    return Promise.reject(error)
})

2、封装请求

import request from '@/utils/request'

export function login(data) {
    return request({
        url: '/api/auth/login',
        method: 'post',
        data
    })
}

export function getInfo() {
    return request({
        url: '/api/auth/my',
        method: 'get'
    })
}

export function getAllUser() {
    return request({
        url: '/api/user/all',
        method: 'get'
    })
}

3、调用

import { getInfo } from '@/api/request.js'

getInfo().then((res) => {
    console.log(res.data);
})