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项目中请求接口封装的方法有哪些”的解答，小伙伴们如果有更好的一个方法也可以和大家一个分享学习交流。更多相关的 React 知识都可以在W3cschool中学习到。尤其是对于新手小白来说更可以快速掌握！