React读取properties配置文件转化为json对象并使用在url地址中

首先properties配置文件的格式是:

url=http://192.168.0.6
port=8081

我这里命名是strings.properties,因为要做到可配置,就是后期只是改变这个文件的url和port而不用重新打包前端代码,这个文件我放到了public下面。

properties配置文件

然后每个接口请求其实都需要拿到这个文件里面的配置包括url和port;

所以选择读取文件,读取文件是异步操作所以在封装请求方法的时候,出现了问题,可以打印出来读取的内容,但是暴露出去的对象是一个undefined;

首先,先读取到文件:

读取到文件

拿到了一个字符串。经过处理变成一个json对象。

let changePROPERTIESTOJSON = async () => {
	//存储对象
    let propertiesObj = {}
    // 异步请求文件内容  我们可以使用原生或者axios 
    let res = await Promise.resolve(xfetch("GET", "strings.properties")).catch(err => {
        console.log(err, '读取文件错误')
    })
    console.log(res,"读取strings.properties文件的结果")
    //分割换行符
    let resArr = await res.data.split('\r\n')
    // 拼成json对象
    for (let i = 0; i < resArr.length; i++) {
        resArr[i] = resArr[i].split('=')
        propertiesObj[resArr[i][0]] = resArr[i][1]
    }
    // 返回处理好的对象  这是我真实需要的对象
    return {
        CUCCListAPI: propertiesObj.url + ":" + propertiesObj.port + "/cucc",
        XinAnListAPI: propertiesObj.url + ":" + propertiesObj.port + "/xinan",
        unicomListAPI: propertiesObj.url + ":" + propertiesObj.port + "/unicom",
    }
}

这样的话我们拿到了一个permise对象,所以我们还需要一个函数来接收我们的url的拼接地址。

async function xfetchGetConfig(type, url, obj, field) {
    // 等文件获取到 之后再 返回一个新的peomise  
    //CUCCListAPI 是一个对象 
    let CUCCListAPI = await changePROPERTIESTOJSON();
    //触发返回真实的请求
    return Promise.resolve(xfetch(type, CUCCListAPI[field] + url, obj));
}
// 解决类似问题可考虑创建一个新的函数 作为桥梁  重新返回一个新的promise 
export default xfetchGetConfig;

当发生一个异步的时候,想要用这个异步结果做其他操作,可以选择再封装一个函数做中间件。

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » React读取properties配置文件转化为json对象并使用在url地址中

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们