How to use Promise and setTimeout to mock an API call in JavaScript All In One

xgqfrms / 2023-09-09 / 原文

How to use Promise and setTimeout to mock an API call in JavaScript All In One

如何使用 Promise 和 setTimeout 在 JavaScript 中模拟一个 API 调用

args `list` version

const getMockData = async (data = '', error = 'unknown server error', delay) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if(!!data) {
        resolve({
          type: 'Success ✅',
          data,
        });
      } else {
        reject({
          type: 'Error ❌',
          message: error,
        });
      }
    }, delay || 1000);
  });
}

// test cases
(async () => {
  try {
    const success = await getMockData([1,2,3]);
    console.log(success.data);
  } catch (err) {
    console.log(err.message);
  }
  try {
    const error = await getMockData('', '404 not found error', 3000);
    console.log(error);
  } catch (err) {
    console.log(err.message);
  }
})();

args `object` version


const getMockData = async (options = {
  data: '',
  error: 'unknown server error',
  delay: null
}) => {
  const {data, error, delay} = options;
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if(!!data) {
        resolve({
          type: 'Success ✅',
          data,
        });
      } else {
        reject({
          type: 'Error ❌',
          message: error,
        });
      }
    }, delay || 1000);
  });
}

// test cases
(async () => {
  try {
    const success = await getMockData({data: [1,2,3]});
    console.log(success.data);
  } catch (err) {
    console.log(err.message);
  }
  try {
    const error = await getMockData({error: '404 not found error', delay: 3000});
    console.log(error);
  } catch (err) {
    console.log(err.message);
  }
})();

destructured parameter with default value assignment

function aobject arguments default values

const getMockData = async ({
  data = '',
  error = 'unknown server error',
  delay = null,
}) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if(!!data) {
        resolve({
          type: 'Success ✅',
          data,
        });
      } else {
        reject({
          type: 'Error ❌',
          message: error,
        });
      }
    }, delay || 1000);
  });
}

// test cases
(async () => {
  try {
    const success = await getMockData({data: [1,2,3]});
    console.log(success.data);
  } catch (err) {
    console.log(err.message);
  }
  try {
    const error = await getMockData({error: '404 not found error', delay: 3000});
    console.log(error);
  } catch (err) {
    console.log(err.message);
  }
})();

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters#destructured_parameter_with_default_value_assignment

https://www.typescriptlang.org/docs/handbook/2/objects.html#optional-properties

https://stackoverflow.com/questions/894860/set-a-default-parameter-value-for-a-javascript-function

API 请求 timeout `超时重试`

js 使用 Promise 实现 Fetch 请求超时重试

demos


// await new Promise((resolve, reject) => {setTimeout(() => resolve(`OK ✅`), 3000)});
// await new Promise((resolve, reject) => {setTimeout(() => reject(`Error ❌`), 3000)});

;(async () => {
  console.log(`promise delay 3 seconds`)
  // delay
  await new Promise((resolve, reject) => {setTimeout(() => resolve(`OK ✅`), 3000)});
  // await new Promise((resolve, reject) => {setTimeout(() => reject(`Error ❌`), 3000)});
  console.log(`promise delay 3 seconds ✅`)
  const antiCrawler = document.querySelector(`#anti-crawler`);
  if(antiCrawler?.firstElementChild) {
    // auto add original url
    antiCrawler.firstElementChild.href = window.location.href;
    antiCrawler.firstElementChild.innerText = window.location.href;
  }
})();