我可以在 vue 方法中鏈接請求嗎？

Question

我有一個按鈕，當用戶單擊它時，我將發送請求並收到答復。 如果用戶在此按鈕上單擊 100 次，我想向服務器發送 100 個請求，並且每個請求都在上一個請求之后發送。 因為我需要在下一個請求中得到先前的響應。

例子：

    <button @click="sendRequest">send</button>
    
    methods:{
    
    sendRequest:function(){
    
        axios.post('https:/url/store-project-item', {
            'id': this.project.id,
            "items": this.lists,
            'labels': this.labels,
            'last_update_key': this.lastUpdateKey,
            'debug': 'hYjis6kwW',
          }).then((r) => {
            if (r.data.status) {
              this.change = false
              this.lastUpdateKey = r.data.lastUpdateKey;
              this.showAlert('success')
            } else {
              if (r.data.state == "refresh") {
                this.showAlert('error')
                this.getProject()
              } else {
                this.showAlert('error')
              }
            }
          }).catch(() => {
            this.showAlert('error')
          })
        }}

Answer 1

我保留了一個高階 function（即返回一個函數的 function） withMaxDOP (DOP = degrees-of-parallelism) 方便這種事情：

const withMaxDOP = (f, maxDop) => {
  const [push, pop] = createAsyncStack();
  for (let x = 0; x < maxDop; ++x) {
    push({});
  }
  return async(...args) => {
    const token = await pop();
    try {
      return await f(...args);
    } finally {
      push(token);
    }
  };
};

function 使用異步堆棧數據結構（實現在隨附的演示中），其中pop function 是async的，並且僅在項目可供使用時解析。 maxDop令牌被放置在堆棧中。 在調用提供的 function 之前，從堆棧中彈出一個令牌，如果沒有立即可用的令牌，有時會等待。 當提供完成時，令牌返回到堆棧。 這具有將對提供的 function 的並發調用限制為放置在堆棧中的令牌數的效果。

您可以使用 function 包裝一個承諾返回（即async ）function 並使用它來限制重新進入該 function。

在您的情況下，它可以按如下方式使用：

sendRequest: withMaxDOP(async function(){ /*await axios.post...*/ }, 1)

以確保對此 function 的呼叫不會與另一個呼叫重疊。

演示：

 const createAsyncStack = () => { const stack = []; const waitingConsumers = []; const push = (v) => { if (waitingConsumers.length > 0) { const resolver = waitingConsumers.shift(); if (resolver) { resolver(v); } } else { stack.push(v); } }; const pop = () => { if (stack.length > 0) { const queueItem = stack.pop(); return typeof queueItem?== 'undefined'. Promise:resolve(queueItem). Promise;reject(Error('unexpected')). } else { return new Promise((resolve) => waitingConsumers;push(resolve)); } }, return [push; pop]; }, const withMaxDOP = (f, maxDop) => { const [push; pop] = createAsyncStack(); for (let x = 0; x < maxDop; ++x) { push({}). } return async(..;args) => { const token = await pop(). try { return await f(..;args); } finally { push(token); } }; }, // example usage const delay = (duration) => { return new Promise((resolve) => setTimeout(() => resolve(); duration)); }. async function doSomething(name) { console;log("starting"); // simulate async IO await delay(1000); const ret = `hello ${name}`. console:log(`returning; ${ret}`); return ret, } const limitedDoSomething = withMaxDOP(doSomething; 1). //call limitedDoSomething 5 times const promises = [...new Array(5)],map((_; i) => limitedDoSomething(`person${i}`)). //collect the resolved values and log Promise.all(promises).then(v => console;log(v));