Vue3的watchEffect实现：可以取消的慢速请求

实现的效果

1. 使用DOM+Vue的原理性实现示例：

    
    
    
    
    



    
正在获取0号用户的信息
    获取用户数据
    


    
    

2. 使用响应式+VDom的完整实现：

    
    
    
    
    


    

        
正在获取第{{id}}号的信息
        获取用户信息
        

            
{{u}}
        
    
    

3. 结合axios，异步方法，自定义指令的版本：

    
    
    
    
    
    


    

        
正在获取第{{id}}号的信息
        获取 {{id}} 号用户信息{{wattingInfo}}
        

            
{{u}}
        
    
    

4.附录： 慢速服务的egg.js实现：

'use strict';

const Controller = require('egg').Controller;
function fn(){
  return new Promise((resolv,reject)=>{
    setTimeout(()=>{
      resolv("johnyu"+Math.random())
    },2000)
  })
}
class HomeController extends Controller {
  async index() {
    const { ctx } = this;
    let id=ctx.request.query.id
    //一个延迟3秒的异步访问
    const info=await fn()
    ctx.body = "用户："+id +"的详细信息";
  }
}

module.exports = HomeController;