React+TypeScript 接口二次封装与调用教程

// api.ts

import axios from 'axios';

export function callApi(url: string, method: string, data?: any) { const config = { method: method, url: url, data: data, };

return axios(config) .then(response => { return response.data; }) .catch(error => { console.log(error); throw error; }); }

// MyComponent.tsx

import { callApi } from './api.ts';

async function fetchData() { try { const data = await callApi('/api/data', 'GET'); console.log(data); // do something with data } catch (error) { console.log(error); // handle error } }

function MyComponent() { return (

); }

React+TypeScript 项目如何二次封装接口并调用接口内容

本文将详细介绍在 React+TypeScript 项目中如何对接口进行二次封装，并演示如何在组件中调用封装好的接口函数。

1. 创建一个 api.ts 文件，用于封装接口

首先，创建一个名为 api.ts 的文件，用于存放所有需要封装的接口函数。

2. 在 api.ts 文件中定义一个函数，用于调用后台接口

在 api.ts 文件中定义一个函数，该函数接收三个参数：

url: 接口的地址
method: 请求方法，例如 'GET'、'POST' 等
data: 请求数据（可选）

3. 在函数中使用 axios 库发送请求，并返回 Promise 对象

在函数中使用 axios 库发送请求，并将返回的 Promise 对象返回，以便在组件中使用 async/await 语法进行异步调用。

4. 在组件中引入 api.ts 文件，并调用该文件中定义的函数进行接口调用

在需要调用接口的组件中引入 api.ts 文件，并调用该文件中定义的函数进行接口调用。

5. 在接口调用成功后，处理返回的数据，并根据业务需求进行相应的操作

在接口调用成功后，处理返回的数据，并根据业务需求进行相应的操作，例如更新组件状态、渲染页面等。

示例代码

下面是一个简单的示例代码，演示如何在 React+TypeScript 项目中对接口进行二次封装，并如何在组件中调用封装好的接口函数。

api.ts

import axios from 'axios';

export function callApi(url: string, method: string, data?: any) {
  const config = {
    method: method,
    url: url,
    data: data,
  };

  return axios(config)
    .then(response => {
      return response.data;
    })
    .catch(error => {
      console.log(error);
      throw error;
    });
}

MyComponent.tsx

import { callApi } from './api.ts';

async function fetchData() {
  try {
    const data = await callApi('/api/data', 'GET');
    console.log(data);
    // do something with data
  } catch (error) {
    console.log(error);
    // handle error
  }
}

function MyComponent() {
  return (
    <div>
      <button onClick={fetchData}>Fetch Data</button>
    </div>
  );
}

总结

通过以上步骤和示例代码，可以学习如何在 React+TypeScript 项目中对接口进行二次封装，并演示如何在组件中调用封装好的接口函数。

注意：

使用 async/await 语法进行异步调用时，需要确保调用函数所在的函数也是异步函数，例如使用 async 关键字修饰。
在处理错误时，建议根据实际需求进行更详细的错误处理，例如显示错误提示信息、记录错误日志等。
在实际项目中，可以根据实际需求对接口封装进行更细致的优化，例如添加请求拦截器、响应拦截器等。

希望本文对您有所帮助。如有任何疑问，请随时提出。