获取接口数据添加到列表

整体结构都一样，这边直接用一组实例详细解释：

第一步：再api中创建一个文件来封装接口

接口地址：新版黑马头条 (itheima.net)

第二步 ：创建一个子组件接收接口

 第三步：在创建好的子组件引入封装好的接口

 第四步：正式在方法中布置接口数据

  methods: {
 
    async onLoad() {
      try {
        //1 请求获取数据
        const { data } = await getArticles({
          channel_id: this.channel.id, //频道ID
          timestamp: this.timestamp || Date.now(), //时间戳，请求新的推荐数据传当前的时间戳，
          //   请求历史推荐传指定的时间戳返回数据,适用于第一页数据，当前最新时间戳
          // 用于请求之后数据的时间戳汇总当前请求结果中返回给你
          with_top: 1, //是否包含置顶，进入页面第一次请求时要包含置顶文章：1包含置顶0不包含
        });
        //    模拟失败效果
        //    if(Math.random() > 0.5){
        //    JSON.parse('dasdsddds')
        //    }
        // 2.把请求结果数据放到list数组中
        const { results } = data.data;
        //  数组的展开操作符，它会把数组元素一个一个拿出来
        this.list.push(...results);

        // 3.加载状态结束,本次数据加载结束之后要把加载状态设置为结束
        this.loading = false;

        // 4.数据全部加载完成
        if (results.length) {
          // 更新获取下一页数据的时间戳
          this.timestamp = data.data.pre_timestamp;
        } else {
          // 没有数据了，将finished设置为true，不再加载更多了
          this.finished = true;
        }
      } catch (err) {
        //   展示错误提示状态
        this.error = true;

        // 请求失败，loading需要关闭
        this.loading = false;
      }
    },
    // 当下拉刷新的时候会触发调用该函数
    async onRefresh() {
      try {
        //1 请求获取数据
        const { data } = await getArticles({
          channel_id: this.channel.id, //频道ID
          timestamp: Date.now(), //下拉刷新，每次请求获取最新数据，所以获取当前最新时间戳
          //   请求历史推荐传指定的时间戳返回数据,适用于第一页数据，当前最新时间戳
          // 用于请求之后数据的时间戳汇总当前请求结果中返回给你
          with_top: 1, //是否包含置顶，进入页面第一次请求时要包含置顶文章：1包含置顶0不包含
        });

        //2 将数据追加到列表的顶部
        const { results } = data.data;
        this.list.unshift(...data.data.results);

        //3.关闭下拉刷新的loading状态
        this.isreFreshLoading = false;
        // 更新下拉刷新成功提示的文本
        this.refreshSuccessText = `刷新成功，更新了${results.length}条数据`;
      } catch (err) {
        this.refreshSuccessText = "刷新失败";
        this.isreFreshLoading = false;
      }
      // 请求获取数据
      // 将数据追加到列表的顶部
    },
  },

第五步：修改绑定

第六步:然后声明文章id，

第七步：最后把布置好的子组件引入父组件中