vue-resourse实现Get请求数据时报错问题

Uncaught(in promise) 和net::ERR_CONNECTION_TIMED_OUTBA报错问题

报错信息如图
vue-resourse实现Get请求数据时报错问题_第1张图片
解决:
1.第一个报错信息是找不到数据源,数据接口我用的是JSONPlaceholder( 是一个提供免费的在线 REST API 的网站(http://jsonplaceholder.typicode.com/)),但是后来发现这个网站打不开了,数据也就请求失败报错,所以自己写了个json文件显示。

2.第二个报错信息,Uncaught(in promise)是promise缺少了错误处理方法,也就是这个文件请求出现了rejected状态,而promise处理rejected状态的方法是catch所以在我的代码加上catch错误解决就不报错了。

全部代码:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue-resource/1.5.1/vue-resource.js"></script>
  <!-- //vue-resourse引用必须在vue.js后面 -->
  <link rel="stylesheet" type="text/css" href="./layui/css/layui.css"/>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="./layui/layui.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
  
  <div id="app">
  <!--  <div id="">
    <label>添加:</label>
    <input type="text" name="" id="" value="" v-model="title"/>
    <button type="button" class="btn btn-primary" @click="add()">添加</button>
   </div> -->
   
   <table border="" cellspacing="" cellpadding="" class="layui-table" lay-size="lg">
    <thead>
     <tr>
      <th>id</th>
      <th>title</th>
      <th>url</th>
      <th>thumbnaiUrl</th>
     </tr>
    </thead>
    <tbody>
     <tr v-for="item in list" :key="item.title">
      <td>{{item.title}}</td>
      <td>{{item.content}}</td>
      <td>{{item.full_time}}</td>
      <td>{{item.src}}</td>
     </tr>
    </tbody>
   </table>
  </div>
 </body>
 <script type="text/javascript">
 
  var vm = new Vue({
   el:'#app',
   
   data:{
    // title:'',
    list:[ ]
    
   },
   created(){//实例已经在内存中创建完成,此时data和methods已经创建完毕,但是还没有开始编译模板。
   
    this.getAllList()
   
   },
   methods:{
   
    // add(){
    //  var result={id:this.id,title:this.title,url:this.url,tthumbnaiUrl:this.thumbnaiUrl}
    //  this.list.push(result)
    //  this.title=''
    // },
    
    getAllList(){
    
       this.$http.get('list.json').then(result=>{
        this.list = result.body
      }).catch(function (error) {
        console.log(error);
       });
     }
    
   }
  });
 </script>
</html>

显示截图vue-resourse实现Get请求数据时报错问题_第2张图片

你可能感兴趣的:(vue课程笔记)