在前端开发中，许多情况下我们需要将长链接转化为短链接，在分享和推广链接时能够极大地提高用户点击的可能性。而在实现这一功能时，我们可以借助 npm 提供的 webshortener 插件，它能够帮助我们快速生成短链接。本文将详细讲解如何使用 webshortener，帮助读者在项目中顺利完成短链接的生成。
安装和引入
首先，我们需要使用 npm 安装 webshortener，安装命令如下：
--- ------- ------------
安装完成后，我们可以通过以下方式引入 webshortener：
----- ------------ - ------------------------
或者
------ ------------ ---- ---------------
短链接生成方法
webshortener 模块提供了多种短链接生成方法，这里介绍其中两种常用的方法。
bitly 短链接生成
使用 bitly 短链接生成方法需要先注册 bitly 账号并获取 access token。获取方法如下：
- 访问 https://dev.bitly.com/v4_documentation/，
点击
Get Started按钮 - 在新页面中点击获取
Access Token按钮，会弹出一个新的页面 - 输入自己的 bitly 账户信息，登录并允许授权，成功后得到 Access Token
接下来我们在代码中使用获取到的 token，进行 bitly 短链接生成：
----- ----- - --- -------------------- ------------- -------------- --- -------------------------------------------------------------- - -------------------- -- ---------------------- ---
其中，access_token 是申请到的 bitly token，shorten 方法的参数为需要生成短链接的长链接地址。使用 Promise 监听结果，结果返回值为生成的短链接。
isgd 短链接生成
isgd 短链接生成不需要授权，可直接使用。接下来我们演示如何使用 isgd 短链接生成方式：
----- ---- - --- -------------------- ------------------------------------------------------------- - -------------------- -- -------------------- ---
与 bitly 短链接生成类似，只需创建一个 IsGd 对象，调用 shorten 方法即可生成短链接。
示例代码
下面是完整的示例代码：
----- ------------ - ------------------------ -- -- ----- ------- ----- ----- - --- -------------------- ------------- -------------- --- -------------------------------------------------------------- - -------------------- -- ---------------------- --- -- -- ---- ------- ----- ---- - --- -------------------- ------------------------------------------------------------- - -------------------- -- -------------------- ---
总结
本文介绍了如何使用 webshortener 进行短链接生成，分别演示了常用的 bitly 和 isgd 生成方法，并提供了完整的示例代码。在实际开发中，我们可以根据具体情况选择不同的短链接生成方式，使得项目更加高效便捷。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600671068dd3466f61ffddf9