1.fetch简介
React Native官方推荐使用Fetch API。 官方文档: React Native 网络请求官方文档
2.结构
- http.js fetch get post 封装
- api.js 所有请求的存放
3.代码
http.js
let common_url = 'https://xlite.kedacom.com/xlite/api'; //请求的url
let header = {
"Content-Type": "application/x-www-form-urlencoded",
"Cache-Control": "no-cache",
// "accesstoken": token //用户登陆后返回的token,某些涉及用户数据的接口需要在header中加上token
};
const http = {
get(url, params) {
if (params) {
let paramsArray = [];
//拼接参数
Object.keys(params).forEach(key => paramsArray.push(key + '=' + params[key]))
if (url.search(/\?/) === -1) {
url += '?' + paramsArray.join('&')
} else {
url += '&' + paramsArray.join('&')
}
}
return new Promise(function (resolve, reject) {
fetch(common_url + url)
.then((response) => response.json()
//将返回数据转化为json,也可以转为text(),否则无法看到返回数据,且必须回调才可以看到
)
.then((responseData) => {
resolve(responseData);
})
.catch((err) => {
console.log("err:",err)
reject(err);
});
});
},
post(url, params) {
return new Promise(function (resolve, reject) {
fetch(common_url + url, {
method: 'POST',
headers: header,
body: JSON.stringify(params) //body参数,通常需要转换成字符串后服务器才能解析
}).then((response) => response.json())
.then((responseData) => {
console.log('res:', url, responseData); //网络请求成功返回的数据
resolve(responseData);
})
.catch((err) => {
console.log('err:', url, err); //网络请求失败返回的数据
reject(err);
});
});
},
};
//导出
export default http;
所有api的封装: api.js
一般情况下我们会把所有的api请求封装到同一个文件里
import http from './http';
// promise的封装操作
function to(promise){
return promise
.then(data => {
return [null, data];
})
.catch(err => [err]);
}
const httpApi={
// login请求
async login(params) {
const url = '/userManage/login';
const [err, res] = await to(http.get(url, params));
if (err) {
//请求失败
return Object.assign(err, {
status: "406",
description: err.errMsg
}, true);
}
//请求成功
return res;
},
//logout 请求
async logout(params) {
const url = '/userManage/logout';
const [err, res] = await to(http.get(url, params));
if (err) {
return Object.assign(err, {
status: "406",
description: err.errMsg
}, true);
}
return res;
},
//其他业务请求.....
}
export default httpApi;
接下来我们到登录页login.js中调用一下
//1.首先导入api.js
import httpApi from '../utils/api';
//正文某一个登陆按钮方法
async toLogin() {
let params = {
username: "username",
password: "password",
};
//2.调用请求接口 ,传入参数即可
let res = await httpApi.login(params);
//请求回复的一些操作,这里根据你们的业务员需求和接口自定义
console.log(res)
}