前言
在进行前端开发时，经常遇到需要完成 DNS 解析的任务。然而，浏览器 API 并没有提供 DNS 解析的接口，因此开发者通常需要调用第三方服务或依赖后端接口来实现 DNS 解析。
@sagi.io/doh 包提供了一种更加直接的方式来进行 DNS 解析，它利用 DOH（DNS-over-HTTPS）协议在客户端完成 DNS 解析。
本文将为大家介绍如何使用 @sagi.io/doh 包进行前端 DNS 解析。
安装
@sagi.io/doh 包可以通过 npm 进行安装：
npm install @sagi.io/doh
使用方法
要使用 @sagi.io/doh，你需要先创建一个实例。你可以通过传入你想要使用的 DNS 服务器的 URL 来创建一个实例：
const { DohResolver } = require('@sagi.io/doh');
const resolver = new DohResolver('https://dns.google/dns-query');创建完实例后，你可以调用 resolve 方法来进行 DNS 解析。 resolve 方法接受三个参数：域名、类型和选项。其中，选项参数是可选的。
resolver.resolve('example.com', 'A', { timeout: 3000 })
.then(answer => console.log(answer))
.catch(error => console.error(error));上述代码中调用了 resolve 方法，解析了域名 example.com，指定了类型为 A 记录，并且设置了一个 3000 毫秒的超时时间。
示例
接下来，我们来看一个完整的例子，使用 @sagi.io/doh 来进行域名解析并展示解析结果：
-- -------------------- ---- -------
----- - ----------- - - ------------------------
----- -------- - --- --------------------------------------------
----- ----------- - ----------------------------------------
----- --------- - --------------------------------------
----- --------- - ----------------------------------
---------------------------------------------------------------- ----- -- -- -
----- ------ - -------------------------
-- --------- -
-------
-
----- ---- - ---------------------- -- ----
--- -
----- ------ - ----- ------------------------ ----- - -------- ---- ---
------------------- - -------- ---------------------------
- ----- ------- -
------------------- - ------- ------------------
-
---上述代码中，我们首先创建了一个 DohResolver 实例，然后在页面中获取了要解析的域名和记录类型的输入框以及结果显示区域，接下来添加了一个点击事件监听器。
在事件监听器中，我们首先从输入框中获取域名和类型，然后调用 resolve 方法进行 DNS 解析。如果 DNS 解析成功，我们就在结果区域显示解析结果，否则在结果区域显示错误信息。
总结
@sagi.io/doh 包提供了一种方便的方式来进行前端 DNS 解析，而不需要依赖第三方服务或后端接口。不过需要注意的是，DOH 协议仍处于发展中，并不是所有 DNS 服务器都支持 DOH。因此，在使用 @sagi.io/doh 进行 DNS 解析之前，最好先确认所使用的 DNS 服务器是否支持 DOH 协议。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5f51ab1864dac6717e