如何在 React 中使用 Axios 库-51CTO.COM

开发 Web 应用程序中最重要的概念之一是数据获取。请求是应用程序功能的基础，无论您是从内容 API 还是以产品数据形式从后端获取数据，都必须以清晰、可扩展且非冗余的方式处理。今天给大家分享下如何在 React 使用 Axios 库，在分享使用前，我们先详细的了解下什么是 Axios。

什么是 Axios？

Axios 是一个基于 promise 的 HTTP 库，可以用在 JavaScript 和 Node.js 使中。它可以发送 get、post、put、delete 等请求，并且支持请求拦截、响应拦截、超时设置、请求取消等功能。Axios 使用简单，代码简洁，并且跨平台兼容性较好。

以下示例简单的展示了在原生 JS 中，如何使用 Axios。

// 安装 axios
npm install axios

// 引入 axios
import axios from 'axios'

// 发送 get 请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 发送 post 请求
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.

如何安装 Axios？

使用前，您须先使用 yarn 或 npm 将其安装到您的项目中，安装方法如下：

yarn add axios @types/axios

or

npm install axios @types/axios1.
2.
3.
4.
5.

简单的在 React 中进行调用

安装完成后，你可以在你的 React 应用中轻松使用 axios

import axios from "axios"

type Product = {
  id: string
  name: string,
}

const [product, setProduct] = useState<Product | null>(null)

const getData = async (): Promise<void> => {
  const productData = await axios.get('https://sample.api/product', {
    headers: {
      'X-Custom-Header': '0123456789'
    }
  }).catch(error => {
    console.log(error?.response.data)
    return null
  })
  setProduct(productData?.data || null)
}

useEffect(() => {
  getData()
}, [])1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

多个请求的处理

在上面的示例中，axios 用于从具有自定义请求头的 API 进行检索数据。但是，如果您在呈现页面组件之前使用相同的配置对相同的 API 进行多次调用怎么办？每次调用都传递使用的配置都是相同的，所以调整后的代码如下？

import axios from "axios"

type Product = {
  id: string
  name: string,
}

type Content = {
  title: string,
  body: string
}

const [product, setProduct] = useState<Product | null>(null)
const [content, setContent] = useState<Content | null>(null)

const getData = async (): Promise<void> => {
  const axiosInstance = axios.create({
    baseURL: 'https://sample.api',
    headers: {
      'X-Custom-Header': '0123456789'
    }
  })
  const productData = await axiosInstance
    .get('/product')
    .catch(error => {
      console.log(error?.response.data)
      return null
    })
 const contentData = await axiosInstance
  .get('/content').catch(error => {
    console.log(error?.response.data)
    return null
  })
  setProduct(productData?.data || null)
  setContent(contentData?.data || null)
}

useEffect(() => {
  getData()
}, [])1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.

实例的主要目的是创建一个新的具有自定义配置的axios实例；在上面的例子中，配置的逻辑是 baseURL（它将在每个调用的 URL 的开头，使您不必重复它）和请求头。

上面的代码现在更容易阅读和缩放；唯一剩下的冗余操作是对每个调用进行错误检查。

进一步完善和优化代码

将公共的逻辑抽取到一个自定义的 API 请求类中，新建文件 src/utils/api.ts ，示例代码如下：

import axios, { AxiosRequestConfig } from "axios"

export const api = (config: AxiosRequestConfig) => {
  const instance = axios.create(config)
  return {
    get: async (url: string) => {
      const result = await instance.get<{ data: any }>(url).catch((error: any) => {
        console.log(error?.response?.data)
        return null
      })
      return result
    }
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

接下来在组件中进行调用，示例代码如下：

import { api } from "./utils/api"

type Product = {
  id: string
  name: string,
}

type Content = {
  title: string,
  body: string
}

const [product, setProduct] = useState<Product | null>(null)
const [content, setContent] = useState<Content | null>(null)

const getData = async (): Promise<void> => {
  const instance = api({
    baseURL: 'https://sample.api',
    headers: {
      'X-Custom-Header': '0123456789'
    }
  })
  const productData = await instance.get('/product')
  const contentData = await instance.get('/content')
  setProduct(productData?.data || null)
  setContent(contentData?.data || null)
}

useEffect(() => {
  getData()
}, [])1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.

现在多余的错误捕获也消失了，代码是不是干净许多。

总结

今天的分享就到这里，你觉得这个实现怎么样？这对你有帮助吗？请在评论区分享您的想法。