代码之家  ›  专栏  ›  技术社区  ›  Aristocles

许诺抛出错误后是否继续执行所有提取?

fetch-api promise javascript
  •  1
  • Aristocles  · 技术社区  · 2 年前

    我试图从WordPress开发者参考站点获取JSON数据。我需要搜索关键字,而不知道它是函数、类、钩子还是方法,这是我需要获取的url的一部分。所以我用承诺。all循环浏览所有可能的URL。如果 response.status <= 299 ,立即抛出错误,如果响应正常,则继续 .then . 很好,但如果JSON存在并且只返回空数组,则偶尔会返回ok状态。所以我需要检查JSON数据是否为空数组,这在第一部分中似乎无法做到。据我所知,我只能查到第二部分。如果它抛出错误,它不会继续尝试其他URL。有什么建议吗? 

    var keyword = 'AtomParser';
const refs = ['function', 'hook', 'class', 'method'];

// Store the promises
let promises = [];

// Cycle through each type until we find one we're looking for
for (let t = 0; t < refs.length; t++) {
  const url =
    'https://developer.wordpress.org/wp-json/wp/v2/wp-parser-' +
    refs[t] +
    '?search=' +
    keyword;
  // console.log(url);
  promises.push(fetch(url));
}
Promise.all(promises)
  .then(function(response) {
    console.log(response[0]);

    // Get the status
    console.log('Status code: ' + response[0].status);
    if (response[0].status <= 299) {
      // The API call was successful!
      return response[0].json();
    } else {
      throw new Error('Broken link status code: ' + response[0].status);
    }
  })
  .then(function(data) {
    // This is the HTML from our response as a text string
    console.log(data);

    // Make sure we have data
    if (data.length == 0) {
      throw new Error('Empty Array');
    }

    // ref
    const reference = data[0];

    // Only continue if not null or empty
    if (reference !== null && reference !== undefined && data.length > 0) {
      // Success
      // Return what I want from the reference
    }
  })
  .catch(function handleError(error) {
    console.log('Error' + error);
  });

    有没有办法在第一部分中获取JSON数据,以便在检查响应状态时检查它是否在数组中?

    1 回复  |  直到 2 年前
        1
  •  0
  •   Phil    2 年前

    我建议封装单个请求的成功/失败逻辑,然后您可以根据封装的结果确定所有已解决和被拒绝的响应。

    例如 

    const checkKeyword = async (ref, keyword) => {
  const params = new URLSearchParams({ search: keyword });
  const res = await fetch(
    `https://developer.wordpress.org/wp-json/wp/v2/wp-parser-${encodeURIComponent(
      ref
    )}?${params}`
  );

  if (!res.ok) {
    throw new Error(`${res.status}: ${await res.text()}`);
  }

  const data = await res.json();

  if (data.length === 0) {
    throw new Error(`Empty results for '${ref}'`);
  }

  return { ref, data };
};

    现在你可以使用类似 Promise.any() 或 Promise.allSettled() 分别查找第一个成功请求或所有成功请求 

    const keyword = "AtomParser";
const refs = ["function", "hook", "class", "method"];

const promises = refs.map((ref) => checkKeyword(ref, keyword));

// First success
Promise.any(promises)
  .then(({ ref, data }) => {
    console.log(ref, data);
  })
  .catch(console.error);

// All successes
Promise.allSettled(promises)
  .then((responses) =>
    responses.reduce(
      (arr, { status, value }) =>
        status === "fulfilled" ? [...arr, value] : arr,
      []
    )
  )
  .then((results) => {
    // results has all the successful responses
  });
        2
  •  -1
  •   Mulan    2 年前

    wp模块

    @菲尔的回答是让你走上正确的轨道,但我想帮你更多。使用 URLSearchParamas 很好,但你可以做得更好。而不是使用 encodeURIComponent 并手动构造搜索参数,使用高级 URL 应用程序编程接口。注意,我把这个代码放在它自己的代码中 wp 这样我可以更容易地分离关注点。我们不希望所有这些代码都泄漏到您的主程序中。 

    // wp.js

const baseURL = "https://developer.wordpress.org"

async function search1(path, query) {
  const u = new URL(path, baseURL)
  u.searchParams.set("search", query)
  const result = await fetch(u)
  if (!result.ok) throw Error(`Search failed (${result.status}): ${u}`)
  return result.json()
}

    search1 搜索a 一 路径,但我们可以写 search 搜索所有必要的路径。我不认为有任何理由对这里的每一条路都感兴趣,所以请把它们写下来- 

    // wp.js (continued)

