后端开发技术文章列表

详细介绍nodejs中的http模块综合案例

后端
nodejs, javascript
10799 阅读

<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 0px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">Node.js中的http模块是一个内置模块，用于创建HTTP服务器和客户端。下面是一个综合案例，演示如何使用http模块创建一个简单的Web服务器，并响应不同的URL请求不同的HTML内容。<pre style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin-top: 14px; margin-bottom: 0px; font-size: 15px; overflow: auto; border-radius: 6px; color: rgb(5, 7, 59);"><code class="language-javascript" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px; font-size: 1em; tab-size: 4;"><table class="hljs hljs-ln"><tbody style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;" class="firstRow"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">// 导入http模块  </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">var http = require('http');</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">// 创建HTTP服务器  </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">var server = http.createServer(function(req, res) {</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">// 获取请求的URL路径  </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">var urlPath = req.url;</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">// 根据不同的URL路径，返回不同的HTML内容  </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">if (urlPath === '/') {</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">res.writeHead(200, {'Content-Type': 'text/html'});</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">res.end('<h1>Hello, World!</h1>');</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">} else if (urlPath === '/about') {</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">res.writeHead(200, {'Content-Type': 'text/html'});</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">res.end('<h1>About Us</h1>');</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">} else {</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">res.writeHead(404, {'Content-Type': 'text/html'});</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">res.end('<h1>404 Not Found</h1>');</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">}</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">});</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">// 监听3000端口  </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">server.listen(3000, function() {</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">console.log('Server is running on port 3000');</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">});</td></tr></tbody></table></code></pre><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">在这个案例中，我们首先导入http模块，然后使用http.createServer()方法创建一个HTTP服务器。服务器在接收到客户端请求时，会根据请求的URL路径返回不同的HTML内容。在本例中，如果请求的URL为"/", 则返回"Hello, World!"；如果请求的URL为"/about"，则返回"About Us"；否则返回"404 Not Found"。在服务器响应客户端请求时，我们使用res.writeHead()方法设置响应头信息，然后使用res.end()方法结束响应。<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">最后，我们使用server.listen()方法指定服务器的监听端口，并在回调函数中打印服务器的监听状态。在本例中，我们使用3000端口作为服务器的监听端口。

详细介绍nodejs中的http模块

后端
nodejs, javascript
10782 阅读

<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 0px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">Node.js中的http模块是一个内置模块，用于创建HTTP服务器和客户端。它提供了一组方法和对象，可以方便地处理HTTP请求和响应。<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">以下是http模块的一些主要特性和用法：http.createServer()方法<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">http.createServer()方法用于创建一个新的HTTP服务器。它接受一个回调函数作为参数，该回调函数会在服务器接收到客户端请求时被调用。<pre style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin-top: 14px; margin-bottom: 0px; font-size: 15px; overflow: auto; border-radius: 6px; color: rgb(5, 7, 59);"><code class="language-javascript" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px; font-size: 1em; tab-size: 4;"><span class="code-lang" style="box-sizing: border-box; padding: 0px 0px 0px 14px; -webkit-font-smoothing: antialiased; list-style: none; font-family: PingFangSC-Semibold; margin: 0px; color: rgb(18, 6, 73); flex: 1 0 auto; font-size: 16px; font-weight: 600; letter-spacing: 0px; text-align: justify;">javascript<span class="code-copy" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: PingFangSC-Regular; margin: 0px; align-items: center; color: rgb(120, 134, 164); display: flex; font-size: 13px; letter-spacing: 0px; line-height: 14px; text-align: justify; user-select: none;"><span class="code-copy-text" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important; margin: 0px 20px 0px 7px;">复制代码<table class="hljs hljs-ln"><tbody style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;" class="firstRow"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">var http = require('http');</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">var server = http.createServer(function(req, res) {</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">// 处理请求  </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">});</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">server.listen(3000, function() {</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">console.log('Server is running on port 3000');</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">});</td></tr></tbody></table></code></pre>http.request()方法<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">http.request()方法用于创建一个新的HTTP客户端请求。它接受一个选项对象作为参数，该对象包含了请求的URL、请求方法、请求头等信息。可以使用回调函数指定请求完成后需要执行的回调函数。<pre style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin-top: 14px; margin-bottom: 0px; font-size: 15px; overflow: auto; border-radius: 6px; color: rgb(5, 7, 59);"><code class="language-javascript" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px; font-size: 1em; tab-size: 4;"><table class="hljs hljs-ln"><tbody style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;" class="firstRow"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">var http = require('http');</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">var options = {</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">hostname: 'www.example.com',</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">port: 80,</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">path: '/path/to/resource',</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">method: 'GET'  </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">};</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">var req = http.request(options, function(res) {</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">// 处理响应  </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">});</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">req.on('error', function(e) {</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">console.log('Request error: ' + e.message);</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">});</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">req.end(); // 结束请求</td></tr></tbody></table></code></pre>http.get()方法<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">http.get()方法是一个简化版的http.request()方法，用于发送一个GET请求。它接受一个选项对象作为参数，该对象包含了请求的URL和请求头等信息。可以使用回调函数指定请求完成后需要执行的回调函数。<pre style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin-top: 14px; margin-bottom: 0px; font-size: 15px; overflow: auto; border-radius: 6px; color: rgb(5, 7, 59);"><code class="language-javascript" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px; font-size: 1em; tab-size: 4;"><table class="hljs hljs-ln"><tbody style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;" class="firstRow"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">var http = require('http');</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">var options = {</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">hostname: 'www.example.com',</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">port: 80,</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">path: '/path/to/resource'  </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">};</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">var req = http.get(options, function(res) {</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">// 处理响应  </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">});</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">req.on('error', function(e) {</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">console.log('Request error: ' + e.message);</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">});</td></tr></tbody></table></code></pre>

