如何让MetaMask链切换函数优先于代币添加函数执行？

问题出在异步操作未做等待处理：链切换的wallet_addEthereumChain请求是异步的，需要用户在MetaMask弹窗确认后才会完成，但你的代码里没有等待这个操作完成就直接执行了addToken，所以才会出现顺序颠倒的情况。

具体修复步骤： #

1. 让switchToChain返回异步请求的Promise，确保可以被等待
2. 在switchChain函数内等待链切换操作完成
3. 修改按钮点击事件，用异步函数包裹两个操作，保证顺序执行

修正后的完整代码： #

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
        async function switchChain()
        {  
            const chainParams = 
            {
                'BNB' : 
                {
                chainId: '0x38',
                chainName: 'Smart Chain',
                nativeCurrency: {
                name: 'Binance Coin',
                symbol: 'BNB',
                decimals: 18
                },
            rpcUrls: ['https://bsc-dataseed.binance.org/'],
            blockExplorerUrls: ['https://bscscan.com']
            }
        }
        
        // 修改：让函数返回请求的Promise
        const switchToChain = (chainName) => 
        {
            return window.ethereum.request(
                {
                method: 'wallet_addEthereumChain',
                params: [chainParams[chainName]]
                }
            )
        }  
        
        let desiredChain = 'BNB'
        // 修改：等待链切换操作完成
        await switchToChain(desiredChain)
          
        }

        async function addToken() {
        const tokenAddress = '0xef50c139be0b67baab4f834d3d9a1f09d2691e02'; // 替换为你的代币地址
        const tokenSymbol = 'SGC'; // 替换为你的代币符号
        const tokenDecimals = 18; // 代币小数位数
        const tokenImage = 'https://i.imgur.com/o2EXAlM.png'; // 代币图片链接
        try 
            {
            const wasAdded = await ethereum.request(
                {
                method: 'wallet_watchAsset',
                params: 
                    {
                    type: 'ERC20', 
                    options: {
                    address: tokenAddress, 
                    symbol: tokenSymbol, 
                    decimals: tokenDecimals, 
                    image: tokenImage, 
                    },
                    },
                });
        
                if (wasAdded) {
                console.log('代币添加成功');
                } else {
                console.log('代币未被添加');
                }
            } 
            catch (error) 
            {
            console.log(error);
            }
            
        }
        
        // 添加异步点击处理函数
        async function handleButtonClick() {
            try {
                await switchChain();
                await addToken();
            } catch (err) {
                console.error('操作失败:', err);
            }
        }
        </script>
<!-- 修改按钮点击事件 -->
<button onclick="handleButtonClick()">添加代币到MetaMask</button>
</body>
</html>

关键修改点说明： #

• switchToChain函数新增return，把window.ethereum.request的Promise返回，让外部可以用await等待它完成
• switchChain内部用await调用switchToChain，确保链切换的弹窗被用户处理后，这个函数才会执行完毕
• 新增handleButtonClick异步函数，用await依次调用switchChain和addToken，保证严格的执行顺序

内容的提问来源于stack exchange，提问作者Are6