Any way at all to specify a callback to wrap the response with?

Question

So I am trying to develop a search bar component in a React application where you can type in a users last name and that request will go to the Behance API and pull up that users data.

I am stuck on this:

axios
  .get(API_URL + 'users?q=' + 'matias' + '&client_id=' + API_KEY + '&callback=')
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.log(error);
    alert(error.message);
  });

I have tried wrapping the above in a const userSearch = () => {}, but that takes me a step farther from my goal. With the above I actually do get 200 statuses, but there is the CORS issue. I just can't seem to put together a callback that is not undefined in there, nevermind that this is a search bar implementation so I am going to have to refactor the above. I was just wanting to see some data returned.

why are you passing a callback parameter at all?! are you just trying to get around CORS? if so, then create a proxy server to make the request.. callback is for jsonp hacks which you definitely do not need to do — azium, Oct 18 '18 at 04:20
@azium, I am familiar with how `create-react-app` implements a proxy, but I created this application with `npm init`. With that said, it still has `webpack-dev-server`. I have tried adding a proxy to my `package.json` file and it did nothing. Do you have some documentation or can you post how to do this as an answer? And yes it is to get around CORS. — Daniel, Oct 18 '18 at 11:44
I mean.. make your own little proxy server using express https://expressjs.com/ — azium, Oct 18 '18 at 16:41
@azium, ahh, so I do have to implement Node/Express backend after all. Can't be done with pure React-Redux with a Webpack build. — Daniel, Oct 18 '18 at 17:24

score 0 · Answer 1 · answered Oct 18 '18 at 05:24

One of the nicest things in Axios, is the seperation between request argument. For example, the url should be only URL: API_URL + '/users'. The parameters you want to pass, should be sent as an object. The promise of the axios get, is the callback you are looking for. Therefore, your request should look like this:

axios.get(API_URL + 'users', {
   params: {
      q: 'matias',
      client_id: API_KEY,
   }
})
.then(response => {
   - success callback actions -
 })
.catch(error => {
   - error callback actions -
});

Daniel · Answer 2 · 2018-10-18T21:54:55.290

So I had refactored my axios code and I was still getting CORS errors, but after reading a couple of blogs online saying that with fetch() and jQuery you could get around that, in particular this SO article: Loading Data from Behance API in React Component

I actually duplicated Yasir's implementation like so:

import $ from 'jquery';
window.$ = $;

const API_KEY = '<api-key>';
const ROOT_URL = `https://api.behance.net/v2/users?client_id=${API_KEY}`;

export const FETCH_USER = 'FETCH_USER';

export function fetchUser(users) {
  $.ajax({
    url: `${ROOT_URL}&q=${users}`,
    type: 'get',
    data: { users: {} },
    dataType: 'jsonp'
  })
    .done(response => {})
    .fail(error => {
      console.log('Ajax request fails');
      console.log(error);
    });

  return {
    type: FETCH_USER
  };
}

And sure enough, no more CORS error and I get back the users data in my Network > Preview tabs. Not very elegant, but sometimes you are just trying to solve a problem and at wits end.

Any way at all to specify a callback to wrap the response with?

2 Answers2