Функция fetch() для получения одного сообщения из массива сообщений

Я следую учебнику и написал следующую функцию fetch(), когда инструктор попросил попробовать ее самостоятельно.

const API_URL = "http://localhost:3000/api/posts/";
const API_BASE_URL = "http://localhost:3000/";

window.onload = () => {
    getPost();
    getPostIdParam()
}

const getPostIdParam=()=>{
    const queryString= window.location.search;
    const urlParams=new URLSearchParams(queryString)
    return urlParams.get("id")
    console.info(urlParams)
}

const getPost = () => 
    {
        fetch(API_URL,{
            method:'GET'
        }).then((response)=>{
            return response.json()
        }).then((data)=>{
            buildPost(data)
        })
    }
    

const buildPost = (data) => {

    let postId=getPostIdParam()
    let post= data.find(x =>x.id == postId)
     console.info("post title"+ JSON.stringify(post) )
     const postDate= new Date(parseInt(post.added_date)).toDateString()
     let postPrint=`
     <div id = "individual-post-title">
            ${post.title}
     </div>
     <div id = "individual-post-date">${postDate}</div>
     <div id = "individual-post-content"> ${post.content}
     </div>
            `
            document.querySelector('.blog-inner').innerHTML
=postPrint


}

Однако код инструктора fetch() выглядит так

window.onload = () => {
    getPost();
    getPostIdParam()
}

const getPostIdParam=()=>{
    const queryString= window.location.search;
    const urlParams=new URLSearchParams(queryString)
    return urlParams.get("id")
}

const getPost = () => 
    {

        const postId=getPostIdParam()
        const url=`${API_URL}${postId}`

        fetch(url,{
            method:'GET'
        }).then((response)=>{
            return response.json()
        }).then((data)=>{
            buildPost(data)
        })
    }

Почему fetch(API_URL) и fetch(url) работают? Разве нельзя ошибаться?

Не зная определения API, похоже, что вы получаете все сообщения, а инструктор указывает идентификатор сообщения, чтобы получить одно сообщение.

Dillan Wilding 16.10.2022 20:01

Спасибо, Дилан, определение API установлено как для идентификатора, так и для сообщений, поэтому я на самом деле получал все сообщения, когда мог просто получить одно сообщение, что, вероятно, замедляет процесс,

Naveen DINUSHKA 16.10.2022 21:43

Это я буквально сказал...

Dillan Wilding 16.10.2022 22:03
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
3
57
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ваша реализация неверна, так как postId необходим для выборки =>

постоянный URL=${API_URL}${postId}

В коде инструктора это обрабатывается.

Да, изначально это выглядело ненужным, но мы поняли, что можем просто получить одно сообщение вместо того, чтобы получать все сообщения на отдельной странице сообщений, так что, вероятно, лучшая производительность в прежнем

Naveen DINUSHKA 16.10.2022 21:44
Ответ принят как подходящий

Что вы имели в виду под обоими работающими? На самом деле, я предполагаю, что оба должны работать. Кажется, что путь инструктора имеет больше смысла. Потому что инструктор пытался получить одно конкретное сообщение, используя идентификатор сообщения.

Но ваш способ, который означает использование "http://localhost:3000/api/posts/", в идеале должен возвращать все сообщения.

Итак, я предполагаю, что уже есть две конечные точки для получения всех сообщений и одного конкретного сообщения. Таким образом, оба URL-адреса работают.

да, все верно, оба URL/конечные точки работают, хорошо, теперь я понял

Naveen DINUSHKA 16.10.2022 20:25

Другие вопросы по теме