如何进行多个API调用

Question

I'm trying to make multiple API calls to the Riot API, but I am getting an 'Unexpected token' syntax error next to .catch(err=>) . Sorry if I'm asking a stupid question, it's my first time using Node.js...

const fetch = require('node-fetch');

module.exports = (app) => {

    let champname;

    app.post('/search-champ', (req, res) => {
        champname = req.body.champname;   //added by hu
    let server = req.body.server; 
    let id= "80339518";
        //need to call api to get champions
     const apiId = 'RGAPI-da5d88a2-c56e-4b32-a640-9933a53c9058';
        const baseUrl = 'https://'+ server+'/api.riotgames.com/lol/summoner/v3/summoners/by-name/'+ champname + '?api_key='+apiId;


        const userLocation = (url1, url2, champname) => {

            let newUrl = url1 + champname + url2;
            return newUrl;
        };

        const apiUrl = 'https://euw1.api.riotgames.com/lol/summoner/v3/summoners/by-name/'+ champname + '?api_key='+apiId;

        fetch(apiUrl)
            .then(res => res.json())
            .then(data => {
                var id = data.accountId;
                console.log(data)

             const apiUrl2 = 'https://euw1.api.riotgames.com/lol/match/v3/matchlists/by-account/'+id + '?api_key='+apiId;

                fetch(apiUrl2)
                .then(res => res.json())
                .then(data => {
                    var id2=data.matches[1].gameId;
                    res.send({ data });
                    console.log('match1', data.matches[0].gameId)


                const apiUrl3='https://euw1.api.riotgames.com/lol/match/v3/matches/'+id2 + '?api_key='+apiId;

                fetch(apiUrl3)
                 .then(res => res.json())
                .then(data => {
                     res.send({ data });
                    console.log(data)

                .catch(err => {
                    res.redirect('/error');
                });
              .catch(err => {
                    res.redirect('/error');
                });
            })
            .catch(err => {
                res.redirect('/error');
            });


    })

    })
    app.get('/search-location-champ', (req, res) => {
        //build api URL with user zip
        const apiId = 'RGAPI-4b602b1a-e6aa-4c24-b88f-d0aab6467fa8';
        const baseUrl = 'https://euw1.api.riotgames.com/lol/summoner/v3/summoners/by-name/'+ champname + '?api_key='+apiId;


        const userLocation = (url1, url2, champname) => {

            let newUrl = url1 + champname + url2;
            return newUrl;
        };

        const apiUrl = 'https://euw1.api.riotgames.com/lol/summoner/v3/summoners/by-name/'+ champname + '?api_key='+apiId;


        fetch(apiUrl)
            .then(res => res.json())
            .then(data => {
                res.send({ data });
            })
            .catch(err => {
                res.redirect('/error');
            });


    })
}

Answer 1

Check your code the curly braces and parenthesis that closes the .then callback are missing or not in right place, I tried to fix it here.

fetch(apiUrl)
        .then(res => res.json())
        .then(data => {
            var id = data.accountId;
            console.log(data)

         const apiUrl2 = 'https://euw1.api.riotgames.com/lol/match/v3/matchlists/by- 
          account/'+id + '?api_key='+apiId;

            fetch(apiUrl2)
            .then(res => res.json())
            .then(data => {
                var id2=data.matches[1].gameId;
                res.send({ data });
                console.log('match1', data.matches[0].gameId)


            const apiUrl3='https://euw1.api.riotgames.com/lol/match/v3/matches/'+id2 
                  + '?api_key='+apiId;

            fetch(apiUrl3)
             .then(res => res.json())
            .then(data => {
                 res.send({ data });
                console.log(data)
            })
            .catch(err => {
                res.redirect('/error');
            });
           })
          .catch(err => {
                res.redirect('/error');
          });
        })
        .catch(err => {
            res.redirect('/error');
      });

Answer 2

You promise chains can be simplified

fetch(apiUrl)
.then(res => res.json())
.then(data => {
    return fetch(`https://euw1.api.riotgames.com/lol/match/v3/matchlists/by-account/${data.accountId}?api_key=${apiId}`);
})
.then(res => res.json())
.then(data => {
    // res.send({ data }); You cannot send response twice
    return fetch(`https://euw1.api.riotgames.com/lol/match/v3/matches/${data.matches[1].gameId}?api_key=${apiId}`)
})
.then(res => res.json())
.then(data => {
    res.send({ data }); // You can send only one response for incoming request        
})
.catch(err => {
    res.redirect('/error');
});

You can have only one catch chain. Also you sent response twice it could cause an error

Answer 3

Your code wrong use catch ,

I change it:

const fetch = require('node-fetch');

module.exports = (app)=>{

    let champname;

    app.post('/search-champ', (req,res)=>{
        champname = req.body.champname;
        //added by hu
        let server = req.body.server;
        let id = "80339518";
        //need to call api to get champions
        const apiId = 'RGAPI-da5d88a2-c56e-4b32-a640-9933a53c9058';
        const baseUrl = 'https://' + server + '/api.riotgames.com/lol/summoner/v3/summoners/by-name/' + champname + '?api_key=' + apiId;

        const userLocation = (url1,url2,champname)=>{

            let newUrl = url1 + champname + url2;
            return newUrl;
        };

        const apiUrl = 'https://euw1.api.riotgames.com/lol/summoner/v3/summoners/by-name/' + champname + '?api_key=' + apiId;

        fetch(apiUrl).then(res=>res.json()).then(data=>{
            var id = data.accountId;
            console.log(data)

            const apiUrl2 = 'https://euw1.api.riotgames.com/lol/match/v3/matchlists/by-account/' + id + '?api_key=' + apiId;

            fetch(apiUrl2).then(res=>res.json()).then(data=>{
                var id2 = data.matches[1].gameId;
                res.send({
                    data
                });
                console.log('match1', data.matches[0].gameId)

                const apiUrl3 = 'https://euw1.api.riotgames.com/lol/match/v3/matches/' + id2 + '?api_key=' + apiId;

                fetch(apiUrl3).then(res=>res.json()).then(data=>{
                    res.send({
                        data
                    });
                    console.log(data)

                }).catch(err=>{
                    res.redirect('/error');
                });
            }).catch(err=>{
                res.redirect('/error');
            });

        }).catch(err=>{
            res.redirect('/error');
        });

    })
    app.get('/search-location-champ', (req,res)=>{
        //build api URL with user zip
        const apiId = 'RGAPI-4b602b1a-e6aa-4c24-b88f-d0aab6467fa8';
        const baseUrl = 'https://euw1.api.riotgames.com/lol/summoner/v3/summoners/by-name/' + champname + '?api_key=' + apiId;

        const userLocation = (url1,url2,champname)=>{

            let newUrl = url1 + champname + url2;
            return newUrl;
        };

        const apiUrl = 'https://euw1.api.riotgames.com/lol/summoner/v3/summoners/by-name/' + champname + '?api_key=' + apiId;

        fetch(apiUrl).then(res=>res.json()).then(data=>{
            res.send({
                data
            });
        }).catch(err=>{
            res.redirect('/error');
        });

    })
}

You can test it and update your question (with error).

Answer 4

You can try using axios all / spread when you need data from multiple origins.

axios
  .all([
    axios.get(https://apiurl.com/call1),
    axios.get(https://apiurl.com/call2)
  ])
  .then(
    axios.spread(
      (
        dataCall1,
        dataCall2
      ) => {
        // your code
      }
    )
  )
  .catch(function(error) {
    console.log(error);
  });

https://www.npmjs.com/package/axios