知识付诸行动才有转换为能力的效果

引语

场景：工作中遇到一个数据接口同时依赖于另外两个接口的情况,
需要两个接口返回的数据才能实现进一步操作，下面介绍 3 种方法

首先普及一下promise的一些冷门知识

执行 then 和 catch 会返回一个新的 Promise ，该 Promise 最终状态根据 then 和 catch 的回调函数的执行结果决定

• 如果回调函数最终是 throw ， 该 Promise 是 rejected 状态
• 如果回调函数最终是 return ， 该 Promise 是 resolved 状态
• 但如果回调函数最终 return 了一个 Promise ， 该 Promise 会和回调函数的 reurn 的状态保持一致

利用js回调嵌套的方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// 异步接口1: 科室列表
function getDepartmentsList(callback){
    //模拟实现
    var departmentList = Math.ceil(Math.random()*1000)
    setTimeout(function(){
        callback(departmentList)
    },Math.random()*1000)
}

// 异步接口2: 级别列表
function getLevelList(callback){
    //模拟实现
    var levelList = Math.ceil(Math.random()*1000)+1000
    setTimeout(function(){
        callback(levelList)
    },Math.random()*1000)
}

//异步接口，列表中科室和级别码转换成对应的中文，需要前两个接口的数据
function registrationList(departmentList,levelList,callback){
    //模拟实现
    var percent = Math.ceil(departmentList/levelList*100)
    setTimeout(function(){
        callback(percent)
    },Math.random()*1000)
}

引语

或许你觉得我这篇文章写的很傻，和无聊，但是我跟你说，即使你从事VUE开发一段时间，也不见得求在一些小问题上所求甚解。

有些人认为的VUE版本检查命令是：

1

vue -V

或者

1

vue --version

如下图

概述

如果VUE权限控制问题困扰着你，那么这篇文章将拯救你。关于VUE的前台路由控制和视图控制是大家最需要的前端技术解决方案。

Vue-Access-Control

本解决方案是基于 Vue-Access-Control 进行改造的，深度剖析了里面的路由控制和视图控制（资源控制还是后台做比较靠谱）

心路历程

1. 权限数据由后台接口获得（权限树），但是前端不能贸然存储到本地浏览器里（localStorage、sessionStorage、Cookie等），如果被恶意篡改，麻烦可就大了!!!!!
2. 想要用 VUEX （状态管理模式）来存储，但是网页一刷新，就会被重置成空，所以我推断 VUEX 适合用在 “无刷新” 的 APP 中；再者，权限树这么复杂的结构，并不是 VUEX 所实现的 “共享状态” 模式，只是单一的对每个页面（路由控制）、按钮（视图控制）、接口（请求控制）
3. 针对实际的应用场景，请求控制，就是某个角色是否有调用某个接口的权限，这种后台会做权限控制的，没有权限会给你报401的，只有“路由控制”和“视图控制”是前端人员需要去解决的。
4. 对于 Vue-Access-Control 这套权限解决方案貌似也有不完美之处，不能贴合实际的开发需要，需要稍作调整，比如路由嵌套两层还是可以使用的，要是三层及其以上就得修改递归的函数了。