有没有简单的方法来获取多个请求

Question

我想使用 fetch() 进行 http 请求。请求不止来自同一域（只是端点不同）。

https://api.banghasan.com/quran/format/json/cari/${关键字}/bahasa/id/mulai/0/limit/100
https://api.banghasan.com/quran/format/json/surat/${chapter}/ayat/${verse}
https://api.banghasan.com/quran/format/json/catatan/${num}

我的代码是这样的：

获取第一个数据（章节数）：

static getData(keyword) {

      return fetch(`https://api.banghasan.com/quran/format/json/cari/${keyword}/bahasa/id/mulai/0/limit/100`)
         .then(resolve => {
            return resolve.json()
         })
         .then(rj => {
            if (rj.status == 'ok') {
               return Promise.reject(`The "${keyword}" keyword is not found`);
            } else {
               return Promise.reject(`Something Wrong`)
            }
         })
         .catch(error => {
            return Promise.reject(error);
         })
   }

if getData return `resolve',有章节数然后，获取经文：

   static async getAyat(surat, ayat) {
      return fetch(`https://api.banghasan.com/quran/format/json/surat/${surat}/ayat/${ayat}`)
         .then(resolve => {
            return resolve.json()
         })
         .then(rj => {
            if (rj.status == 'ok') {
               return Promise.resolve(rj.ayat.data);
            } else {
               return Promise.reject('Terjadi kesalahan')
            }
         })
         .catch(error => {
            return Promise.reject(error);
         })
   }

最后，获取注释，如果诗句有解释的话

static getNote(num) {
      return fetch(`https://api.banghasan.com/quran/format/json/catatan/${num}`)
         .then(resolve => {
            return resolve.json()
         })
         .then(rj => {
            if (rj.status == 'ok') {
               return Promise.resolve(rj.catatan.teks)
            } else {
               return Promise.reject('Terjadi kesalahan')
            }
         })
         .catch(error => {
            return Promise.reject(error);
         })
   }

代码运行正常。我就想知道，有没有简单的写法？

Answer 1

使用函数。问问自己哪些部分是相同的，哪些是不同的，然后把不同的部分作为参数。

对于您的情况，有以下不同之处：

函数的参数
URL一代
您从响应中提取的数据

下面是创建函数来封装这些差异的方法：

const baseUrl = 'https://api.banghasan.com/quran/format/json';
const returnAllData = data => data;

function createFetchMethod(urlBuilder, dataExtractor = returnAllData) {
  return async (...params) => {
    const url = urlBuilder(...params);
    const response = await fetch(`${baseUrl}${url}`);
    if (!response.ok) {
      throw new Error("Something's wrong");
    }

    const json = await response.json();
    if (json.status !== 'ok') {
      throw new Error("Something's wrong");
    }

    return dataExtractor(json);
  }
}

您使用它的方式是像这样创建您的方法：

const getData = createFetchMethod(
  keyword => `/cari/${keyword}/bahasa/id/mulai/0/limit/100`
);
const getAyat = createFetchMethod(
  (surat, ayat) => `/surat/${surat}/ayat/${ayat}`,
  json => json.ayat.data
);
const getNote = createFetchMethod(
  num => `/catatan/${num}`,
  json => json.catatan.teks
);

现在可以像以前一样调用这些，只是封装了所有的错误处理。您可以通过添加更多参数来进一步自定义。

请注意，您的 URL 构建代码的一个潜在问题是，如果注入的参数不 URL 安全，您需要调用 encodeURIComponent 让它们逃避特殊字符。

有没有简单的方法来获取多个请求

is there simple way to fetch more than one request

javascript

httprequest

fetch