开发日记(02) - js 异步任务队列

开发日记(02) - js 异步任务队列

2021-01-31 20:40:22

0️⃣ 问题 ❓

算是之前项目遗留下来的一个问题。一直困扰着我。

还是关于 uni-app 以及 Vue 项目的网路请求，有这么一个需求，项目内有一个全局使用到数据，我们称为**“数据字典”**。需要在项目一打开就加载进来，存入到 Vuex，后续使用就不需要再请求网络了，使用的时候先判断 Vuex 内有没有数据，没有就去请求，有就用现成的。一般像这样的数据不需要经常更新。 有点类似于项目的全局配置，一打开就需要请求，然后在特定的页面需要用到。

因为是全局需要用到，所以我们在 App.vue 的 onLaunch 应用生命周期（uni-app 的应用生命周期，与 Vue 的 mounted 生命周期类似）进行一次请求

数据字典就是用来格式化类似性别，订单状态的，比如后台返回一个订单列表，订单状态为 1,2,3,4,5…

前端不可能显示为纯数字，这个时候可以根据后台给到的解释进行判断显示。不过这种方法有一个缺点，就是每增加一种状态前端都得改代码。

数据字典就是一种比较好的解决方式，订单状态全部放在后端维护，前端使用数据字典配置好的状态说明进行格式化显示就很灵活了。

${app}/src/App.vue

import {
    getDictByKey } from '@/store/util'
export default {
   
  onLaunch() {
   
    console.log('App Launch')
    getDictByKey()
  },
}

在页面中这么用

${app}/src/pages/foo/foo.vue

import {
    getDictByKey } from '@/store/util'
export default {
   
  async onLoad() {
   
    // 请求类型信息
    const typeList =