當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

node 创建静态web服务器（下）（处理异步获取数据的两种方式）

發布時間：2025/3/20 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 node 创建静态web服务器（下）（处理异步获取数据的两种方式）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

接上一章。

上一章我們說創建的靜態web服務器只能識別html，css，js文件，功能較為單一，且圖片格式為text/html，這是不合理的。

本章，我們將解決該問題。

這里，我們先準備好一個json文件

該文件包含絕大多數文件格式。

一、同步讀取文件

我們將上一章中創建的model文件下的getMime.js內容替換掉，這里，我們采用文件讀取的方式，代碼如下：

const getMime = (fs, extName) => { // 注意，這里 fs 模塊要從對應文件中傳過來let data = fs.readFileSync('./mime.json'); // 同步讀取文件let Mimes = JSON.parse(data.toString()); // 將讀取到的文件轉為字符串，再轉為json格式return Mimes[extName] || 'text/html'; // 返回對應文件格式，如果沒有，則返回 text/html 格式 }module.exports = {getMime }

這樣是可以實現我們想要的效果的，對應的文件有對應的格式，但，這節的重點不在這里，為什么我們不采用異步的方式調用呢？而采用readFileSync 這種同步的讀取方式？

二、回調函數處理異步獲取數據

下面，我們來看一段代碼：

const fs = require('fs');console.log('1');fs.readFile('./mime.json', (err, data) => {if (err) {console.log(404);return false;} else {console.log('2');return data;} });console.log('3');

這是一段異步讀取文件的代碼，我們來看看執行結果

如果是同步執行，則順序應為 1? 2? 3 ，但node采用的是非阻塞式 i/o，事件驅動的方式，宏觀上實現了并行，而實際上，node 僅僅只使用一個線程

所以，如果我們采用異步的方式讀取json文件，實際上是拿不到數據的，會返回 undefined。這就是為什么采用 readFileSync 同步讀取的原因。

那么，如果，我們使用異步的方式讀取，怎么才能讀取到呢，這時，就需要使用回調的方式來處理異步。

代碼如下：

這樣，就算是異步的讀取，我們也可以通過回調的方式獲取到數據。

對于我們創建的靜態web服務器來說，實現代碼如下： 注意：粉色區域是實現的重點

// 這是 model 下的 getMime.js 文件
const getMime = (fs,extname,callback)=>{fs.readFile('./mime.json',(err,data)=>{if(err){console.log('mime.json文件不存在');return false;}else{let Mimes = JSON.parse(data.toString());let result = Mimes[extname] || 'text/html';callback(result);}}) }module.exports = {getMime } const http = require('http'); const fs = require('fs'); const path = require('path'); const url = require('url'); const mimeModel = require('./model/getMime');let server = http.createServer((req, res) => {let pathName = url.parse(req.url).pathname;if (pathName == '/') {pathName = '/index.html';}let extName = path.extname(pathName);if (pathName != '/favicon.ico') {fs.readFile('static/' + pathName, (err, data) => {if (err) {fs.readFile('static/404.html', (err, data404) => {if (err) {console.log('404');} else {res.writeHead(404, {'Content-Type': 'text/html;charset=utf-8'});res.write(data404);res.end();}})} else { let mime = mimeModel.getMime(fs,extName,(mime)=>{res.writeHead(200, {'Content-Type': "" + mime + ";charset='utf-8'"});res.write(data);res.end();}) }})} })server.listen(3000);

三、events 模塊方法 EventEmitter() 處理異步

我們還可以通過node提供的 events 模塊來處理異步，達到同樣的效果

?來看下面這段代碼：

const events = require('events'); // 引入 events 模塊 let EventsEmitter = new events.EventEmitter(); // 實例化 EventEmitter 方法// 監聽接收 EventsEmitter.on('to_parent', (data) => {console.log('接收到了數據');console.log(data); })// 觸發傳遞 setTimeout(() => {console.log('開始廣播...');EventsEmitter.emit('to_parent', '發送的數據'); }, 1000)

這里與vue中的事件中心是一樣的，emit 方法廣播，on 方法接收廣播，注意，觸發的事件名需一致

1s 后?

?好了，基礎知識準備好了，下面，我們來用這種方式實現我們的靜態web服務器

關于?

Node.js EventEmitter 的具體內容，請參考：http://www.runoob.com/nodejs/nodejs-event.html

注意：這里如果這樣寫會報錯

mimeModel.getMime(fs, extName, EventEmitter); EventEmitter.on('to_mime', (mimes) => { // 監聽，接收傳遞過來的數據　　res.writeHead(200, {'Content-Type': "" + mimes + ";charset='utf-8'"});
　　res.write(data); 　　　
　　res.end();

});

網上有一種解釋是：沒有等回調完成就發送請求。

我覺得是有一定道理的，如果我們這樣寫，就不會有這個問題：

mimeModel.getMime(fs, extName, EventEmitter);EventEmitter.on('to_mime', (mimes) => {res.writeHead(200, {'Content-Type': "" + mimes + ";charset='utf-8'"})});res.write(data);res.end();

具體原因，因為筆者本身水平有限，這里并不能給大家準確的答案，如果，大家有較為標準的答案，請在下方評論留言。

轉載于:https://www.cnblogs.com/Sky-Ice/p/9390870.html

總結

以上是生活随笔為你收集整理的node 创建静态web服务器（下）（处理异步获取数据的两种方式）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： vue之slot用法
下一篇： websocket与ajax的区别浅析