用vue写web前端遇到axios的bug

Question

用vue写web前端，遇到了报错，实在解决不了了,不知道哪里出了问题

Answer 1

• 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7691080
• 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：vue整合的axios(Bug)
• 除此之外, 这篇博客: Web前端开发之简单使用Vue中的 1.axios+vue 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• https://autumnfish.cn/api/joke 随机笑话接口

  • axios回调 函数中的this已经改变，无法访问到data中数据。
  • 把this保存起来，回调函数中直接使用保存的this即可
  • 和本地应用最大的区别就是改变了数据来源。

  <div id="app">
      <input type="button" value="获取笑话" @click="getJoke">
      <p>{{joke}}</p>
  </div>
  <script src="./node_modules/axios/dist/axios.js"></script>
  <script src="./js/vue.js"></script>
  <script> 
      var app=new Vue({
          el:"#app",
          data:{
              joke:"很好笑的笑话"
          },
          methods:{
              getJoke:function(){
                  var that=this;
                  axios.get("https://autumnfish.cn/api/joke").then
                  (function(response){
                      console.log(response)
                      console.log(response.data)
                      that.joke=response.data;
                  },function(err){
                      console.log(err)
                  })
              }
          }
      })
  </script>
  

• 您还可以看一下 jason老师的vue通用后台管理课程中的 axios的基本使用小节, 巩固相关知识点
  
• 以下回答由chatgpt基于相关博客总结生成:

  针对遇到的Axios错误，需要先明确具体的错误信息，然后根据错误信息进行排查和解决。

  如果是Axios无法发送请求时，可以先检查 http-common.js 文件是否正确配置了 baseURL 和 headers；另外可以使用 postman 工具进行测试，看是否能够成功接收到服务端的返回结果。

  如果是服务端接受数据格式参数配置的不正确，需要检查传递参数的格式是否和服务端的要求相符合。

  如果参数名和实体类中的属性名不一致，无法识别传递的参数值，则需要修改参数名和实体类中的属性名保持一致，确保正确传递参数。

  如果需要发送一个POST请求，可以使用代码示例中的方式进行请求，将请求参数对象作为第二个参数进行传递。

  以上是针对Axios错误的一般排查和解决方案，但具体的解决方法还需要根据具体的错误提示和情况进行调整和优化。