Ответы пользователя по тегу API
  • Как пройтись циклом по api в реакт компоненте?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    1. Для того чтобы научиться отображать списки почитайте:
    Списки и ключи
    2. Вам достаточно всего одного роута с параметром. Почитать:
    Responsive routes
    3.
    я не могу использовать api в общем

    "Не могу" это нельзя, нет доступа или не умею? Если последнее, то:
    AJAX и обращение к API (тут можно использовать хук useEffect)
    Использование хука эффекта
    Использование Fetch API
    Axios: Example
    Ответ написан
    Комментировать
  • Как перебрать api в компоненте React'a?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    Ответ написан
    Комментировать
  • Как избавиться от ошибки CORS на localhost при авторизации vk.api?

    rockon404
    @rockon404
    Frontend Developer
    Я понимаю, что я должен на сервере задать 'Access-Control-Allow-Origin':'*', но не хочу ejectить.

    Нет, этот заголовок на сервере авторизации vk надо указывать. Но его там нарочно нет.

    В документации ведь русским языком написано:
    Для получения access_token необходимо выполнить запрос с Вашего сервера на https: //oauth.vk.com/access_token, передав следующие параметры:
    Ответ написан
    3 комментария
  • Как выполнить ПОСТ запрос с параметрами бади и хэдер?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    const form = new FormData();
    form.append('key', 'ecmdecmedmjrjekrkl');
    
    fetch('/some-path', {
      method: 'POST',
      headers: "Content-Type: application/x-www-form-urlencoded",
      body: form,
    }).then(assets => this.setState({assets}, () => console.log('Fetched!')));


    По-хорошему, ваше приложение должно взаимодействовать с сервером по REST API, данные передаваться в формате JSON.

    Захардкоженный ключ доступа не лучшее решение.
    Ответ написан
    Комментировать
  • Как сформировать запрос к API, если часть параметров статичны, а часть - динамичны?

    rockon404
    @rockon404
    Frontend Developer
    Для шаблонных строк используются обратные кавычки:
    const template = `Hello, ${username}!`;
    Ответ написан
    5 комментариев
  • Возможно ли реализовать данную задачу "чище"?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    Код особо не разбирал. Скажу лишь, что вам компонент лучше разбить на несколько:
    render () {
      const { match: { url } } = this.props;
      return (
        <Switch>
          <Route exact path={url} content={Tweets} />
          <Route exact path={url + '/with-replies'} content={WithReplies} />
          <Route exact path={url + '/media'} content={Media} />
        </Switch>
      )
    }


    Вместо:
    render() {
      return someCondition ? (
          <Component
            prop1={a.prop1}
            prop2={a.prop2}
            prop3={a.prop3}
            prop4={a.prop4}
            prop5={a.prop5}
          />
        ) : (
          <Component
            prop1={b.prop1}
            prop2={b.prop2}
            prop3={b.prop3}
            prop4={b.prop4}
            prop5={b.prop5}
          />
        );
    }

    Лучше:
    render() {
      const c = someCondition ? a : b;
    
      return (
        <Component
          prop1={c.prop1}
          prop2={c.prop2}
          prop3={c.prop3}
          prop4={c.prop4}
          prop5={c.prop5}
        />
      );
    }


    Всместо :
    render() {
      return (
        <Wrapper>
          {condition1 &&
             condition2 &&
             condition3 &&
             condition4 && (
               <Component />
           )}
        </Wrapper>
      )
    }


    Лучше:
    render() {
      const shouldShowComponent = condition1 && condition2 && condition3 && condition4; 
    
      return (
        <Wrapper>
          {shouldShowComponent && <Component />}
        </Wrapper>
      );
    }
    Ответ написан
    Комментировать
  • Как получить доступ к [[PromiseValue]]?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    Не правильно используете Fetch API.
    Простой пример использования:
    fetch('https://example.com/api')
      .then(response => response.json())
      .then(json => dispatch(someAction(json)))
      .catch(console.log);
    Ответ написан
    2 комментария
  • Как сделать экспорт в react\redux после запроса API?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    Сам вопрос поставлен вразрез с концепцией Redux, да и самой модульной концепцией JavaScript. Вам не надо пытаться экспортировать модуль после запроса, так делать нельзя. Вам надо задать начальное состояние и определить там ключи состояния isLoading, isError. При инициализации приложения произойдет запрос на сервер за данными и пока они не пришли isLoading будет иметь значение true, вы, в идеале, в этот момент должны показывать пользователю прелоадер.
    Ну, а то что вы пытались сделать это в корне не правильно.

    При использовании redux-thunk должно получится, что-то вроде:
    import { fetchInitialDataApi } from './api';
    
    const FETCH_INITIAL_DATA_REQUEST = 'FETCH_INITIAL_DATA_REQUEST';
    const FETCH_INITIAL_DATA_SUCCESS = 'FETCH_INITIAL_DATA_SUCCESS';
    const FETCH_INITIAL_DATA_ERROR = 'FETCH_INITIAL_DATA_ERROR';
    
    const fetchInitialDataRequest = () => ({ type:  FETCH_INITIAL_DATA_REQUEST });
    const fetchInitialDataSuccess = data => ({
      type:  FETCH_INITIAL_DATA_SUCCES,
      payload: data,
    });
    const fetchInitialDataError = error => ({
      type:  FETCH_INITIAL_DATA_ERROR,
      payload: error,
    });
    
    const fetchInitialData => async dispatch => {
      try {
        dispatch(fetchInitialDataRequest());
        const { data } = await fetchInitialDataApi();
        dispatch(fetchInitialDataSuccess(data));
      } catch error {
        dispatch(fetchInitialDataError(error));
      }
    };
    
    const initialState = {
      data: {},
      isLoading: false,
      isError: false,
      error: null,
    };
    
    export default function(state = initialState, action) {
      const { type, payload } = action;
    
      switch (type) {
        case FETCH_INITIAL_DATA_REQUEST:
          return {
            ...state,
            isLoading: true,
            isError: false,
            error: null,
          };
        case FETCH_INITIAL_DATA_SUCCESS:
          return {
            ...state,
            data: payload,
            isLoading: false,
          };
        case FETCH_INITIAL_DATA_ERROR:
          return {
            ...state,
            isLoading: false,
            isError: true,
            error: payload,
          };
      default:
        return state;
      }
    }


    Если же хотите получать начальные данные сразу и они статичные, то пишите их в шаблон страницы приложения в window._data и забирайте через reducer:
    export default (state = window._data) => state;
    Ответ написан
    2 комментария
  • Использование Api сайтом, нужно ли?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    Почему нельзя, просто, выделить common часть для обоих модулей?
    А в модель поста можно прописать метод который будет доставать и мапить результаты.

    Тогда у вас будет примерно такой код в rest:
    router.get('/', routeCache.cacheSeconds(20), async (req, res) => {
        const posts = await models.Post.getPostsList({ limit: 10 });
    
        res.json(posts);
    });


    и такой для сайта:
    router.get('/', async (req, res) => {
        const posts = await models.Post.getPostsList({ limit: 10 });
    
        res.render('index', { posts_list: posts });
    });


    Все просто и никаких костылей.
    Обращения сервера сайта к rest это лишний код и лишние операции.

    Метод res.json() сам добавляет к ответу заголовок Content-Type со значением 'application/json' если он не добавлен до этого.
    Ответ написан
    Комментировать
  • Правильно ли я понимаю что такое API?

    rockon404
    @rockon404
    Frontend Developer
    Сама аббревиатура API расшифровывается как программный интерфейс приложения, интерфейс на уровне чего угодно от класса до целого сервиса. Вы наверное имели ввиду API веб-сервиса или REST API.
    Как бы объяснить попонятней, API веб-сервиса это публичный или закрытый интерфейс взаимодействия, реализуемый посредством HTTP-запросов (GET, POST, PUT, PATCH, DELETE) и ответов. Ответы обычно в формате JSON.
    Обработчики конкретных запросов на сервере называют эндпоинтами. Пример типичных эндпоинтов:
    GET 'api/v1/products' - вернет массив товаров.
    GET 'api/v1/product/:id' - вернет один товар по id
    POST 'api/v1/product' - добавляем товар, отправив в теле запроса JSON с данными и получаем в ответ его же, но уже с присвоенным базой данных id или просто id.
    PATCH 'api/v1/product/:id' - обновляем товар отправляя измененные поля в виде JSON и получаем измененный товар или success.
    DELETE 'api/v1/product/:id' - удаляем товар, получая в ответе success.

    Основные пользователи REST API это мобильные и веб приложения. Часто многие сервера и сайты используют API сторонних сервисов.
    Ответ написан
    Комментировать