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文件中，并在需要的地方引入和使用。這樣可以提高代碼的可維護性和復用性。