與 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 的應用程式。