function search(query) {
  const endpoints = [
    "/wp-json/wp/v2/wp-parser-function",
    "/wp-json/wp/v2/wp-parser-hook",
    "/wp-json/wp/v2/wp-parser-class",
    "/wp-json/wp/v2/wp-parser-method"
  ]
  return Promise
    .all(endpoints.map(e => search1(e, query)))
    .then(results => results.flat())
}

export { search }

    主模块

    注意,我们只导出了 搜索 像 搜索1 是内部的 可湿性粉剂 单元让我们看看如何在我们的 main 模块现在- 

    // main.js

import { search } from "./wp.js"

for (const result of await search("database"))
  if(result.guid.rendered)
    console.log(`${result.title.rendered}\n${result.guid.rendered}\n`)

    在本例中,我们首先搜索“数据库”- 

    wp_should_replace_insecure_home_url()
https://developer.wordpress.org/reference/functions/wp_should_replace_insecure_home_url/

wp_delete_signup_on_user_delete()
https://developer.wordpress.org/reference/functions/wp_delete_signup_on_user_delete/

get_post_datetime()
https://developer.wordpress.org/reference/functions/get_post_datetime/

wp_ajax_health_check_get_sizes()
https://developer.wordpress.org/reference/functions/wp_ajax_health_check_get_sizes/

wp_should_replace_insecure_home_url
https://developer.wordpress.org/reference/hooks/wp_should_replace_insecure_home_url/

comments_pre_query
https://developer.wordpress.org/reference/hooks/comments_pre_query/

users_pre_query
https://developer.wordpress.org/reference/hooks/users_pre_query/

WP_Object_Cache
http://developer.wordpress.org/reference/classes/wp_object_cache/

wpdb
http://developer.wordpress.org/reference/classes/wpdb/

WP_REST_Menu_Items_Controller::prepare_item_for_database()
https://developer.wordpress.org/reference/classes/wp_rest_menu_items_controller/prepare_item_for_database/

WP_REST_Global_Styles_Controller::prepare_item_for_database()
https://developer.wordpress.org/reference/classes/wp_rest_global_styles_controller/prepare_item_for_database/

WP_REST_Menus_Controller::prepare_item_for_database()
https://developer.wordpress.org/reference/classes/wp_rest_menus_controller/prepare_item_for_database/

WP_REST_Templates_Controller::prepare_item_for_database()
https://developer.wordpress.org/reference/classes/wp_rest_templates_controller/prepare_item_for_database/

WP_REST_Application_Passwords_Controller::prepare_item_for_database()
https://developer.wordpress.org/reference/classes/wp_rest_application_passwords_controller/prepare_item_for_database/

wpdb::db_server_info()
https://developer.wordpress.org/reference/classes/wpdb/db_server_info/

WP_REST_Attachments_Controller::insert_attachment()
https://developer.wordpress.org/reference/classes/wp_rest_attachments_controller/insert_attachment/

WP_Debug_Data::get_database_size()
https://developer.wordpress.org/reference/classes/wp_debug_data/get_database_size/

WP_REST_Meta_Fields::update_multi_meta_value()
https://developer.wordpress.org/method/wp_rest_meta_fields/update_multi_meta_value/

    另一个搜索示例

    现在让我们搜索“图像”- 

    for (const result of await search("image"))
  if(result.guid.rendered)
    console.log(`${result.title.rendered}\n${result.guid.rendered}\n`)

    get_adjacent_image_link()
https://developer.wordpress.org/reference/functions/get_adjacent_image_link/

get_next_image_link()
https://developer.wordpress.org/reference/functions/get_next_image_link/

get_previous_image_link()
https://developer.wordpress.org/reference/functions/get_previous_image_link/

wp_robots_max_image_preview_large()
https://developer.wordpress.org/reference/functions/wp_robots_max_image_preview_large/

wp_getimagesize()
https://developer.wordpress.org/reference/functions/wp_getimagesize/

is_gd_image()
https://developer.wordpress.org/reference/functions/is_gd_image/

wp_show_heic_upload_error()
https://developer.wordpress.org/reference/functions/wp_show_heic_upload_error/

wp_image_src_get_dimensions()
https://developer.wordpress.org/reference/functions/wp_image_src_get_dimensions/

wp_image_file_matches_image_meta()
https://developer.wordpress.org/reference/functions/wp_image_file_matches_image_meta/

