React Native跨平台鸿蒙开发实战系列：项目引入axios，实现接口API请求

什么是Axiosaxios是一个基于Promise的HTTP库封装了底层的XMLHttpRequest和http模块移植到鸿蒙OS上的库也封装了鸿蒙的net.http模块。axios的拦截器功能可以统一处理认证、错误提示和请求认证减少重复代码同时Axios可以自动转换Json数据无需手动调用Json.parse。Axios是一个基于Promise的HTTP客户端库专门用于处理网络数据请求‌。它最大的特点是能够同时在浏览器和Node.js环境中运行‌。核心特性‌环境兼容‌浏览器端使用XMLHttpRequestNode.js端使用http模块‌Promise API‌使用Promise处理异步请求避免回调地狱‌拦截器机制‌支持请求和响应的拦截处理‌数据转换‌自动转换请求和响应数据‌安全防护‌提供CSRF/XSRF防御机制相比于原生Fetch APIAxios使用更简单方便提供了更完善的错误处理和超时配置‌接口示例axios(config)发送请求axios.create(config)创建实例axios.get(url[,config])发送get请求axios.post(url[,config])发哦post请求axios.defaults[’ ]配置一个默认axios.interceptors拦截器…AxiosRequestConfig类型常用配置url表示用来发送请求的地址一般为路径即‘/path’method表示发送请求的方法baseURL最终发送给服务器的url是baseURLurlheaders配置所发起网络请求的请求头params配置get请求所携带的参数时使用这里配置的对象会作为参数拼接到url上data配置post、put、delete请求所携带的参数时使用timeout设置请求的超时事件onUploadProgress用于监听上传进度AxiosResponse类型axios在返回响应数据时会默认对这次请求的响应数据进行一次包装{//这次请求返回的响应数据data{},//请求状态status:200,//状态说明文字statusText:OK,//请求的请求头headers:{},//这次请求设置的配置 也就是一个AxiosRequestConfig类型的对象config:{},//表示axios底层封装的请求实例request:{}//HTTP请求各个阶段所花费的时间performanceTiming:{}}安装依赖包npm install axios发送一个get请求Axios是一个基于Promise的HTTP客户端库用于在浏览器和Node.js中发起网络请求。它专注于简化HTTP请求处理相比原生Fetch API更易用支持请求拦截、响应转换、取消请求等功能‌。axios({url:/get,//对这个网址发送的请求响应的数据即为携带的参数baseURL:httpbin.org,method:get,params:{username:limiaomiao,password:12345}}).then((res:AxiosResponsestring){console.log([axios]JSON.stringify(res))})使用axios.get()由于ArkTs不再支持any类型所以在使用get方法时需要指定泛型参数的类型axios.getTany,RAxiosResponseT,Dany(url)T是响应数据类型R是AxiosResponse类型中data字段的类型D是当发送get请求时在url中添加的查询参数的类型参数为空时D为null类型可以看到这个Axios类中主要的方法就是request方法,用于发起实际的网络请求而且他还在Axios的原型链上绑定了我们常用的一些请求类型并在绑定的方法体内去调用request方法config信息也就是将我们在axios.get方法中的配置信息使用mergeConfig方法合并起来最终返回一个AxiosRequestConfig对象。importReactfromreact;import{View,Text,Dimensions,StyleSheet,Image,TextInput,TouchableOpacity,Alert}fromreact-native;import{Modal,ModalContent,ModalPortal}fromreact-native-modals;//获取屏幕的宽高constscreenWidthMath.round(Dimensions.get(window).width);constscreenHightMath.round(Dimensions.get(window).height);importaxiosfromaxios;constAppStylesStyleSheet.create({wrap:{width:100%,height:screenHight,backgroundColor:#85BDFF},title:{width:100%,height:72,fontFamily:OPPOSans, OPPOSans,fontWeight:normal,paddingTop:50,fontSize:36,color:#304057,lineHeight:72,textAlign:center,fontStyle:normal},banner:{paddingTop:50,paddingRight:32,paddingLeft:32,},bannerItem:{paddingTop:10,display:flex,flexDirection:row,alignItems:center,justifyContent:center,width:50%,},loginBox:{position:relative,width:100%,paddingTop:29,paddingLeft:20,paddingRight:20,borderTopRightRadius:30,borderTopLeftRadius:30,backgroundColor:#F2F8FF,flex:1},loginBoxCode:{marginTop:20,position:relative,width:100%,},loginBoxCodeBtn:{position:absolute,right:4,top:4,width:110,height:40,lineHeight:40,borderRadius:10,backgroundColor:#1669E3,textAlign:center,fontWeight:bold,fontSize:14,color:#FFFFFF,},loginBtn:{position:absolute,left:20,bottom:30,width:100%,height:48,lineHeight:48,borderRadius:10,backgroundColor:#1669E3,textAlign:center,fontWeight:bold,fontSize:14,color:#FFFFFF,}})functionHomePath(){const[phone,onChangePhone]React.useState();const[code,onChangeCode]React.useState();const[visible,setVisible]React.useState(false);constsubmitLogin(){console.log(submitLogin,phone,code);varregex/^1[3-9]\d{9}$/;if(!regex.test(phone)){Alert.alert(请输入正确的手机号码);return;}varregex/^\d{6}$/;if(!regex.test(code)){Alert.alert(请输入正确的验证码);return;}// setVisible(true);axios.get(https://xxx.com/id_type?t1764427207873).then(function(response){console.log(get id_type success:,JSON.stringify(response));Alert.alert(JSON.stringify(response));// navigation.navigate(IndexPath)}).catch(function(error){console.log(error);});}return(View style{AppStyles.wrap}Text style{AppStyles.title}鸿蒙ReactNative系统/TextView style{AppStyles.banner}View style{{display:flex,flexDirection:row,justifyContent:space-between}}View style{AppStyles.bannerItem}Image style{{width:27,height:27}}source{require(./images/checked.png)}/ImageText style{{paddingLeft:4}}实时业绩便捷查询/Text/ViewView style{AppStyles.bannerItem}Image style{{width:27,height:27}}source{require(./images/checked.png)}/ImageText style{{paddingLeft:4}}订单状态轻松把控/Text/View/ViewView style{{display:flex,flexDirection:row,justifyContent:space-between}}View style{AppStyles.bannerItem}Image style{{width:27,height:27}}source{require(./images/checked.png)}/ImageText style{{paddingLeft:4}}宣传数据全程管理/Text/ViewView style{AppStyles.bannerItem}Image style{{width:27,height:27}}source{require(./images/checked.png)}/ImageText style{{paddingLeft:4}}海量素材一站转发/Text/View/View/ViewImage style{{width:289,height:182,display:flex,alignSelf:center,margin:20}}source{require(./images/login-bg.png)}/ImageView style{AppStyles.loginBox}TextInput style{{width:100%,height:48,borderRadius:10,backgroundColor:#FFFFFF,paddingLeft:16,paddingRight:16,fontSize:14,color:#304057}}placeholder请输入手机号onChangeText{onChangePhone}value{phone}keyboardTypenumericmaxLength{11}/TextInputView style{AppStyles.loginBoxCode}TextInput style{{width:100%,height:48,borderRadius:10,backgroundColor:#FFFFFF,paddingLeft:16,paddingRight:16,fontSize:14,color:#304057}}placeholder请输入验证码onChangeText{onChangeCode}value{code}keyboardTypenumericmaxLength{6}/TextInputText style{AppStyles.loginBoxCodeBtn}获取验证码/Text/ViewTouchableOpacity style{AppStyles.loginBtn}onPress{submitLogin}Text style{{fontSize:14,color:#FFFFFF,lineHeight:48,textAlign:center,fontWeight:bold}}登陆/Text/TouchableOpacity/ViewModalPortalModal visible{visible}onTouchOutside{(){setVisible(false)}}onSwipeOut{()setVisible(false)}ModalContentText登录成功欢迎使用我们的应用。/TextText手机号{phone}/TextTouchableOpacity style{{marginTop:20,padding:10,backgroundColor:#1669E3,borderRadius:5}}onPress{()setVisible(false)}Text style{{color:#FFFFFF,textAlign:center}}确定/Text/TouchableOpacity/ModalContent/Modal/ModalPortal/View);}接下来通过打包命令npn run harmony将reactNative的代码打包成为bundle这样可以进行在开源鸿蒙OpenHarmony中进行使用。接下来将bundle文件复制到鸿蒙的项目工程中进行引入然后正常打包后可以看到以下的运行效果这里请求成功了但是提示没有项目的ID参数不存在这里是没有传Header头。欢迎大家加入开源鸿蒙跨平台开发者社区一起共建开源鸿蒙跨平台生态。