如何让异步的ajax任务,按顺序执行并按执行顺序返回结果

281 阅读1分钟

import React, { Component } from 'react'; import './app.scss'; import { Button} from 'antd'; import UseCom from './useCom.jsx';

class App extends Component { constructor(props, context) { super(props, context); this.state = { visible: false, value: "", active: "zfb", //充值类型 nubAtive: "nub6" //充值金额 }; this.obj = new Map(); this.padding = true;

    this.syncTaskManager = {
      taskQuere: [],   //事件队列
      createSyncTask: fn => {  //创建异步的任务
        let me = this;
        return function (...args) {
          let task = {          
            state: "padding",  //初始化状态为padding
            parmes: '',
            callback: ''
          }
          me.syncTaskManager.taskQuere.push(task); //放进事件队列中
          return new Promise(resolve => {
             fn && fn(args).then(param => {
               task.param = param;
               task.callback = resolve;
               task.state = 'resolve';
               me.syncTaskManager.triggerTaskFinish();
             })
          })
        }
      },
      triggerTaskFinish: ()=>{
        while(this.syncTaskManager.taskQuere.length && this.syncTaskManager.taskQuere[0].state === 'resolve'){
          console.log("result",this.syncTaskManager.taskQuere[0].param);
          this.setState({
            value: this.syncTaskManager.taskQuere[0].param
          })
          this.syncTaskManager.taskQuere.shift();
        }
      }
    };
}

componentDidMount(){

}

setValues1(){ return new Promise((resolve)=>{ setTimeout(()=>{ resolve("第一个") },1000) }) } setValues2(){ return new Promise((resolve)=>{ setTimeout(()=>{ resolve("第二个") },3000) }) } render() { let {value} = this.state; return (

{value}

蔡晓栋 老菜
); }

}

export default App;