初始axios获取端口数据

原创已于 2023-04-23 15:01:22 修改 · 154 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

于 2023-04-15 08:52:59 首次发布

漫漫前端路专栏收录该内容

11 篇文章

订阅专栏

作者通过添加axios依赖并引入，解决了之前程序无法运行的问题。将ajax请求转换为axios，简化了代码。在button点击事件中调用axios.get进行数据获取，显示axios的便捷性。文中还提到了端口传值的情况并未发生大的变化。

一大早打算把昨天没解决的问题搞定掉...大概就是怎么用axios获取端口传值..

整个过程还是比较简单的，但是不知道为什么昨天频繁报错..可能和今天添加的某几个步骤有关--大概就是，

cmd工程目录下yarn add axios添加依赖、

我觉得可能是我只添加了项目依赖，并没有在工程中引入的原因，导致程序跑不起来...（因为我今天第一时间就写了导入指令 ↓ ↓ ↓ ）

  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

对没错。我觉得我昨天没跑起来大多是和这句话有关系。

剩下的就是给button添加单击事件，@click=''getEvent'' ，除了这个getEvent()函数需要改动（从ajax语法改到axios）其他几乎没怎么变。

          // var xhttp = new XMLHttpRequest();
          // xhttp.open("GET","https://mock.mengxuegu.com/mock/642f630132affa39a121cd8d/example/api/getEvent",true);
          // xhttp.send()

          axios.get('https://mock.mengxuegu.com/mock/642f630132affa39a121cd8d/example/api/getEvent').then(function(response){
            console.log(response);

我特意把ajax的请求代码放在了上面；可以看出axios确实比ajax要简洁不少。官网介绍说是axios使用了浏览器创建XMLHttpRequest()，就省的用户再自主定义；我感觉很省事；起码不是很懂，但是用起来简单舒服就okk...、至于获取的传值，大概和昨天没差，以下是截取的结果图，