在 React-TypeScript 应用中使用 Axios 调用 API 的更简洁、更高效的方式
在一个项目中，我需要调用多个 API，但我不想每次都重复调用 axios，所以我尝试使用 hook，但效果并不理想。后来我意识到，我可以创建一个辅助函数，在需要调用 API 时导入它。这篇文章会很短，因为我们只需要一个非常重要的解决方案。
为什么我们需要一个辅助函数
-
它能帮助开发者编写更简洁的代码。
-
它有助于区分关注点。
我们首先初始化您的项目并创建 React 应用，以下链接解释了如何创建 React 应用。
如何创建 React 应用
先决条件
-
React JS 基础知识
-
具备 TypeScript 基础知识
在你的 React 应用的 src 文件夹中，应该有一个名为
API.tsx 和 App.tsx 的文件。
我们将使用的软件包是 Axios - Axios 是一个 Javascript 库，用于在 nodeJS 中发出 Http 请求或从浏览器发出 XMLHttpRequests 请求，它还支持 ES6 Promise API。
要使用 Npm 或 yarn 安装 axios，我们使用：
yarn add axios
npm i axios -save
我们现在吃饭吧？
在 API.tsx 文件中，我们需要导入 axios 并设置必要的接口。
import axios from 'axios'
//interface for the Helper
interface Params {
baseUrl: string
headers : any
method: string
}
下一步是使用 Params 接口设置配置，该配置将包含 baseUrl 标头和方法值。
//....
//helper config
const config: Params = {
baseUrl: "https://jsonplaceholder.typicode.com/",
headers: {
"Authorization": "",
},
method: 'post'
}
然后，创建一个使用 axios 发送 POST 请求的异步函数，添加 axios 所需的参数，最后解析响应以及错误信息（如果有）。这有助于创建一个可重用的函数，用于发起 API 调用。
//helper function to be exported
export const postAPI = async (url: string, data: any): Promise<any> =>{
return await axios({
...postConfig,
url: `${postConfig.baseUrl}/${url}`,
data
}).then ( (response) => {
console.log(response)
return {
status: response.status,
data: response.data
}
}).catch((error) =>{
console.log(error)
return {
status: error.status,
data: error.response
}
})
}
总而言之，这可以归纳为：
//final code result
import axios from 'axios'
interface Params {
baseUrl: string
headers : any
method: string
}
const postConfig: Params = {
baseUrl: "https://jsonplaceholder.typicode.com/",
headers: {
"Authorization":
},
method: 'post'
}
import axios from 'axios'
interface Params {
baseUrl: string
headers : any
method: string
}
export const postAPI = async (url: string, data: any): Promise<any> =>{
return await axios({
...postConfig,
url: `${postConfig.baseUrl}/${url}`,
data
}).then ( (response) => {
console.log(response)
return {
status: response.status,
data: response.data
}
}).catch((error) =>{
console.log(error)
return {
status: error.status,
data: error.response
}
})
}
你也可以将其修改为 GET 请求，但配置将完全不同。
//config for get request note that the method as changed to get this is very important
const getConfig : Params = {
baseUrl: "https://jsonplaceholder.typicode.com",
headers: {
"Authorization":
},
method: 'get'
}
你的辅助函数将是
export const getAPI = async (url: string, data: any): Promise<any> =>{
return await axios({
...getConfig,
url: `${getConfig.baseUrl}/${url}/${data}`,
}).then ( (response) => {
console.log(response)
return {
status: response.status,
data: response.data
}
}).catch((error) =>{
console.log(error)
return {
status: error.status,
data: error.response
}
})
}
在代码的最后一部分，我们需要将辅助函数导入到代码中并渲染出来。这是任务的最后一部分。第一部分是保存数据的状态，然后我们还会包含一个调用辅助函数的函数。这个函数将放在 useEffect 中，因为我们需要它在渲染时运行。接下来，我们将响应映射到一个列表中。瞧！
//rendering our result to the browser
import {getAPI} from './API' // import the api helper
import React from "react";
export default function App() {
const [data, setData] = React.useState([]) // set state to hold the result
//function below triggers the helper function
const getData = () => getAPI("posts").then(
(res) => {
if(res.status === 200){
setData(res.data)
console.log(data)
}else{
console.log(res)
}
}
)
//this runs the getData trigger function as useEffect
React.useEffect(()=>{
getData()
}, [])
return (
<div className="App">
<ul>
{
//maps out our result for rendering
data.map((x) =>
<li>
{x.title}
</li>
)
}
</ul>
</div>
);
}
最终效果如图所示，您可以根据自己的喜好进行最后的润色。
如果您对这个概念还有其他疑问，或者您有更好的方法来阐述这个概念，请留言或与我联系。
感谢阅读
文章来源：https://dev.to/tuasegun/cleaner-and-better-way-for-calling-apis-with-axios-in-your-react-typescript-applications-3d3k