react native实现往服务器上传网络图片的实例

如下所示：

response.json()) .then((responseData)=> { console.log('uploadImage',responseData); resolve(responseData); }) .catch((err)=> { console.log('err',err); reject(err); }); });

使用方法

{ //请求成功 if(res.header.statusCode == 'success'){ //这里设定服务器返回的header中statusCode为success时数据返回成功 upLoadImgUrl = res.body.imgurl; //服务器返回的地址 }else{ //服务器返回异常，设定服务器返回的异常信息保存在 header.msgArray[0].desc console.log(res.header.msgArray[0].desc); } }).catch( err=>{ //请求失败 })

注意点

普通网络请求参数是JSON对象

图片上传的请求参数使用的是formData对象

总结：

React Native中虽然也内置了XMLHttpRequest 网络请求API(也就是俗称的ajax)，但XMLHttpRequest 是一个设计粗糙的 API，不符合职责分离的原则，配置和调用方式非常混乱，而且基于事件的异步模型写起来也没有现代的 Promise 友好。而Fetch 的出现就是为了解决 XHR 的问题，所以react Native官方推荐使用Fetch API。

fetch请求示例如下：

response.json()) .then((responseJson) => { return responseJson.movies; }) .catch((error) => { console.error(error); });

使用Promise封装fetch请求

response.json()) .then((responseData) => { console.log('res:',responseData); //网络请求成功返回的数据 resolve(responseData); }) .catch( (err) => { console.log('err:',err); //网络请求失败返回的数据 reject(err); }); }); }else{ //如果网络请求中带有参数 return new Promise(function (resolve,headers: header,body:JSON.stringify(params) //body参数，通常需要转换成字符串后服务器才能解析 }).then((response) => response.json()) .then((responseData) => { console.log('res:',responseData); //网络请求成功返回的数据 resolve(responseData); }) .catch( (err) => { console.log('err:',err); //网络请求失败返回的数据 reject(err); }); }); } }

使用fetch请求，如果服务器返回的中文出现了乱码，则可以在服务器端设置如下代码解决：

produces="text/html;charset=UTF-8"

{ //请求成功 if(res.header.statusCode == 'success'){ //这里设定服务器返回的header中statusCode为success时数据返回成功

}else{
  //服务器返回异常，设定服务器返回的异常信息保存在 header.msgArray[0].desc
  console.log(res.header.msgArray[0].desc);
}

}).catch( err=>{
//请求失败
})

POST请求：

let params = {
username:'admin',password:'123456'
}
fetchRequest('app/signin','POST',params)
.then( res=>{
//请求成功
if(res.header.statusCode == 'success'){
//这里设定服务器返回的header中statusCode为success时数据返回成功

}else{
  //服务器返回异常，设定服务器返回的异常信息保存在 header.msgArray[0].desc 
  console.log(res.header.msgArray[0].desc);
}

}).catch( err=>{
//请求失败
})

fetch超时处理

由于原生的Fetch API 并不支持timeout属性，如果项目中需要控制fetch请求的超时时间，可以对fetch请求进一步封装实现timeout功能，代码如下：

fetchRequest超时处理封装

//这是一个可以被reject的promise
let timeout_promise = new Promise(function(resolve,reject) {
timeout_fn = function() {
reject('timeout promise');
};
});

//这里使用Promise.race，以最快 resolve 或 reject 的结果来传入后续绑定的回调
let abortable_promise = Promise.race([
fetch_promise,timeout_promise
]);

setTimeout(function() {
timeout_fn();
},timeout);

return abortable_promise ;
}

let common_url = 'http://192.168.1.1:8080/'; //服务器地址
let token = '';
/**

@param {string} url 接口地址
@param {string} method 请求方法：GET、POST，只能大写
@param {JSON} [params=''] body的请求参数，默认为空
@return 返回Promise
*/
function fetchRequest(url,reject) {
timeout_fetch(fetch(common_url + url,headers: header
})).then((response) => response.json())
.then((responseData) => {
console.log('res:',body:JSON.stringify(params) //body参数，通常需要转换成字符串后服务器才能解析
})).then((response) => response.json())
.then((responseData) => {
console.log('res:',err); //网络请求失败返回的数据
reject(err);
});
});
}
}

以上这篇react native实现往服务器上传网络图片的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。

原文链接：https://www.f2er.com/js/37346.html