React項(xiàng)目中怎么封裝請(qǐng)求接口

本文小編為大家詳細(xì)介紹“React項(xiàng)目中怎么封裝請(qǐng)求接口”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“React項(xiàng)目中怎么封裝請(qǐng)求接口”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

1.包含文件：

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

2.ApiIp.js文件的作用：

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

//獲取當(dāng)前的URL中的地址，同時(shí)攜帶端口號(hào),不攜帶http://
let projectAddrass = window.location.host;
let projectAddrassNoPort = window.location.hostname;
//返回當(dāng)前的URL協(xié)議,既http協(xié)議還是https協(xié)議
let protocol = document.location.protocol;
//封裝請(qǐng)求接口的地址,如果服務(wù)器中套了一層性項(xiàng)目名稱，需要在這里面添加上,需要留意，例如: /zzxl/
export const interfaceIp = `${protocol}//${projectAddrass}/zzxl`;
//LOGO圖片的請(qǐng)求地址
export const logoImgAddress = `${protocol}//${projectAddrassNoPort}`;
//對(duì)外提供的服務(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;

3.Api.js文件的作用：

這個(gè)文件通過(guò)對(duì)外請(qǐng)求接口服務(wù)的入口文件，然后再通過(guò)借助于axios 再次封裝，從而來(lái)返回為Promise 對(duì)象，因?yàn)樵赑romise這個(gè)對(duì)象中含有 then 和 catch 這兩個(gè)方法可以讓我們便于進(jìn)一步的處理。代碼注釋如下：

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

const key = 'keepOnlyOne';

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

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

    /**
     * 返回的Promise對(duì)象含有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返回什么也沒(méi)有
                notification.error({
                    key,
                    message: '操作失敗',
                    description: '服務(wù)器錯(cuò)誤'
                });
                resolve(response);
            }
        }).catch(function (error) {
            notification.error({
                key,
                message: '操作失敗',
                description: '網(wǎng)絡(luò)異常,請(qǐng)稍后重試'
            });
            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文件的作用：

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

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

讀到這里，這篇“React項(xiàng)目中怎么封裝請(qǐng)求接口”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。