react项目内既调用.net的接口,又调用java的接口处理

react项目内既调用.net的接口,又调用java的接口处理,第1张

react项目内既调用.net的接口,又调用java的接口处理

在一个项目中,初期的一部分接口是由.net开发的,后期的一部分接口是由java语言开发的,造成了一个项目内两中不同的语言开发的接口,这种情况下,不同的语言接口所在的服务器以及接口域名肯定是不同的,怎么解决系统内去请求不同域名的接口。
拿目前的项目举例,有一个文件是专门放接口名字的(url.js),一个封装axios拦截器等相关配置的文件(request.js),我们要解决在本地以及测试生产上都可以顺利的请求不同的接口
一、首先.net的接口和java接口名字如下代码:

//url.js
let serverUrl = '/'
if (window.location.host === 'localhost:3000') {
    serverUrl = 'http://localhost:3000/'
}
const joint = url => {
    return serverUrl + url
}
const allUrl = {
    common: {
    	// .net的接口统一为DesktopModules开头
        GetUserInfo: joint('DesktopModules/WS/API/MobileLogin/GetUserInfo'), 
        // java的接口统一为wsapi开头
        loginNew: joint('wsapi/blade-system/login-system'),
    },
}
export default allUrl

二、最重要的就是要配置axios请求的文件,通常我们在配置axios请求时只封装一套就可以了,以目前情况想到的办法就是封装两套,以get请求为例

//request.js
//在此处创建一个.net或者java的请求配置变量————service
const netService = axios.create({
    baseURL: 'http://10.5.xx.xxx/', // 测试
    timeout: 60000,
    headers: {},
    withCredentials: true,
    crossDomain: true
})

netService.interceptors.request.use(
    config => {
    //此处可以添加一些相关请求需要的参数,例如请求头等,代码有点多,我删掉一部分
        if (config.method === 'post') {
            if (config.headers['Content-Type'] === 'application/x-www-form-urlencoded;charset=UTF-8') {
                config.data = qs.stringify(config.data)
            }
        }
        return config
    },
    error => {
        Toast.info('请求出错' + error)
        return Promise.reject(error);
    }
)

netService.interceptors.response.use(
    response => {
        return response.data
    },
    error => {
        if (error && error.response) {
            let origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port : '');
            if (error.response.status === 401) {
               Toast.info('登录信息过期,即将跳转登录!')
                 setTimeout(() => {
                    window.open(`${origin}`, "_self");
                }, 2000);
             } else {
                Toast.offline('请求错误')
            }
            console.log('拦截错误信息error.response', error.response)
        } else {
            Toast.offline('拦截错误信息error', error)
        }
        return Promise.reject(null)
    }
)

export const netGet = (url, params = {}) => {
    return netService.get(url, { params: params })
}

再封装一个请求java接口的方法

//java接口,需要定义另外一个变量,我用的是javaService
const javaService = axios.create({
    baseURL: 'http://m.intuat.sinopec.com/', // 测试
    timeout: 60000,
    headers: {},
    withCredentials: true,
    crossDomain: true
})

javaService.interceptors.request.use(
    config => {
        if (config.method === 'post') {
            if (config.headers['Content-Type'] === 'application/x-www-form-urlencoded;charset=UTF-8') {
                config.data = qs.stringify(config.data)
            }
        }
        return config
    },
    error => {
        Toast.info('请求出错' + error)
        return Promise.reject(error);
    }
)

javaService.interceptors.response.use(
//此方法与.net的内容相同
    response => {
        return response.data
    },
    error => {
        return Promise.reject(null)
    }
)

export const javaGet = (url, params = {}) => {
    return javaService.get(url, { params: params })
}
export default {
    netGet, javaGet
}

三、此时接口请求方式已经封装好了,在相应的组件直接引用即可

//举例
//在需要调用接口组件引入request文件以及url.js文件
import http from '../../servers/request'
import url from '../../servers/url'
//在需要调用接口的地方直接使用
useEffect(()=>{
	//在此处去调用对应的请求方式即可
	http.javaGet(url.xxx.xxx,).then(res => {
		console.log(res)
    })
},[])
//调用.net的接口
useEffect(()=>{
	//在此处去调用对应的请求方式即可
	http.netGet(url.xxx.xxx,).then(res => {
		console.log(res)
    })
},[])

四、解决跨域问题
本地跨域:react项目在本地调试时可以配置代理,目前项目中用到的是http-proxy-middleware中间件来解决本地跨域问题

const { createProxyMiddleware } = require('http-proxy-middleware');
//在url.js中已经区分了不同服务的接口名字,不同的服务有统一的开头,根据不同的开头配置不同的代理
module.exports = function (app) {
    app.use(createProxyMiddleware('/DesktopModules', {
        target: 'http://10.5.xx.xxx',
        secure: false,
        changeOrigin: true
    }));
    app.use(createProxyMiddleware('/wsapi', {
        target: 'http://intuat.sinopec.com',
        secure: false,
        changeOrigin: true
    }));
};

测试生产跨域:request.js文件中根据不同的服务配置了不同的baseURL,但是最后我们项目的域名只是其中的一个,那么需要把.net或者java的baseURL改成相同的域名,然后域名后面加一个标识,后端可以通过该标识去映射对应的域名,即可解决

//例如.net的接口,在域名后面加一个net标识,与后端沟通好即可
const netService = axios.create({
    baseURL: 'http://m.intuat.sinopec.com/net/',
    timeout: 60000,
    headers: {},
    withCredentials: true,
    crossDomain: true
})

以上就是解决一个项目中既有.net的接口又有java接口的办法,如有其他办法欢迎探讨。
此外,由于生产与测试域名也是不同的,可以配置环境变量来区分测试与生产。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/5683602.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-12-17
下一篇 2022-12-17

发表评论

登录后才能评论

评论列表(0条)

保存