_wp_check_existing_file_names()
https://developer.wordpress.org/reference/functions/_wp_check_existing_file_names/

edit_custom_thumbnail_sizes
https://developer.wordpress.org/reference/hooks/edit_custom_thumbnail_sizes/

get_header_image_tag_attributes
https://developer.wordpress.org/reference/hooks/get_header_image_tag_attributes/

image_editor_output_format
https://developer.wordpress.org/reference/hooks/image_editor_output_format/

wp_image_src_get_dimensions
https://developer.wordpress.org/reference/hooks/wp_image_src_get_dimensions/

wp_get_attachment_image
https://developer.wordpress.org/reference/hooks/wp_get_attachment_image/

image_sideload_extensions
https://developer.wordpress.org/reference/hooks/image_sideload_extensions/

wp_edited_image_metadata
https://developer.wordpress.org/reference/hooks/wp_edited_image_metadata/

wp_img_tag_add_loading_attr
https://developer.wordpress.org/reference/hooks/wp_img_tag_add_loading_attr/

wp_image_file_matches_image_meta
https://developer.wordpress.org/reference/hooks/wp_image_file_matches_image_meta/

get_custom_logo_image_attributes
https://developer.wordpress.org/reference/hooks/get_custom_logo_image_attributes/

Custom_Image_Header
http://developer.wordpress.org/reference/classes/custom_image_header/

WP_Image_Editor_Imagick
http://developer.wordpress.org/reference/classes/wp_image_editor_imagick/

WP_Embed
http://developer.wordpress.org/reference/classes/wp_embed/

WP_Image_Editor
http://developer.wordpress.org/reference/classes/wp_image_editor/

WP_Customize_Background_Image_Setting
http://developer.wordpress.org/reference/classes/wp_customize_background_image_setting/

WP_Customize_Header_Image_Setting
http://developer.wordpress.org/reference/classes/wp_customize_header_image_setting/

WP_Image_Editor_GD
http://developer.wordpress.org/reference/classes/wp_image_editor_gd/

WP_Customize_Header_Image_Control
http://developer.wordpress.org/reference/classes/wp_customize_header_image_control/

WP_REST_Server::add_image_to_index()
https://developer.wordpress.org/reference/classes/wp_rest_server/add_image_to_index/

WP_REST_URL_Details_Controller::get_image()
https://developer.wordpress.org/reference/classes/wp_rest_url_details_controller/get_image/

WP_Image_Editor::get_default_quality()
https://developer.wordpress.org/reference/classes/wp_image_editor/get_default_quality/

WP_Theme_JSON::get_blocks_metadata()
https://developer.wordpress.org/reference/classes/wp_theme_json/get_blocks_metadata/

WP_Image_Editor_Imagick::pdf_load_source()
https://developer.wordpress.org/reference/classes/wp_image_editor_imagick/pdf_load_source/

WP_Image_Editor_Imagick::write_image()
https://developer.wordpress.org/reference/classes/wp_image_editor_imagick/write_image/

WP_Image_Editor_Imagick::maybe_exif_rotate()
https://developer.wordpress.org/reference/classes/wp_image_editor_imagick/maybe_exif_rotate/

WP_Image_Editor_Imagick::make_subsize()
https://developer.wordpress.org/reference/classes/wp_image_editor_imagick/make_subsize/

WP_Image_Editor_GD::make_subsize()
https://developer.wordpress.org/reference/classes/wp_image_editor_gd/make_subsize/

    空搜索结果

    搜索“zzz”不会产生任何结果- 

    for (const result of await search("zzz"))
  if(result.guid.rendered)
    console.log(`${result.title.rendered}\n${result.guid.rendered}\n`)

    <empty result>
    推荐文章
    Gourav Srivastava  ·  我应该如何使用回调来获得期望的结果?
    2 年前
    tomography  ·  更改承诺类型
    2 年前
    Aristocles  ·  许诺抛出错误后是否继续执行所有提取?
    2 年前
    Centurion22  ·  异步函数内的异步映射函数未定义响应数据
    2 年前
    Scott Thiessen  ·  完成后逃离承诺链[重复]
    6 年前
    adcomptyler  ·  向Twilio视频快速启动添加静音按钮
    6 年前
    JWiley  ·  带有FileReader的Promise函数过早解析
    6 年前
    John Lippson  ·  在所有异步函数完成后执行函数?
    6 年前
    cody  ·  NodeJS eventloop执行顺序(process.nextTick和promise)
    6 年前
    ctf0  ·  解析嵌套承诺后运行函数
    6 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号