详细介绍nodejs中的path模块

后端
nodejs, javascript
10789 阅读

<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 0px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">Node.js中的path模块是官方提供的用来处理路径的工具集。它提供了一系列的方法和属性，可以满足用户对路径的处理需求。以下是path模块的一些主要特性和用法：path.resolve()方法<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">path.resolve()方法可以将一个或多个路径片段拼接成一个规范的绝对路径。<pre style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin-top: 14px; margin-bottom: 0px; font-size: 15px; overflow: auto; border-radius: 6px; color: rgb(5, 7, 59);"><code class="language-javascript" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px; font-size: 1em; tab-size: 4;"><table class="hljs hljs-ln"><tbody style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;" class="firstRow"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">var path = require('path');</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">console.log(path.resolve('/foo/bar/baz', './asdf')); // /foo/bar/asdf</td></tr></tbody></table></code></pre>path.sep()方法<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">path.sep()方法返回操作系统所使用的路径分隔符。<pre style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin-top: 14px; margin-bottom: 0px; font-size: 15px; overflow: auto; border-radius: 6px; color: rgb(5, 7, 59);"><code class="language-javascript" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px; font-size: 1em; tab-size: 4;"><table class="hljs hljs-ln"><tbody style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;" class="firstRow"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">var path = require('path');</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">console.log(path.sep); // Windows: \; Unix/Linux: /</td></tr></tbody></table></code></pre>path.dirname()方法<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">path.dirname()方法返回路径所在的目录名。<pre style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin-top: 14px; margin-bottom: 0px; font-size: 15px; overflow: auto; border-radius: 6px; color: rgb(5, 7, 59);"><code class="language-javascript" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px; font-size: 1em; tab-size: 4;"><table class="hljs hljs-ln"><tbody style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;" class="firstRow"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">var path = require('path');</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">console.log(path.dirname('/foo/bar/baz/asdf/a.txt')); // /foo/bar/baz/asdf</td></tr></tbody></table></code></pre>path.basename()方法<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">path.basename()方法返回路径的最后一个部分，即文件名或目录名。<pre style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin-top: 14px; margin-bottom: 0px; font-size: 15px; overflow: auto; border-radius: 6px; color: rgb(5, 7, 59);"><code class="language-javascript" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px; font-size: 1em; tab-size: 4;"><table class="hljs hljs-ln"><tbody style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;" class="firstRow"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">var path = require('path');</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">console.log(path.basename('/foo/bar/baz/asdf/a.txt')); // a.txt</td></tr></tbody></table></code></pre>path.extname()方法<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">path.extname()方法返回路径的扩展名。<pre style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin-top: 14px; margin-bottom: 0px; font-size: 15px; overflow: auto; border-radius: 6px; color: rgb(5, 7, 59);"><code class="language-javascript" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px; font-size: 1em; tab-size: 4;"><table class="hljs hljs-ln"><tbody style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;" class="firstRow"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">var path = require('path');</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">console.log(path.extname('/foo/bar/baz/asdf/a.txt')); // .txt</td></tr></tbody></table></code></pre>path.join()方法<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">path.join()方法可以将多个路径片段拼接成一个完整的路径字符串。该方法可以避免使用操作系统的路径分隔符，更加便捷。例如：<pre style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin-top: 14px; margin-bottom: 0px; font-size: 15px; overflow: auto; border-radius: 6px; color: rgb(5, 7, 59);"><code class="language-javascript" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px; font-size: 1em; tab-size: 4;"><table class="hljs hljs-ln" style="width: 1341px;"><tbody style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;" class="firstRow"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">var path = require('path');</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">console.log(path.join(__dirname, 'files', '1.txt')); // [current directory]/files/1.txt on Unix/Linux/Mac (Unix-like OSes), [current directory]\files\1.txt on Windows</td></tr></tbody></table></code></pre>

