接口请求及状态管理过程（播放多个视频）

本文链接：https://blog.youkuaiyun.com/Gyanga/article/details/115174947

本文探讨了在Vue.js应用中，如何在组件`index1-videoList.vue`中利用Vuex进行状态管理，通过`Vuex子模块index1.js`中的`actions`调用`request-process.js`中的接口请求函数`getMerchantVideos`，处理从后端获取的视频数据。在`request-process.js`中，使用Promise处理异步操作，根据请求参数`requestData`调用`request.js`发送GET请求，成功后将数据`res.data`提交给Vuex的`mutations`中的`setMerchantVideoList`，更新`MerchantVideoList`状态，最终将视频数据展示在界面上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

组件 index1-videoList.vue 中：

在这里插入图片描述
从数据库拿到的数据存放在MerchantVideoList中（state存储）
So,
需要弄清楚是如何从前端发送请求参数向后端请求得到数据库中视频相关数据，以及请求到数据后如何用Vuex对数据进行管理并运到界面中展示

methods() 中：
⭐分发Action（action内可执行异步操作）
在这里插入图片描述

⭐fix：{ }中为data（请求参数）向后端请求数据（此时为空）
ps: .then() 为异步执行，执行完.then()前的内容再执行then()内部的程序

Vuex子模块index1.js中：

actions中：
调用requestProcess()函数并返回，其中getMerchantVideo和res => commit(‘setMerchantVideoList’, res.data) 为为被传递的函数
在这里插入图片描述

❗❗❗接口文件request-process.js中：

在这里插入图片描述
⭐①request为发送请求request.js中的函数
⭐②requestData为请求参数（请求携带的数据）
⭐③okHandle是成功处理函数
⭐④errHandle是失败处理函数
该过程为将request函数传入到requestProcess（）中来（在Promise中调用），传入请求参数requestData(可为空)，传入okHandle()函数在Promise函数中的request函数中调用
🔑接口请求从requestProcess（）函数中开始
ps: Promise对象用于表示一个异步操作的最终完成（或失败）及其结果值。Promise（）实现异步判断请求类型后发送接口请求（基于uniapp的request），resolve成功，reject失败；请求成功时执行okHandle()

先调用发送请求的request函数并传入请求参数，后通过.then()实现异步处理后端接口的返回信息res，请求成功时得到视频数据res.data,这时
res => commit(‘setMerchantVideoList’, res.data)中得到视频数据

①getMerchantVideos

传递api接口文件index1.js中的getMerchantVideos函数，返回的是request函数
在这里插入图片描述
在接口文件中调用request（）函数，
此时url参数经拼凑后为http://wxback.huanight.com/api/v1/getMerchantVideos，参数data为空值，请求类型为get

在request函数中通过使用一个函数返回的对象，构造函数Promise（）给每个请求都加上商家id和用户id（请求参数data）,并实现异步判断请求类型后发送接口请求（基于uniapp的request），resolve成功，reject失败，⭐最后getMerchantVideos（）返回的结果为request请求结果（res.data），返回后端从数据库中获取到的视频数据

②data为前端向后端请求数据的请求参数（此时为空）

③res => commit(‘setMerchantVideoList’, res.data)

commit: 调用mutations中的setMerchantVideoList（）函数，实现视频路径拼凑（通过commit调用mutations中的函数来改变state中的数据）
在这里插入图片描述
link=‘http://test.huanight.com’+’/1.mp4’（/1.mp4为从后端获取的link）
⭐此时state中MerchantVideoList中link路径数据被改变
ps： ①{commit} 是调用context.commit提交一个mutaition的简化 (context)，通过commit调用mutations中的函数来改变state中的数据
②data,挂载参数（payload）
eg：

/*简化前*/
 actions: {
    increment (context) {  //context为默认参数，上下文对象（与store实例具有相同方法和属性）
      context.commit('increment')
    }
  }
 /*简化后*/
 actions: {
  increment ({ commit }) {
    commit('increment')
  }
}