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项目中怎么封装请求接口”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。