React項目中怎么封裝請求接口

本文小編為大家詳細介紹“React項目中怎么封裝請求接口”，內容詳細，步驟清晰，細節處理妥當，希望這篇“React項目中怎么封裝請求接口”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

1.包含文件：

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

2.ApiIp.js文件的作用：

該文件的作用是調用不同的接口請求地址在開發環境和生產環境下，在生產環境下這個文件的作用是動態的獲取瀏覽器中的地址進行拼裝，從而可以動態的獲取地址。代碼和注釋如下：

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

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

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

const key = 'keepOnlyOne';

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

    //用戶傳入的接口配置參數
    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: '返回的數據格式有誤'
                    });
                    resolve(response);
                }
            }else {
                //處理特殊的情況就是response返回什么也沒有
                notification.error({
                    key,
                    message: '操作失敗',
                    description: '服務器錯誤'
                });
                resolve(response);
            }
        }).catch(function (error) {
            notification.error({
                key,
                message: '操作失敗',
                description: '網絡異常,請稍后重試'
            });
            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`;

讀到這里，這篇“React項目中怎么封裝請求接口”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。