帮助和配置文件
帮助和配置文件
助手和配置文件是软件开发中的重要组成部分,它们有助于组织代码、管理设置以及简化重复性任务。
- 首先我们创建一个关于辅助的配置文件
- 例如我们的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;
}
};