React读取properties配置文件转化为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 = 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;
当发生一个异步的时候,想要用这个异步结果做其他操作,可以选择再封装一个函数做中间件。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » React读取properties配置文件转化为json对象并使用在url地址中
码云笔记 » React读取properties配置文件转化为json对象并使用在url地址中