Sunny-117 / js-challenges

✨✨✨ Challenge your JavaScript programming limits step by step

Home Page:https://juejin.cn/column/7244788137410560055

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

实现 如果上一次的没请求完,之后的就无响应

Sunny-117 opened this issue · comments

实现 如果上一次的没请求完,之后的就无响应

let runningTask = 0;
async function callAsyncFunction(promiseFn) {
if(runningTask===0){
console.log("Calling async function...");
runningTask++;
// 将 promiseFn 包装成一个新的 Promise,以便可以在其执行完毕后进行下一步操作
// 返回当前的 promise,以便可以在外部处理其结果
return new Promise(async (resolve, reject) => {
try {
// await不会捕获错误,所以用try...catch
const result = await promiseFn();
resolve(result);
runningTask--;
} catch (err) {
reject(err);
runningTask--;
}
});
}else{
return null;
}
}

commented

let isRequesting = false

function myRequest(url) {
if (isRequesting) {
return Promise.reject('请求中')
}

isRequesting = true
return fetch(url)
.then((res) => {
isRequesting = false
return res.json()
})
.catch((err) => {
isRequesting = false
throw err
})
}

myRequest('https://jsonplaceholder.typicode.com/todos/1')
.then((res) => {
console.log(res)
})
.catch((err) => {
console.log(err)
})

myRequest('https://jsonplaceholder.typicode.com/todos/5')
.then((res) => {
console.log(res)
})
.catch((err) => {
console.log(err)
})

myRequest('https://jsonplaceholder.typicode.com/todos/4')
.then((res) => {
console.log(res)
})
.catch((err) => {
console.log(err)
})

myRequest('https://jsonplaceholder.typicode.com/todos/3')
.then((res) => {
console.log(res)
})
.catch((err) => {
console.log(err)
})

myRequest('https://jsonplaceholder.typicode.com/todos/2')
.then((res) => {
console.log(res)
})
.catch((err) => {
console.log(err)
})

function promiseWrapper(fetchApi) {
let oldReqPromise = Promise.resolve();
const doRequest = () => {
const newReqPromise = oldReqPromise.then(() => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("data");
}, 1000);
});
});
oldReqPromise = newReqPromise;
return newReqPromise;
};
return doRequest;
}

// 测试用例
const request = promiseWrapper();

request().then(() => {
console.log("第一次请求完成");
});

request().then(() => {
console.log("第二次请求完成");
});

setTimeout(() => {
request().then(() => {
console.log("第三次请求完成");
});
}, 1500);

是不是考promise的链式执行?

// 使用调度器实现,控制并发为1
class Scheduler {
  constructor (maxTask) {
    // 最大并发量
    this.maxTask = maxTask
    // 任务队列
    this.queue = []
    // 当前执行任务的数量
    this.currentTask = 0
  }
  
  // 添加任务
  addTask (task) {
    return new Promise((resolve, reject) => {
      this.queue.push({
        task,
        resolve,
        reject
      })
      this.runTask()
    })
  }
  
  // 执行任务
  runTask () {
    // 未达到最大并发量
    while (this.currentTask < this.maxTask && this.queue.length > 0) {
      const { task, resolve, reject } = this.queue.shift()
      // 当前执行的任务
      this.currentTask++
      task().then(resolve, reject).finally(() => {
        this.currentTask--
        this.runTask()
      })
    }
  }
}

// 示例任务函数
function createTask (time) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve();
    }, time);
  });
}

// 创建调度器实例,设置并发数为2
const scheduler = new Scheduler(1);

function add (time, name) {
  scheduler.addTask(() => createTask(time)).then(() => {
    console.log(name)
  })
}

add(1000, 1)
add(1000, 2)
add(1000, 3)