# Alchemy的the Road to Web3第九周文本教程- 使用 0x API 构建代币交换 Dapp

By [Monkey](https://paragraph.com/@monkey-11) · 2022-09-25

---

在本教程中，我们将学习如何使用[0x API 交换端点](https://docs.0x.org/0x-api-swap/introduction)**它允许用户在流动性供应和使用中**获取可用报价[智能订单路由](https://blog.0xproject.com/0x-apis-smart-order-routing-7af0195515e5)在分散的交易网络中拆分交易，以尽可能降低**滑点**，同时最大限度地降低交易成本。请注意，我们不需要编写任何智能合约来查找和结算交易！相反，0x API 允许 web3 开发人员轻松利用 0x 协议智能合约，该合约负责处理用于结算交易的所有逻辑，让 web 开发人员专注于构建最佳交易体验。

在本教程结束时，将学习如何执行以下操作：

*   了解为什么**流动性聚合**很重要
    
*   查询并显示**ERC20 代币列表**
    
*   使用**0x API /swap 端点**
    
*   设置**代币限额**
    
*   构建一个使用web3.js连接到**MetaMask的简单代币交换DApp**
    

结果展示
----

![](https://storage.googleapis.com/papyrus_images/819e61b756df78d3e60356e4ce58a1729c0746bf2c11014fdb8efb556e11c2f7.png)

正课开始
----

### 1.clone 代码

因为我们需要在浏览器中使用节点模块，所以需要安装下面的依赖

    # 可能权限不足 则使用sudo
    npm install -g browserify
    npm i qs
    # 每一步修改了代码为了最新的代码都必须执行下面的
    browserify index.js --standalone bundle -o bundle.js
    npm install bignumber.js
    

2.使用vscode打开我们的代码
-----------------

我们将clone的代码使用VScode打开后，为了方便使用则需要安装一些扩展工具，按照下面安装即可：

![](https://storage.googleapis.com/papyrus_images/b3f616c69836fc330bdfa952cf88890daf38c7e808f6670b0892f7db222286e0.png)

![](https://storage.googleapis.com/papyrus_images/29e45cd6c5fe43f2c0d03bb557b8413b4a7edb2e158642081b2038435654683b.png)

当上面都安装好后，我们使用安装的工具运行代码，会出现下面的页面，系统会自动去加载token信息。

![](https://storage.googleapis.com/papyrus_images/efa1fffe5137ea5a3576328ef5b84b649d1c953acdcc215fc591f243d677430c.png)

![](https://storage.googleapis.com/papyrus_images/819e61b756df78d3e60356e4ce58a1729c0746bf2c11014fdb8efb556e11c2f7.png)

系统会自动给我们计算Gas，我们连接上钱包，点击Swap，小狐狸钱包会提示我们授权

![](https://storage.googleapis.com/papyrus_images/b6703bf7bd63879acd25d69b7d0cca3dfbd4795f4873267a835dc247cf6ec3a3.png)

当我们批准授权后，小狐狸钱包会再次提醒我们去和合约交互做Swap，我们再次同意后就可以等待事物的完成。

![](https://storage.googleapis.com/papyrus_images/8bf2a49a6ac0002659f637bb7d5848982e0ffdd1c1744c0092bc60b1842c373a.png)

当你完成后，可以多种方式查询结构，如去区块浏览器查询，或者在自己钱包查看

![](https://storage.googleapis.com/papyrus_images/3c3e8f46ae2bd603c582db759e669e1f93d9bc0f87d95e7e0bdb04af6cfba9b4.png)

**注意事项：因为合理0x是使用主网的哦，切记。**

最后我们别忘了去填写表格哦。

---

*Originally published on [Monkey](https://paragraph.com/@monkey-11/alchemy-the-road-to-web3-0x-api-dapp)*