React Native的API請(qǐng)求封裝實(shí)踐

在React Native中，封裝API請(qǐng)求可以提高代碼的可維護(hù)性和復(fù)用性。以下是一個(gè)簡(jiǎn)單的API請(qǐng)求封裝實(shí)踐示例：

1. 首先，安裝axios庫(kù)，用于發(fā)送HTTP請(qǐng)求：

npm install axios

2. 創(chuàng)建一個(gè)名為api.js的文件，用于存放API請(qǐng)求封裝：

import axios from 'axios';

// 創(chuàng)建axios實(shí)例
const instance = axios.create({
  baseURL: 'https://api.example.com', // API基礎(chǔ)URL
  timeout: 1000, // 請(qǐng)求超時(shí)時(shí)間
  headers: {
    'Content-Type': 'application/json',
  },
});

// 請(qǐng)求攔截器
instance.interceptors.request.use(
  (config) => {
    // 在發(fā)送請(qǐng)求之前做些什么，例如添加token
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    // 對(duì)請(qǐng)求錯(cuò)誤做些什么
    return Promise.reject(error);
  }
);

// 響應(yīng)攔截器
instance.interceptors.response.use(
  (response) => {
    // 對(duì)響應(yīng)數(shù)據(jù)做點(diǎn)什么
    return response.data;
  },
  (error) => {
    // 對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么
    return Promise.reject(error);
  }
);

// 封裝請(qǐng)求方法
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請(qǐng)求的地方，引入api.js文件并使用封裝好的方法：

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

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

  useEffect(() => {
    // 獲取數(shù)據(jù)
    getRequest('/data')
      .then((response) => {
        setData(response);
      })
      .catch((error) => {
        console.error('Error fetching data:', error);
      });
  }, []);

  // 其他邏輯...

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

通過(guò)這種方式，你可以將API請(qǐng)求封裝在api.js文件中，并在需要的地方引入和使用。這樣可以提高代碼的可維護(hù)性和復(fù)用性。