当前位置: 首页 > article >正文

帮助和配置文件

帮助和配置文件

助手和配置文件是软件开发中的重要组成部分,它们有助于组织代码、管理设置以及简化重复性任务。

  • 首先我们创建一个关于辅助的配置文件

在这里插入图片描述

  • 例如我们的API URL,在程序中请求一般不止一次,而且如果URL有变动我们需要修改多个地方,我们可以创建一个单独的JS用来简化重复性任务;
export const API_URL = 'https://forkify-api.herokuapp.com/api/v2/recipes';
  • 之后需要在model中进行引用
import { API_URL } from './config.js';
  • 接着就将URL进行变量替换了
const res = await fetch(`${API_URL}/${id}`);

在这里插入图片描述

  • 配置文件先这样,创建一个帮助的文件
export const getJSON = async function (url) {
  try {
    const res = await fetch(url);
    const data = await res.json();
    if (!res.ok) throw new Error(`${data.message} (${res.status})`);
    return data;
  } catch (err) {
    console.log(err);
  }
};

  • 将请求放入单独的文件后,我们依然在model中引入一下,然后将重复性代码进行更换
import { getJSON } from './helpers.js';

export const loadRecipe = async function (id) {
  try {
    const data = await getJSON(`${API_URL}/${id}`);
    const { recipe } = data.data;
    state.recipe = {
      id: recipe.id,
      title: recipe.title,
      publisher: recipe.publisher,
      sourceUrl: recipe.source_url,
      image: recipe.image_url,
      servings: recipe.servings,
      cookingTime: recipe.cooking_time,
      ingredients: recipe.ingredients,
    };
    console.log(state.recipe);
  } catch (err) {
    console.error(`${err}😰😰😰`);
  }
};

  • 这样我们基本上就完成了辅助和配置的文件,但是我们还要为getJSON函数加上一些定时之类的,让其变得更加的健壮,事件在控制器中写过,我们直接复制过来就好;
const timeout = function (s) {
  return new Promise(function (_, reject) {
    setTimeout(function () {
      reject(new Error(`Request took too long! Timeout after ${s} second`));
    }, s * 1000);
  });
};

export const getJSON = async function (url) {
  try {
   const res = await Promise.race([fetch(url), timeout(5)]);
    const data = await res.json();
    if (!res.ok) throw new Error(`${data.message} (${res.status})`);
    return data;
  } catch (err) {
    throw err;
  }
};

  • 所以配置文件我们将一些配置项放入里面,以便更好的扩展和维护,比如将超时的时间也放入配置的文件中
export const TIMEOUT_SEC = 10;
import { TIMEOUT_SEC } from './config.js';
export const getJSON = async function (url) {
  try {
    const res = await Promise.race([fetch(url), timeout(TIMEOUT_SEC)]);
    const data = await res.json();
    if (!res.ok) throw new Error(`${data.message} (${res.status})`);
    return data;
  } catch (err) {
    throw err;
  }
};

http://www.kler.cn/a/586478.html

相关文章:

  • DataWhale 大语言模型 - Transformer模型介绍
  • MindGYM:一个用于增强视觉-语言模型推理能力的合成数据集框架,通过生成自挑战问题来提升模型的多跳推理能力。
  • Redis分布式锁深度剖析:从原理到Redisson实战,破解脑裂与高并发锁难题
  • Android 打包module为jar和aar包 基础
  • 从网络通信探究分布式通信的原理
  • 【零基础入门unity游戏开发——进阶篇】Marhf和Math的使用
  • 【每日学点HarmonyOS Next知识】tab对齐、相对布局、自定义弹窗全屏、动画集合、回到桌面
  • HarmonyOS第21天:解锁分布式技术,开启跨设备协同新体验
  • 前端开发:混合技术栈的应用
  • 用SpringBoot做一个web小案例配置拦截器判断登录状态
  • 侯捷 C++ 课程学习笔记:进阶语法之lambda表达式(二)
  • Webpack 知识点整理
  • 缓存id路由页面返回,历史路由栈
  • leetcode51.N 皇后 回溯算法求解 + 效率优化
  • python离线安装
  • 【每日八股】Golang篇(四):GMP
  • vscode编译器的一些使用问题
  • 【人工智能】Transformer、BERT、GPT:区别与联系
  • Dubbo请求调用本地服务
  • Linux———迷你在线商城