React读取properties配置文件转化为json对象并使用在url地址中-阿里云开发者社区

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

2024-09-25 7

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 本文介绍了如何在React项目中读取properties配置文件，将其内容转化为JSON对象，并在请求URL地址时使用这些配置。文章详细说明了异步读取文件、处理字符串转换为JSON对象的过程，并提供了一个封装函数，用于在发起请求前动态生成配置化的URL地址。

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

url=http://192.168.0.6
port=8081

我这里命名是strings.properties，因为要做到可配置，就是后期只是改变这个文件的url和port而不用重新打包前端代码，这个文件我放到了public下面
在这里插入图片描述
然后每个接口请求其实都需要拿到这个文件里面的配置包括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 = 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 {
   
        xxxListAPI: propertiesObj.url + ":" + propertiesObj.port + "/xxx",
        zzzListAPI: propertiesObj.url + ":" + propertiesObj.port + "/zzz",
        yyyListAPI: propertiesObj.url + ":" + propertiesObj.port + "/yyy",
    }
}

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

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

export default xfetchGetConfig;