详细介绍Node.js有哪些内置模块

后端
nodejs, javascript
14044 阅读

<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 0px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">Node.js有很多内置模块，其中一些重要的内置模块包括：<ol style="box-sizing: border-box; padding: 0px 0px 0px 32px; -webkit-font-smoothing: antialiased; list-style-position: outside; list-style-image: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 1em; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;" class=" list-paddingleft-2"><li><span style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important; margin: 0px; font-weight: 700;">HTTP模块：该模块用于创建HTTP服务器和客户端，处理请求和响应。</li><li><span style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important; margin: 0px; font-weight: 700;">文件系统(fs)模块：该模块用于进行文件操作，包括读取、写入和追加文件。</li><li><span style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important; margin: 0px; font-weight: 700;">路径(path)模块：该模块用于处理文件路径，包括解析、合并和获取相对路径等操作。</li><li><span style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important; margin: 0px; font-weight: 700;">查询字符串(querystring)模块：该模块用于解析和格式化查询字符串。</li><li><span style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important; margin: 0px; font-weight: 700;">URL模块：该模块用于解析和格式化URL。</li><li><span style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important; margin: 0px; font-weight: 700;">TCP套接字(net)模块：该模块用于创建TCP套接字，实现网络通信。</li><li><span style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important; margin: 0px; font-weight: 700;">进程(process)模块：该模块用于与当前Node.js进程进行交互。</li><li><span style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important; margin: 0px; font-weight: 700;">全局对象(global)模块：该模块用于访问全局对象。</li><li><span style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important; margin: 0px; font-weight: 700;">Buffer模块：该模块用于处理二进制数据。</li><li><span style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important; margin: 0px; font-weight: 700;">Stream模块：该模块用于处理流式数据。</li><li><span style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important; margin: 0px; font-weight: 700;">事件循环(event loop)模块：该模块用于处理事件循环。</li></ol><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">以上是Node.js的一些内置模块，使用这些模块可以方便地实现网络通信、文件操作、数据处理等功能。

在Node.js中执行javascript文件

后端
nodejs, javascript
10784 阅读

<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 0px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">在Node.js中执行JavaScript文件主要有两种方式：命令行方式<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">首先，确保你已经安装了Node.js环境。然后，打开命令行工具，输入以下命令：<pre style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin-top: 14px; margin-bottom: 0px; font-size: 15px; overflow: auto; border-radius: 6px; color: rgb(5, 7, 59);"><code class="language-bash" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px; font-size: 1em; tab-size: 4;"><table class="hljs hljs-ln"><tbody style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;" class="firstRow"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">node 文件名.js</td></tr></tbody></table></code></pre><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">这里的"文件名.js"就是你要执行的JavaScript文件名。例如，如果你有一个名为"app.js"的文件，你可以通过输入<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">node app.js</code>来执行它。使用<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">require()</code>函数<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">在Node.js中，你可以使用<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">require()</code>函数来执行JavaScript文件。例如，如果你有一个名为"app.js"的文件，你可以在另一个JavaScript文件中使用以下代码来执行它：<pre style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin-top: 14px; margin-bottom: 0px; font-size: 15px; overflow: auto; border-radius: 6px; color: rgb(5, 7, 59);"><code class="language-javascript" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px; font-size: 1em; tab-size: 4;"><table class="hljs hljs-ln"><tbody style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;" class="firstRow"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">require('./app.js');</td></tr></tbody></table></code></pre><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">这里的'./app.js'表示当前目录下的'app.js'文件。这将执行"app.js"文件中的所有JavaScript代码。<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">注意：在Node.js中，主线程运行的JavaScript是单线程的，如果长时间运行的异步任务阻塞了主线程，会影响应用的响应性能。Node.js 采用事件驱动和非阻塞I/O模型，使其轻量且高效，尤其适用于数据密集型实时应用。

