reactjs代码示例：安装antd及axios发送请求

一时失言乱红尘 2024-02-17 13:36 60阅读 0赞

在React项目中安装antd和axios，以及使用axios发送请求的步骤如下：

1.  安装antd：  
    打开终端，进入你的React项目目录，然后运行以下命令来安装antd：

npm install antd

或者

yarn add antd

1.  安装axios：  
    同样在终端中，运行以下命令来安装axios：

npm install axios

或者

yarn add axios

1.  创建ajax/index.js文件：  
    在你的React项目中创建一个新的文件，比如叫做ajax/index.js，然后在这个文件中添加以下代码：

import axios from "axios";
    axios.defaults.baseURL = "http://192.168.0.1:123"; // 设置请求的基础URL，这里只是一个示例，需要你替换成实际的基础URL
    axios.interceptors.request.use(function (config) {
         // 对请求进行拦截和处理，可以根据需要添加其他的拦截器和处理器
        if (config.method === "post") {
         return config; } // 这里只是示例，可以根据实际需求进行处理
    }, function (error) {
         return Promise.reject(error); }); // 对请求错误进行拦截和处理，返回一个Promise对象，可以根据实际需求进行处理
    axios.interceptors.response.use(function (response) {
         // 对响应进行拦截和处理，可以根据需要添加其他的拦截器和处理器
        if (response.status === 200) {
         return response.data; } // 这里只是示例，可以根据实际需求进行处理
    }, function (error) {
         return Promise.reject(error); }); // 对响应错误进行拦截和处理，返回一个Promise对象，可以根据实际需求进行处理

1.  使用axios发送请求：  
    在你的React组件中，你可以通过引入刚刚创建的ajax/index.js文件来使用axios发送请求。例如：

import axios from "./ajax"; // 引入刚刚创建的ajax/index.js文件中的axios对象
    axios.get("/api/data").then(response => {
         // 使用axios发送一个GET请求到指定的URL，并处理返回的响应数据
        console.log(response.data); // 在控制台输出响应数据，可以根据实际需求进行处理
    }).catch(error => {
         // 处理请求过程中发生的错误
        console.error(error); // 在控制台输出错误信息，可以根据实际需求进行处理
    });