当前位置：首页 > news >正文

【React Native】环境变量和封装 fetch

news 2025/7/15 18:14:01

环境变量和封装fetch

环境变量

一般做开发，都会将接口地址配置到环境变量里。在Expo建的项目里，也可以使用环境变量。

在项目根目录新建一个.env文件，里面添加上：

EXPO_PUBLIC_API_URL=http://localhost:3000

如果你用手机真机等局域网设备访问，就改成电脑的IP地址，例如：

EXPO_PUBLIC_API_URL=http://192.168.x.xx:3000

在Expo里：

环境变量的命名，全部要大写。
而且必须以EXPO_PUBLIC开头，后面再自己添加其他的。

安装 urlcat

封装请求文件之前，先去安装下urlcat包：

npm i urlcat

利用它，可以非常简单的拼接URL路径和查询参数。要不然就得自己很麻烦的处理URL路径里的?号和&符号。

例如传这些参数进去：

urlcat('http://localhost:3000', '/articles', { page: 1, limit: 10 })

它就会自动转换成：

http://localhost:3000/articles?page=1&limit=10

封装 request

在headers里，告诉接口，返回的数据格式是JSON，发送的数据格式也是JSON。
config里，将各种参数都丢进去。根据React Native官方文档里的Fetch API 说明，传给接口的数据，要将JavaScript对象转为JSON字符串。

import urlcat from "urlcat";/*** 基础请求函数* @param { string } url - API 请求路径（如 '/articles'）* @param { object } [options] - 请求配置项* @param { string } [options.method='GET'] - HTTP 方法* @param { object } [options.params] - URL 查询参数（如 { page: 1, limit: 10 }）* @param { object } [options.body] - 请求体数据* @returns { Promise<object> } 返回解析后的JSON数据** @example* // 基础调用示例* request('/articles').then(data => console.log(data))** @example* // 带查询参数的 GET 请求* request('/articles', {*   params: { page: 1, limit: 10 }* })** @example* // POST 请求* // 提交表单数据* request('/auth/sign_in', {*   method: 'POST',*   body: { login: 'user', password: '123123' }* })*/
const request = async (url, { method = "GET", params, body } = {}) => {// 完整的接口地址const apiUrl = process.env.EXPO_PUBLIC_API_URL;const requestUrl = urlcat(apiUrl, url, params);// 请求头const headers = {Accept: "application/json","Content-Type": "application/json",// 待完成：传递 token};const config = {method,headers,...(body && { body: JSON.stringify(body) }),};const response = await fetch(requestUrl, config);if (!response.ok) {// 待完成：登录超时处理const { message, errors } = await response.json().catch(() => null);const error = new Error(message);error.status = response.status;error.errors = errors;throw error;}return await response.json();
};/*** GET 请求* @param { string } url - 请求地址* @param { object } [params] - 查询参数* @returns { Promise<any> } 返回解析后的JSON数据** @example* // 基本 GET 请求* get('/articles').then(data => console.log(data))** @example* // 带查询参数的 GET 请求* get('/articles', { page: 1, limit: 10 })*/
export const get = (url, params) => request(url, { method: "GET", params });/*** POST 请求* @param { string } url - 请求地址* @param { object } body - 请求体数据* @returns { Promise<any> } 返回解析后的 JSON 数据** @example* // 提交表单数据* post('/auth/sign_in', { login: 'user', password: '123123' })*/
export const post = (url, body) => request(url, { method: "POST", body });/*** PUT 请求* @param { string } url - 请求地址* @param { object } body - 请求体数据* @returns { Promise<any> } 返回解析后的 JSON 数据** @example* // 更新数据* put('/users/info', { nickname: 'clwy', company: '长乐未央公司' })*/
export const put = (url, body) => request(url, { method: "PUT", body });/*** PATCH 请求* @param { string } url - 请求地址* @param { object } body - 请求体数据* @returns { Promise<any> } 返回解析后的 JSON 数据** @example* // 部分更新数据* 注意：本项目无任何接口使用 PATCH*/
export const patch = (url, body) => request(url, { method: "PATCH", body });/*** DELETE 请求* @param { string } url - 请求地址* @returns { Promise<any> } 返回解析后的 JSON 数据** @example* // 注销用户* del('/users/me')*/
export const del = (url) => request(url, { method: "DELETE" });export default request;

// const res = await fetch(`http://192.168.1.138/search?q=${keyword}`);
// const res = await request("/search", { params: { q: keyword } });
const res = await get("/search", { q: keyword });

  // 当依赖参数是一个对象或引用类型，例如 params，// 即使它的内容没有变化，每次组件重新渲染时它的引用都会不同。// 从而导致 useEffect 不断触发，会造成无限循环请求。// 可以使用 JSON.stringify(params) 转换为字符串，来解决这个问题。useEffect(() => {fetchData();}, [url, JSON.stringify(params)]);

查看全文

http://www.dtcms.com/a/280006.html