https://geeknote.net/qichunren
qichunren
https://geeknote-storage.oss-cn-hongkong.aliyuncs.com/om439zd2ggwn7iw1xe2m11w7x14f?x-oss-process=image%2Fresize%2Cm_fill%2Cw_160%2Ch_160
2022-10-28T15:00:13Z
qichunren
https://geeknote.net/qichunren
https://geeknote.net/qichunren/posts/1319
2022-07-24T08:25:28Z
2022-10-28T15:00:13Z
Hotwire学习记录(1):TURBO_STREAM 类型的请求
<p>在表单提交表单后,在控制台看到有如下的请求日志:</p>
<pre class="highlight"><code>Started POST "/posts" for ::1 at 2022-07-16 22:00:44 +0800
Processing by PostsController#create as TURBO_STREAM
</code></pre>
<p>第一个问题:TURBO_STREAM 请求是什么?它是怎么样产生的?怎么样利用它?</p>
<p>通过 Chrome 开发工具检查一下提交表单时的动作。通过观察发现请求头中的Accpet项是这样的:</p>
<blockquote>
<p>Accept: text/vnd.turbo-stream.html, text/html, application/xhtml+xml</p>
</blockquote>
<p>也就是说浏览器发起的请求头 Accept项中如果包含有 “text/vnd.turbo-stream.html”,那么 Rails 控件器会将此请求作为 TURBO_STREAM 类型的请求来处理。</p>
<pre class="highlight"><code>respond_to do |format|
format.turbo_stream
end
</code></pre>
<p>第二个问题:什么时候会发起 TURBO_STREAM 类型的请求?</p>
<p>仔细阅读 Hotwire 的<a href="https://turbo.hotwired.dev/handbook/streams#streaming-from-http-responses">文档</a>,发现其中说明了,在提交表单的 method 属性是 <code>POST</code>, <code>PUT</code>, <code>PATCH</code>, 或者 <code>DELETE</code> 时,Turbo 会在请求头的 Acept 中插入 <code>text/vnd.turbo-stream.html</code>,使得服务器端可以特殊处理。</p>
<p>另外在<a href="https://turbo.hotwired.dev/handbook/drive#performing-visits-with-a-different-method">文档中</a>有说明,当a标签的data-turbo-method属性是非<code>get</code>的其它值时,点击a标签时,背后是通过转换成form元素,从而发起相应类型的表单请求,从而使得a标签也是可以可以发起 TURBO_STREAM 请求的。</p>
<p><strong>注意:</strong> 由于表单是不支持嵌套表单的(如div元素中还可以有下一级的div元素),所以不要在表单标签中使用特别的a标签。</p>
在表单提交表单后,在控制台看到有如下的请求日志:
Started POST "/posts" for ::1 at 2022-07-16 22:00:44 +0800
Processing by...
qichunren
https://geeknote.net/qichunren