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

我想使用

fetch（）

执行http请求。请求不止一个来自同一个域（只是不同的端点）

• ${keyword}/bahasa/id/mulai/0/limit/100
• ${chapter}/ayat/${verse}
• ${num}

我的代码如下所示：

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
);

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

如果getData返回'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);
         })
   }

---

代码运行正常。我只是想知道，有没有简单的方法来编写它？

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

在您的情况下，以下是不同之处：

函数的参数

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

，让它们转义特殊字符。

FYI，您不需要

承诺。在承诺回调中解决
和
承诺。拒绝
；您可以返回或抛出。谢谢您提供的信息。我是JSI新手如果你的代码工作正常，你只是想检查一下，试试看。我得到了它。这更简单。我想我不能用函数来封装这些差异。我必须更努力地学习。谢谢你的建议