详细介绍如何选择Node.js版本

后端
nodejs, javascript
10784 阅读

<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 0px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">选择Node.js版本时，主要考虑以下几个因素：<ol style="box-sizing: border-box; padding: 0px 0px 0px 32px; -webkit-font-smoothing: antialiased; list-style-position: outside; list-style-image: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 1em; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;" class=" list-paddingleft-2"><li>稳定性：根据项目需求，如果需要稳定性和可靠性，可以选择长期支持（LTS）版本。LTS版本经过长期测试和验证，适合用于生产环境。</li><li>性能：如果对性能要求较高，可以选择最新版本的Node.js。每个版本都会带来性能的改进，包括更高的吞吐量和更低的延迟。此外，随着Node.js生态系统的不断发展，社区中的第三方模块和工具也会得到更新和优化，从而提供更好的性能。</li><li>兼容性：如果项目依赖于某些特定的第三方模块或库，需要确保选择的Node.js版本与这些依赖项兼容。在选择版本升级之前，建议进行充分的测试和验证，以确保不会破坏现有的功能和逻辑。</li><li>功能：当前版本包含最新的功能和改进，但可能不够稳定，适合用于尝试新特性或进行开发和测试。如果项目需要使用到最新的JavaScript特性，那么选择当前版本可能更合适。</li></ol><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">总之，在选择Node.js版本时，需要根据项目需求、稳定性、性能、兼容性和功能等多个因素综合考虑，以选择最适合的版本。

详细介绍react中的redux版本_异步功能

后端
react, javascript
10795 阅读

<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 0px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">在React中，Redux是一个强大的状态管理工具，可以帮助开发者更好地管理应用程序的状态。Redux的异步功能主要通过中间件（middleware）来实现，其中比较常用的是redux-thunk。<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">redux-thunk是一个Redux的中间件，用于处理异步操作。它允许开发者在Action Creator中返回一个函数，而不是一个普通的对象。这个返回的函数会被Redux的中间件自动调用，并传入当前的dispatch方法，开发者可以在这个函数中执行异步操作，然后再调用dispatch方法来更新应用程序的状态。<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">使用redux-thunk处理异步操作的方法如下：<ol style="box-sizing: border-box; padding: 0px 0px 0px 32px; -webkit-font-smoothing: antialiased; list-style-position: outside; list-style-image: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 1em; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;" class=" list-paddingleft-2"><li>首先，需要安装redux-thunk：<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">npm install redux-thunk</code>。</li><li>然后，在Redux的store中添加redux-thunk中间件：</li></ol><pre style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin-top: 14px; margin-bottom: 0px; font-size: 15px; overflow: auto; border-radius: 6px; color: rgb(5, 7, 59);"><code class="language-javascript" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px; font-size: 1em; tab-size: 4;"><table class="hljs hljs-ln"><tbody style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;" class="firstRow"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">import { createStore, applyMiddleware } from 'redux';</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">import thunk from 'redux-thunk';</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">import rootReducer from './reducers';</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">const store = createStore(rootReducer, applyMiddleware(thunk));</td></tr></tbody></table></code></pre>   3. 在Action Creator中返回一个函数，而不是一个普通的对象。这个函数接受当前的dispatch方法作为参数，并在适当的时候调用它：<pre style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin-top: 14px; margin-bottom: 0px; font-size: 15px; overflow: auto; border-radius: 6px; color: rgb(5, 7, 59);"><code class="language-javascript" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px; font-size: 1em; tab-size: 4;"><table class="hljs hljs-ln"><tbody style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;" class="firstRow"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">function fetchPostsRequest() {</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">return {</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">type: 'FETCH_POSTS_REQUEST'  </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">}</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">}</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">function fetchPostsSuccess(posts) {</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">return {</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">type: 'FETCH_POSTS_SUCCESS',</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">payload: posts</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">}</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">}</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">function fetchPostsFailure(error) {</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">return {</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">type: 'FETCH_POSTS_FAILURE',</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">payload: error</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">}</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">}</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">export function fetchPosts() {</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">return function(dispatch) {</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">dispatch(fetchPostsRequest());</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">return fetch('/api/posts')</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">.then(response => response.json())</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">.then(posts => dispatch(fetchPostsSuccess(posts)))</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">.catch(error => dispatch(fetchPostsFailure(error)));</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">}</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">}</td></tr></tbody></table></code></pre><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">在这个例子中，<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">fetchPosts</code>函数是一个Action Creator，它返回一个函数而不是一个普通的对象。这个返回的函数会被Redux的中间件自动调用，并传入当前的dispatch方法。在这个函数中，我们执行异步操作（通过fetch API请求数据），然后在适当的时候调用dispatch方法来更新应用程序的状态。

