react native實現(xiàn)往服務器上傳網(wǎng)絡圖片的實例

let common_url = 'http://192.168.1.1:8080/'; //服務器地址
let token = ''; //用戶登陸后返回的token
/** 
 * 使用fetch實現(xiàn)圖片上傳
 * @param {string} url 接口地址
 * @param {JSON} params body的請求參數(shù)
 * @return 返回Promise 
 */
function uploadImage(url,params){
 return new Promise(function (resolve, reject) {
 let formData = new FormData();
 for (var key in params){
 formData.append(key, params[key]);
 }
 let file = {uri: params.path, type: 'application/octet-stream', name: 'image.jpg'};
 formData.append("file", file);
 fetch(common_url + url, {
 method: 'POST',
 headers: {
 'Content-Type': 'multipart/form-data;charset=utf-8',
 "x-access-token": token,
 },
 body: formData,
 }).then((response) => response.json())
 .then((responseData)=> {
 console.log('uploadImage', responseData);
 resolve(responseData);
 })
 .catch((err)=> {
 console.log('err', err);
 reject(err);
 });
 });

let params = {
 userId:'abc12345', //用戶id
 path:'file:///storage/emulated/0/Pictures/image.jpg' //本地文件地址
}
uploadImage('app/uploadFile',params )
 .then( res=>{
 //請求成功
 if(res.header.statusCode == 'success'){
 //這里設定服務器返回的header中statusCode為success時數(shù)據(jù)返回成功
 upLoadImgUrl = res.body.imgurl; //服務器返回的地址
 }else{
 //服務器返回異常，設定服務器返回的異常信息保存在 header.msgArray[0].desc
 console.log(res.header.msgArray[0].desc);
 }
 }).catch( err=>{ 
 //請求失敗
 })

let file = {uri: params.path, type: 'application/octet-stream', name: 'image.jpg'}中的type也可能是multipart/form-data
formData.append("file", file)中的的file字段也可能是images

return fetch('http://facebook.github.io/react-native/movies.json')
 .then((response) => response.json())
 .then((responseJson) => {
 return responseJson.movies;
 })
 .catch((error) => {
 console.error(error);
 });

let common_url = 'http://192.168.1.1:8080/'; //服務器地址
let token = ''; 
/**
 * @param {string} url 接口地址
 * @param {string} method 請求方法：GET、POST，只能大寫
 * @param {JSON} [params=''] body的請求參數(shù)，默認為空
 * @return 返回Promise
 */
function fetchRequest(url, method, params = ''){
 let header = {
 "Content-Type": "application/json;charset=UTF-8",
 "accesstoken":token //用戶登陸后返回的token，某些涉及用戶數(shù)據(jù)的接口需要在header中加上token
 };
 console.log('request url:',url,params); //打印請求參數(shù)
 if(params == ''){ //如果網(wǎng)絡請求中沒有參數(shù)
 return new Promise(function (resolve, reject) {
 fetch(common_url + url, {
 method: method,
 headers: header
 }).then((response) => response.json())
 .then((responseData) => {
 console.log('res:',url,responseData); //網(wǎng)絡請求成功返回的數(shù)據(jù)
 resolve(responseData);
 })
 .catch( (err) => {
 console.log('err:',url, err); //網(wǎng)絡請求失敗返回的數(shù)據(jù) 
 reject(err);
 });
 });
 }else{ //如果網(wǎng)絡請求中帶有參數(shù)
 return new Promise(function (resolve, reject) {
 fetch(common_url + url, {
 method: method,
 headers: header,
 body:JSON.stringify(params) //body參數(shù)，通常需要轉換成字符串后服務器才能解析
 }).then((response) => response.json())
 .then((responseData) => {
 console.log('res:',url, responseData); //網(wǎng)絡請求成功返回的數(shù)據(jù)
 resolve(responseData);
 })
 .catch( (err) => {
 console.log('err:',url, err); //網(wǎng)絡請求失敗返回的數(shù)據(jù) 
 reject(err);
 });
 });
 }
}

fetchRequest使用如下：
GET請求：
fetchRequest('app/book','GET')
 .then( res=>{
 //請求成功
 if(res.header.statusCode == 'success'){
 //這里設定服務器返回的header中statusCode為success時數(shù)據(jù)返回成功

 }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時數(shù)據(jù)返回成功

 }else{
 //服務器返回異常，設定服務器返回的異常信息保存在 header.msgArray[0].desc 
 console.log(res.header.msgArray[0].desc);
 }
 }).catch( err=>{ 
 //請求失敗
 })

/**
 * 讓fetch也可以timeout
 * timeout不是請求連接超時的含義，它表示請求的response時間，包括請求的連接、服務器處理及服務器響應回來的時間
 * fetch的timeout即使超時發(fā)生了，本次請求也不會被abort丟棄掉，它在后臺仍然會發(fā)送到服務器端，只是本次請求的響應內(nèi)容被丟棄而已
 * @param {Promise} fetch_promise fetch請求返回的Promise
 * @param {number} [timeout=10000] 單位：毫秒，這里設置默認超時時間為10秒
 * @return 返回Promise
 */
function timeout_fetch(fetch_promise,timeout = 10000) {
 let timeout_fn = null; 

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

 //這里使用Promise.race，以最快 resolve 或 reject 的結果來傳入后續(xù)綁定的回調(diào)
 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的請求參數(shù)，默認為空
 * @return 返回Promise
 */
function fetchRequest(url, method, params = ''){
 let header = {
 "Content-Type": "application/json;charset=UTF-8",
 "accesstoken":token //用戶登陸后返回的token，某些涉及用戶數(shù)據(jù)的接口需要在header中加上token
 };
 console.log('request url:',url,params); //打印請求參數(shù)
 if(params == ''){ //如果網(wǎng)絡請求中沒有參數(shù)
 return new Promise(function (resolve, reject) {
 timeout_fetch(fetch(common_url + url, {
 method: method,
 headers: header
 })).then((response) => response.json())
 .then((responseData) => {
 console.log('res:',url,responseData); //網(wǎng)絡請求成功返回的數(shù)據(jù)
 resolve(responseData);
 })
 .catch( (err) => {
 console.log('err:',url, err); //網(wǎng)絡請求失敗返回的數(shù)據(jù) 
 reject(err);
 });
 });
 }else{ //如果網(wǎng)絡請求中帶有參數(shù)
 return new Promise(function (resolve, reject) {
 timeout_fetch(fetch(common_url + url, {
 method: method,
 headers: header,
 body:JSON.stringify(params) //body參數(shù)，通常需要轉換成字符串后服務器才能解析
 })).then((response) => response.json())
 .then((responseData) => {
 console.log('res:',url, responseData); //網(wǎng)絡請求成功返回的數(shù)據(jù)
 resolve(responseData);
 })
 .catch( (err) => {
 console.log('err:',url, err); //網(wǎng)絡請求失敗返回的數(shù)據(jù) 
 reject(err);
 });
 });
 }
}