React項目中請求接口封裝的方法有哪些？

當我們在從事前端開發(fā)的時候就會涉及到接口的使用，那么今天我們就來講講在“React項目中請求接口封裝的方法有哪些”這個問題吧！

在我們的封裝的過程中需要使用到這三個文件；Api.js、Apilp.js和ApiURL.js。

該文件的作用是調(diào)用不同的接口請求地址在開發(fā)環(huán)境和生產(chǎn)環(huán)境下，在生產(chǎn)環(huán)境下這個文件的作用是動態(tài)的獲取瀏覽器中的地址進行拼裝，從而可以動態(tài)的獲取地址。代碼和注釋如下：

//獲取當前的URL中的地址，同時攜帶端口號,不攜帶http://
let projectAddrass = window.location.host;
let projectAddrassNoPort = window.location.hostname;
//返回當前的URL協(xié)議,既http協(xié)議還是https協(xié)議
let protocol = document.location.protocol;
//封裝請求接口的地址,如果服務(wù)器中套了一層性項目名稱，需要在這里面添加上,需要留意，例如: /zzxl/
export const interfaceIp = `${protocol}//${projectAddrass}/zzxl`;
//LOGO圖片的請求地址
export const logoImgAddress = `${protocol}//${projectAddrassNoPort}`;
//對外提供的服務(wù)地址
export const publicIp = process.env.NODE_ENV === 'development' ? 'http://10.222.40.243:8088' :
interfaceIp;
export const logoImgIp = process.env.NODE_ENV === 'development' ? 'http://127.0.0.1' :
logoImgAddress;

這個文件通過對外請求接口服務(wù)的入口文件，然后再通過借助于axios 再次封裝，從而來返回為Promise 對象，因為在Promise這個對象中含有 then 和 catch 這兩個方法可以讓我們便于進一步的處理。代碼注釋如下：

import axios from 'axios';
import * as apiUrl from './ApiURL';
import {notification} from 'antd';

const key = 'keepOnlyOne';

/**
 *  接口請求數(shù)據(jù)時執(zhí)行的方法
 *  接受參數(shù)為請求的路徑apiUrl、請求接口配置參數(shù)configObj
 *
 * @param {String} apiUrl            用戶傳入的請求路徑
 * @param {Object} configObj        用戶傳入的接口參數(shù)
 */
function getDataFromServer(apiUrl, configObj) {

    //用戶傳入的接口配置參數(shù)
    let {
        method = 'GET',
        params = {},
        data = {},
        timeout = 5000
    } = configObj;

    /**
     * 返回的Promise對象含有then、catch方法
     */
    return new Promise(function (resolve, reject) {
        axios({
            url: apiUrl,
            method: method,
            params: params,
            data: data,
            timeout: timeout,
            headers: {
                'Content-Type': 'application/json',
                'token': window.sessionStorage.getItem('token') || ''
            }
        }).then(function (response) {
            if(response){
                if (response.data && response.data.code) {
                    resolve(response);
                }else {
                    notification.error({
                        key,
                        message: '操作失敗',
                        description: '返回的數(shù)據(jù)格式有誤'
                    });
                    resolve(response);
                }
            }else {
                //處理特殊的情況就是response返回什么也沒有
                notification.error({
                    key,
                    message: '操作失敗',
                    description: '服務(wù)器錯誤'
                });
                resolve(response);
            }
        }).catch(function (error) {
            notification.error({
                key,
                message: '操作失敗',
                description: '網(wǎng)絡(luò)異常,請稍后重試'
            });
            reject(error);
        })
    })
}


// 登錄
export function loginClick(configObj) {
    return getDataFromServer(apiUrl.LOGIN, configObj);
}

其他的Dome文件添加這些代碼：

import { loginClick } from '../Api';
// 使用
let loginInfo = {
method: 'POST',
data: {
account: username
}
}
loginClick(loginInfo).then((response) => {
// do something
}).catch((error)=>{
	// error something
})

4.ApiURL.js文件的作用：

通過ApiIp.js這個文件傳入的地址，然后封裝具體的一個請求路徑從而拼裝成完整的請求地址，將得到的所有接口請求的地址存放到一個文件中，這樣可以降低耦合度還便于我們的維護。代碼如下：

import ApiIP from './ApiIp';
// 登錄
export const LOGIN = `${ApiIP}/index/captcha`;

以上就是一個有關(guān)于“React項目中請求接口封裝的方法有哪些”的解答，小伙伴們?nèi)绻懈玫囊粋€方法也可以和大家一個分享學習交流。更多相關(guān)的 React 知識都可以在W3cschool中學習到。尤其是對于新手小白來說更可以快速掌握！