详细介绍react中的redux版本_同步功能

后端
react, javascript
10804 阅读

<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 0px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">在React中，Redux是一个强大的状态管理工具，可以帮助开发者更好地管理应用程序的状态。Redux的同步功能主要是通过Action和Reducer来实现的。<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">Action是一个描述应用程序状态如何改变的对象。它包含一个type属性，用于标识这个Action的类型，以及其他属性，用于传递数据或者参数。在Redux中，每个状态的变化都由一个Action来描述。<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">Reducer是一个纯函数，用于处理Action和当前状态，并返回一个新的状态。它接收两个参数：当前的state和当前的action，并根据action的类型来决定返回什么样的新的state。<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">在Redux中，每当有一个Action被触发，Redux会调用相应的Reducer，并传入当前的state和这个Action。Reducer根据Action的类型和数据来计算出新的state，并返回这个新的state。这样，Redux的同步功能就实现了。<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">下面是一个简单的例子，展示如何使用Action和Reducer来实现Redux的同步功能：<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">首先，定义一个Action Creator，用于创建一个AddTodo的Action：<pre style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin-top: 14px; margin-bottom: 0px; font-size: 15px; overflow: auto; border-radius: 6px; color: rgb(5, 7, 59);"><code class="language-javascript" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px; font-size: 1em; tab-size: 4;"><table class="hljs hljs-ln"><tbody style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;" class="firstRow"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">function addTodo(text) {</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">return {</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">type: 'ADD_TODO',</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">text</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">}</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">}</td></tr></tbody></table></code></pre><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">然后，定义一个Reducer，用于处理这个AddTodo的Action：<pre style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin-top: 14px; margin-bottom: 0px; font-size: 15px; overflow: auto; border-radius: 6px; color: rgb(5, 7, 59);"><code class="language-javascript" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px; font-size: 1em; tab-size: 4;"><table class="hljs hljs-ln"><tbody style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;" class="firstRow"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">function todos(state = [], action) {</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">switch (action.type) {</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">case 'ADD_TODO':</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">return [...state, { text: action.text, completed: false }]</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">default:</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">return state</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">}</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">}</td></tr></tbody></table></code></pre><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">最后，在Redux的store中添加这个Reducer：<pre style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin-top: 14px; margin-bottom: 0px; font-size: 15px; overflow: auto; border-radius: 6px; color: rgb(5, 7, 59);"><code class="language-javascript" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px; font-size: 1em; tab-size: 4;"><table class="hljs hljs-ln"><tbody style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;" class="firstRow"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">import { createStore } from 'redux';</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">import rootReducer from './reducers';</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">const store = createStore(rootReducer);</td></tr></tbody></table></code></pre>

详细介绍react中的使用redux调试工具

后端
react, javascript
10865 阅读

