接口频繁更新带来的小问题
我们在项目开发中,经常碰到因为接口地址的改变,导致获取不到数据信息造成项目崩溃,作为开发工程师,选择重置项目和增加接口请求无疑大大增加了工程量和代码冗余量。今天在项目实战中,就碰到了这样的情况。
本项目是一个在线音乐小程序,问题出在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
二维码
文章目录
关闭
共有 0 条评论