javascript - 导入获取请求？

Question

我有一个 react native 应用程序，它使用大量的获取请求。这些请求运行良好，但我现在尝试将所有获取请求移至单个文件中并将它们导入到我的类中。

问题:我不知道如何正确执行此操作。基本上，我可以从我的类中调用 fetch 方法，但我不知道如何根据成功或失败来使用它。请参阅示例:

import stuff...
import { FetchRequest } from ...

class Home extends Component {
    constructor(props) {
    ...
}

 _fetch() {
 FetchRequest();
 }

 _onSuccess() {
 alert('success!');
 }

 _onFailure() {
 alert('failure!');
 }

 render() {
   return <Button onPress={this._fetch} />
  }
}

FetchRequest 看起来像这样:

import { Url } from ...

export const FetchRequest = function () {
    fetch(Url)
        .then((response) => response.json())
        .then((responseJson) => {
            if (responseJson.status == 'success') {
                return 'success';
            }
            else {
                return 'failure';
            }
        })
        .catch((error) => {
           alert('Error!');
  });
};

如您所见，我可以轻松触发警报，并且还可以返回我不知道如何使用的字符串。基本上，如果 FetchRequest 成功，我想调用 _onSuccess 方法；如果 FetchRequest 不成功，我想调用 _onFailure 方法。有没有办法实现这个目标？

Answer 1

您可以通过向 FetchRequest 函数发送 onSuccess 和 onFailure 回调来实现此目的。

按如下方式更改 FetchRequest:

import { Url } from ...

export const FetchRequest = function (_onSuccess, _onFailure) {
    fetch(Url)
        .then((response) => response.json())
        .then((responseJson) => {
            if (responseJson.status == 'success') {
                _onSuccess(responseJson);
            }
            else {
                _onFailure(responseJson);
            }
        })
        .catch((error) => {
           alert('Error!');
  });
};

您现在可以将其用作:

import stuff...
import { FetchRequest } from ...

class Home extends Component {
    constructor(props) {
    ...
}

 _fetch() {
 FetchRequest(this._onSuccess, this._onFailure);
 }

 _onSuccess(responseJson) {
 // Do something with the response
 alert('success!');
 }

 _onFailure(responseJson) {
 // Show the failed result
 alert('failure!');
 }

 render() {
   return <Button onPress={this._fetch} />
  }
}