React Native的API请求封装实践

在React Native中，封装API请求可以提高代码的可维护性和复用性。以下是一个简单的API请求封装实践示例：

1. 首先，安装axios库，用于发送HTTP请求：

npm install axios

2. 创建一个名为api.js的文件，用于存放API请求封装：

import axios from 'axios';

// 创建axios实例
const instance = axios.create({
  baseURL: 'https://api.example.com', // API基础URL
  timeout: 1000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json',
  },
});

// 请求拦截器
instance.interceptors.request.use(
  (config) => {
    // 在发送请求之前做些什么，例如添加token
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  (response) => {
    // 对响应数据做点什么
    return response.data;
  },
  (error) => {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

// 封装请求方法
export const getRequest = (url, params) => {
  return instance.get(url, { params });
};

export const postRequest = (url, data) => {
  return instance.post(url, data);
};

export const putRequest = (url, data) => {
  return instance.put(url, data);
};

export const deleteRequest = (url, params) => {
  return instance.delete(url, { params });
};

3. 在需要使用API请求的地方，引入api.js文件并使用封装好的方法：

import React, { useEffect, useState } from 'react';
import { getRequest, postRequest, putRequest, deleteRequest } from './api';

const MyComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    // 获取数据
    getRequest('/data')
      .then((response) => {
        setData(response);
      })
      .catch((error) => {
        console.error('Error fetching data:', error);
      });
  }, []);

  // 其他逻辑...

  return (
    // 渲染组件...
  );
};

通过这种方式，你可以将API请求封装在api.js文件中，并在需要的地方引入和使用。这样可以提高代码的可维护性和复用性。