Question

因此，我正在尝试在React应用程序中开发一个搜索栏组件，您可以在其中键入用户的姓氏，并且该请求将转到Behance API并提取该用户的数据。

我一直坚持下去：

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);
  });

我尝试将以上内容包装在const userSearch = () => {}中，但这使我离目标还差了一步。通过上面的操作，我实际上获得了200个状态，但是存在CORS问题。我似乎似乎无法将不在其中的undefined回调组合在一起，不要忘了这是一个搜索栏实现，因此我将不得不重构上面的代码。我只是想看看返回的数据。

Answer 1

Axios最好的事情之一就是请求参数之间的分隔。例如，该URL应该仅是URL：API_URL +'/ users'。要传递的参数应作为对象发送。 axios get的承诺是您正在寻找的回调。因此，您的请求应如下所示：

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

Answer 2

因此，我已经重构了axios代码，但仍然遇到CORS错误，但是在网上阅读了几篇博客后说，fetch()和jQuery可以解决这个问题，特别是这篇SO文章：Loading Data from Behance API in React Component

我实际上是这样复制Yasir的实现的：

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
  };
}

当然，再也不会出现CORS错误，我会在“网络”>“预览”标签中找回用户数据。不是很优雅，但是有时您只是想尽力而为地解决问题。

有什么办法指定用于包装响应的回调？

2 个答案: