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

本文主要是介绍蓝桥杯练习——神秘咒语——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方法即可

这篇关于蓝桥杯练习——神秘咒语——axios的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---