接口频繁更新带来的小问题

我们在项目开发中,经常碰到因为接口地址的改变,导致获取不到数据信息造成项目崩溃,作为开发工程师,选择重置项目和增加接口请求无疑大大增加了工程量和代码冗余量。今天在项目实战中,就碰到了这样的情况。

本项目是一个在线音乐小程序,问题出在MV视频模块

因为接口地址的改变,原接口'/video/group'中的urlInfo已废弃为NULL 无法使用。

信息没有一个数组总,导致原来的wx:for不能正常使用,界面出现视频黑屏页面无法正常播放。

我们从新的文档信息中可以看到

'/video/group'获取标签/分类下的视频信息

 

 

 

 

'/video/url'则可以用于获取视频地址

 

 

 

 

解决方案实例演示(看注释部分):

页面代码第一部分

// pages/video/video.js
import request from '../../utils/request' //封装网络请求,不再赘述
Page({

  /**
   * 页面的初始数据
   */
  data: {
    videoGroupList:[], //导航标签数据
    navId:'',//导航的标识
    videoList:[],//视频列表数据
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    //获取导航标签数据
    this.getVideoGroupListData();

  },
  //获取分类导航数据
  async getVideoGroupListData(){
    let videoGroupListData = await request('/video/group/list');
    this.setData({
      videoGroupList : videoGroupListData.data.slice(0,14),
      navId:videoGroupListData.data[0].id
    })
    //获取视频列表数据
    this.getVideoList(this.data.navId);

  },
//点击切换导航的回调
  changeNav(event){
    let navId = event.currentTarget.id; //通过id向event对象传参如果传的是number会自动转成string,也可以使用dataset方法,dataset方法不会转换数据类型
    this.setData({
      navId:navId>>>0, //数据类型转换
    })
  },

页面代码第二部分

 
  // 首先,我们来重新获取视频列表数据 
  async getVideoList(navId){
       //获取标签/分类下的视频信息
    let videoListData = await request('/video/group',{id:navId})
    let videoList = videoListData.datas
  // 建立 URL 列表
    let videoUrlList = 0
  // 获取 URL
    for( let i = 0,i < videoList.length;i++ ){
     //1.获取视频播放地址调用接口,传入视频 id,获取视频播放地址相关信息
     //2.通过获取播放视频接口地址,利用videoList的数组长度i对videoList进行数组遍历,并提取data数组里面的vid,
     let videoUrlItem = await request ('/video/url',{id:videoList[i].data.vid}) 
     //获取精确的视频地址,并拉取videoUrlList里面
     videoUrlList.push(videoUrlItem,urls[0].url)
    }
    //将url导入到videoList中
    for(let i = 0,i < videoUrlList.length;i++){ //匹配videoUrlList数组长度
      //将videoUrlList获取到精确的视频地址注入到videoList视频列表的urlInfo项
      videoList[i].data.urlInfo = videoUrlList[i] 
     }
 })
//end

如图所示,已成功更新urlInfo

版权声明:
作者:jenkin
链接:https://blog.ijenkin.top/index.php/2023/03/21/cxc2/
来源:Jenkin
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>
文章目录
关闭
目 录