<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 0px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">在React中使用Redux调试工具，可以方便地在浏览器中实时查看和调试应用程序的状态。Redux调试工具主要有Redux DevTools和Redux DevTools Extension。<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">Redux DevTools是一个浏览器插件，可以在Chrome、Firefox等主流浏览器中使用。它可以实时跟踪Redux store的状态，显示当前选中的state和action，以及触发的mutations。通过Redux DevTools，开发者可以方便地查看应用程序的状态变化，调试业务逻辑和UI渲染。<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">Redux DevTools Extension是一个扩展程序，可以与Redux DevTools配合使用，提供更多的调试功能。它包括日志记录、时间旅行、暂停/恢复等高级功能，可以帮助开发者更详细地了解应用程序的状态和行为。<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">在React项目中，可以通过以下步骤使用Redux调试工具：<ol style="box-sizing: border-box; padding: 0px 0px 0px 32px; -webkit-font-smoothing: antialiased; list-style-position: outside; list-style-image: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 1em; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;" class=" list-paddingleft-2"><li>安装Redux DevTools和Redux DevTools Extension插件。在Chrome浏览器中，可以通过Chrome Web Store安装；在Firefox浏览器中，可以通过Firefox Add-ons安装。</li><li>在项目中安装Redux和相关依赖：npm install redux react-redux redux-thunk redux-logger redux-devtools-extension。</li><li>在项目中引入Redux和相关依赖，并创建Redux store。在store中添加reducers、middlewares等必要的代码。</li><li>在React组件中，通过connect()函数将组件与Redux store连接起来，以便在组件中获取state和dispatch actions。</li><li>在浏览器中打开应用程序，并启用Redux DevTools和Redux DevTools Extension插件。通过Redux DevTools，可以查看当前选中的state和action，以及触发的mutations。同时，可以通过日志记录、时间旅行、暂停/恢复等功能进行调试。</li></ol><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">使用Redux调试工具可以方便地在浏览器中实时查看和调试应用程序的状态，帮助开发者更好地理解和维护应用程序。

详细介绍react中的redux异步版本

后端
react, javascript
10781 阅读

<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 0px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">在React中，Redux异步版本通常指的是异步操作在Redux中的实现方式。Redux异步操作通常涉及到中间件（middleware）的使用，其中最常用的是redux-thunk。<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">redux-thunk是一个Redux的中间件，用于处理异步操作。它会对store对象原生的dispatch方法进行包装，然后返回一个新的dispatch方法。我们给这个新的dispatch方法传入一个函数，即dispatch(func)，在这个函数中我们执行异步操作，然后在异步操作的回调方法中执行原生的dispatch(action)操作，修改state。<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">例如，假设我们要在Redux中实现一个异步的fetch操作，可以使用redux-thunk中间件。首先，我们需要安装redux-thunk：<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">npm install redux-thunk</code>。然后，在Redux的store中添加redux-thunk中间件：<pre style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin-top: 14px; margin-bottom: 0px; font-size: 15px; overflow: auto; border-radius: 6px; color: rgb(5, 7, 59);"><code class="language-javascript" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px; font-size: 1em; tab-size: 4;"><table class="hljs hljs-ln"><tbody style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;" class="firstRow"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">import { createStore, applyMiddleware } from 'redux';</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">import thunk from 'redux-thunk';</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">import rootReducer from './reducers';</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">const store = createStore(rootReducer, applyMiddleware(thunk));</td></tr></tbody></table></code></pre><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">接下来，我们可以定义一个异步的Action Creator。在这个例子中，我们定义了一个fetchPosts的Action Creator：<pre style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin-top: 14px; margin-bottom: 0px; font-size: 15px; overflow: auto; border-radius: 6px; color: rgb(5, 7, 59);"><code class="language-javascript" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px; font-size: 1em; tab-size: 4;"><table class="hljs hljs-ln"><tbody style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;" class="firstRow"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">export function fetchPosts() {</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">return function(dispatch) {</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">dispatch(fetchPostsRequest());</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">return fetch('/api/posts')</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">.then(response => response.json())</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">.then(posts => dispatch(fetchPostsSuccess(posts)))</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">.catch(error => dispatch(fetchPostsFailure(error)));</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">}</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">}</td></tr></tbody></table></code></pre><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">在这个Action Creator中，我们首先调用fetchPostsRequest() Action来发出获取数据的请求。然后，我们使用fetch API来获取数据，并在获取成功后调用fetchPostsSuccess() Action来更新应用程序的状态。如果获取数据失败，则调用fetchPostsFailure() Action来发出错误信息。<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">通过使用redux-thunk中间件，我们可以在Redux中轻松实现异步操作。这种方式允许我们在Action Creator中返回一个函数，而不是一个普通的对象，从而可以在函数中执行异步操作并更新应用程序的状态。