蓝桥杯练习——神秘咒语——axios

目标

完善 index.js 中的 TODO 部分，通过新增或者修改代码，完成以下目标：

点击钥匙 1 和钥匙 2 按钮时会通过 axios 发送请求，在发送请求时需要在请求头中添加 Authorization 字段携带 token，token 的值为 2b58f9a8-7d73-4a9c-b8a2-9f05d6e8e3c7。

完成后效果如下所示：

题解 

TODO：新增或者修改以下代码

key1Button.addEventListener('click', async () => {
    // 从后台请求钥匙1的咒语部分
    key1Button.disabled = true;
    let {data} =  await axios.get('/spellone',{
        headers:{
            'Authorization':'2b58f9a8-7d73-4a9c-b8a2-9f05d6e8e3c7',
        }
    })
    spell1.innerHTML = data;
    tryOpenTreasureBox();
});

key2Button.addEventListener('click', async () => {
    // 从后台请求钥匙2的咒语部分
    key2Button.disabled = true;
    let {data} =  await axios.get('/spelltwo',{
        headers:{
            Authorization:'2b58f9a8-7d73-4a9c-b8a2-9f05d6e8e3c7',
        }
    })
    spell2.innerHTML = data;
    tryOpenTreasureBox();
});

知识点补充：在JavaScript中使用axios发送请求的基本模板如下所示：

// 导入axios
const axios = require('axios');

// 设置请求的配置项（可选）
const config = {
  headers: {
    'Content-Type': 'application/json', // 设置请求头，根据需要修改
    // 其他配置项...
  },
  // 其他配置项...
};

// 发送 GET 请求
axios.get('http://api.example.com/data')
  .then(response => {
    // 处理响应数据
    console.log(response.data);
  })
  .catch(error => {
    // 处理错误
    console.error('Error fetching data: ', error);
  });

// 发送 POST 请求
const postData = {
  key1: 'value1',
  key2: 'value2',
  // 其他数据...
};

axios.post('http://api.example.com/post-endpoint', postData, config)
  .then(response => {
    // 处理响应数据
    console.log(response.data);
  })
  .catch(error => {
    // 处理错误
    console.error('Error posting data: ', error);
  });

// 其他请求类型的发送类似，如PUT、DELETE等，使用对应的axios方法即可