js 异步加锁

ericshi

浏览器中js是单线程的，所以一直没有锁的概念。但是随着标准的发展，js支持了单线程中的异步，甚至node和h5对真正多线程的支持，锁的概念需要在js中获得应用。

简单的场景

1、(写法的优点)单个文件内，点击按钮获取表格数据后通知后台

//入口方法
main()
function main(){
axios.get('/token')
  .then(function(response){
    //刷新表格数据的代码
    //再次发送请求
    axios.post('/refresh').then(
    //dosomething
  .catch(function(err){
    console.log(err);

可以很明显的看到需要把所有的逻辑写到一个方法内，很长一串，不利于多个文件的模块化顶层方法的提取和阅读。但是相对以前的回调地狱写法已经优秀了不少。

//入口方法
async main() {
    lock.lock()
    let data = getPage()
    await lock
    setData(data)
    refresh()
getPage(){
//获取数据代码
lock.unlock

我们的目标是这样的写法，只要阅读顶层方法就能清楚地知道做了什么。也可以将各种方法从一个文件中抽离，有利于模块化。

2、（逻辑的优点）token过期，重新获取到token之前将token加锁，其他请求中断等待token刷新。这种场景使用锁的概念更符合思维逻辑。

简单的时序锁

function sampleLock() {
    this.callback = null
    this.status = new Promise((resolve) => {resolve(true)})
    this.lock = function() {
        this.status = new Promise((resolve) => {callback = resolve})
        console.log("locked")
    this.unlock = function() {callback(true)}
var lock =new sampleLock()
lock.lock()
async function main() {
    console.log("start")
    await lock.status
    //dosome
    console.log("finish")
main()
lock.unlock()
console.log("unlocked")