Прокси-вызов Api с Express в React Js - PullRequest
Новая
       13

Прокси-вызов Api с Express в React Js

0 голосов
/ 28 января 2020

Я использую метод выборки для API из моего приложения реакции. Теперь я хочу создать приложение express и направить этот вызов API с сервера express. Эта часть API исправлена: https://api.imgur.com/3/gallery/ остальные значения выбраны пользователем. Затем я создаю URL-адрес, подобный этому https://api.imgur.com/3/gallery/${section}/${sort}/${window}/${page}?showViral=${viral}, где я беру раздел, сортировку, окно, страницу, вирусное значение, проход, используя $ {{section}} и другие аналогичным образом, в зависимости от выбора пользователя, но по умолчанию каждый параметр присваивается, если пользователь не выберите любой фильтр из пользовательского интерфейса. ,

Теперь я хочу https://api.imgur.com/3/gallery/ в express и отправить / $ {section} / $ {sort} / $ {window} / $ {page}? ShowViral = $ {viral } метод снизу до express и получение ответного ответа.

Я установил express в моем приложении реакции. Остальное я новичок в этом, поэтому я не могу настроить.

Этот метод loadImage находится в компоненте реакции. `

 createURL ()
{
 const { lastSection, lastSorting, lastWindow, page, viral } = this.state;
let url = `https://api.imgur.com/3/gallery/${section}/${sort}/${window}/${page}?showViral=${viral}`;

    this.loadImages(url);
}
    loadImages(iUrl) {
        let myHeaders = new Headers();
        myHeaders.append("Authorization", "Client-ID {{myid}}");

        let requestOptions = {
          method: "GET",
          headers: myHeaders,
          redirect: "follow"
        };
        fetch(iUrl, requestOptions)
          .then((res) => res.json())
          .then((json) =>
            this.setState({ dataList: json.data, loaded: true, showLoader: false })
          )
          .catch((error) => {
            console.log(error);
          });
      }

1 Ответ

0 голосов
/ 28 января 2020

Вы будете sh отправлять изображение URL из Express Конечной точки API вместо создания его путем передачи параметров. Затем все, что вам нужно сделать, это:

Для URLSearchParams вы можете см. эту ссылку 

createURL ()
{
    const { lastSection, lastSorting, lastWindow, page, viral } = this.state;
    let url = `/getImageURLS`;

    this.loadImages(url, { lastSection, lastSorting, lastWindow, page, viral });
}
    loadImages(iUrl, params) {
        let URL = new URL(iUrl);
        URL.search = new URLSearchParams(params).toString();

        let myHeaders = new Headers();
        myHeaders.append("Authorization", "Client-ID {{myid}}");

        let requestOptions = {
          method: "GET",
          headers: myHeaders,
          redirect: "follow"
        };
        fetch(URL, requestOptions)
          .then((res) => res.json())
          .then((json) =>
            this.setState({ dataList: json.data, loaded: true, showLoader: false })
          )
          .catch((error) => {
            console.log(error);
          });
      }

Express Конечная точка API: 

let express = require('express');
let router = express.Router();
let app = express();
app.use('/', router);
app.listen('8080', () => console.log('listening on 8080'));
router.get('/getImageURLS', (req, res) => {
    console.log(req.query); //shows query paramters sent

    // your logic 

    const obj = [];
    res.send(obj); // image url array to be sent
});
...