与 axios 的 Http

配置

对于 Web 请求，你还可以使用库 axios 。

它很容易配置。为此，你可以创建文件 axios.js，例如：

import * as axios from 'axios';

var instance = axios.create();
instance.defaults.baseURL = serverURL;
instance.defaults.timeout = 20000;]
//...
//and other options

export { instance as default };

然后在任何你想要的文件中使用它。

要求

为了避免对后端的每个服务使用模式 Swiss knife，你可以在文件夹中为集成功能创建单独的文件及其方法：

import axios from '../axios';
import { 
    errorHandling
} from '../common';

const UserService = {
        getCallToAction() {
        return axios.get('api/user/dosomething').then(response => response.data)
            .catch(errorHandling);
    },
}
export default UserService;

测试

有一个特殊的 lib 来测试 axios： axios-mock-adapter 。

使用此 lib，你可以设置 axios 任何你想要测试它的响应。你还可以为 axois’es 方法配置一些特殊错误。你可以将它添加到在 prevous 步骤中创建的 axios.js 文件中：

import MockAdapter from 'axios-mock-adapter';

var mock = new MockAdapter(instance);
mock.onAny().reply(500);

例如。

Redux 商店

有时你需要添加头文件授权令牌，你可能存储在 redux 商店中。

在这种情况下，你将需要另一个具有此功能的文件 interceptors.js：

export function getAuthToken(storeContainer) {
    return config => {
        let store = storeContainer.getState();
        config.headers['Authorization'] = store.user.accessToken;
        return config;
    };
}

接下来在根组件的构造函数中，你可以添加以下内容：

axios.interceptors.request.use(getAuthToken(this.state.store));

然后你的所有请求都将跟随你的授权令牌。

正如你所看到的，axios 是一个非常简单，可配置且有用的库，适用于基于 react-native 的应用程序。