Vue 3 中安装并使用 Axios 详细步骤+样例代码详解

axios详细步骤

1. 在集成终端打开，使用 npm 或 yarn 安装 Axios：

   npm install axios
   

   或

   yarn add axios
   

   这将在您的项目中安装 Axios。

2. 在您的 Vue 3 项目中创建一个用于发送 HTTP 请求的模块或文件，比如?http.js。

3. 在?http.js?文件中导入 Axios：

   import axios from 'axios';
   

4. 创建一个 Axios 实例，并进行必要的配置。您可以根据需要添加全局的默认配置和拦截器等。以下是一个简单的示例：

   const http = axios.create({
     baseURL: 'http://api.example.com', // 设置基础 URL
     // 其他配置...
   });
   

   这里的?baseURL?是可选的，根据您的需要进行设置。

5. 在需要发送请求的组件中导入?http.js?并使用创建的 Axios 实例发送请求。例如，在组件的方法中使用?http?对象发送 HTTP 请求：

   import http from './http';
   
   // ...
   
   methods: {
     fetchData() {
       http.get('/api/data')
         .then(response => {
           // 处理成功的响应
           console.log(response.data);
         })
         .catch(error => {
           // 处理错误
           console.error(error);
         });
     }
   }
   

   这里的?/api/data?是您具体的请求路径，根据您的后端 API 进行设置。

axios代码详解

import axios from 'axios';

import axios from 'axios'?是 ES6 模块语法的一种形式，它用于导入一个名为?axios?的 JavaScript 模块。

axios?是一个流行的基于 Promise 的 HTTP 客户端，可以用于与后端服务器进行通信，发送 GET、POST、PUT、DELETE 等 HTTP 请求。它简化了向 RESTful API 发送异步请求的过程，并且可以在浏览器和 Node.js 环境下使用。如果要使用它，需要通过 NPM 或 CDN 引入相应的 axios 库或模块。

在这里，通过?import?语句导入了?axios?模块，可以在代码中调用?axios?的方法，发送 HTTP 请求获取数据。例如，可以在组件的?mounted?生命周期钩子函数中调用?axios.get()?方法发送一个 HTTP GET 请求来获取数据，然后将返回的数据设置到组件的数据中，从而使得数据能够渲染到页面上。

const requestInstance = axios.create({
    baseURL: 'http://106.14.120.88:6666/api/',
  });

这段代码使用 axios.create() 方法创建了一个名为 requestInstance 的 axios 实例。

通过 axios.create() 方法可以创建一个独立的 axios 实例，该实例可以具有自己的配置和默认选项，以及与全局的 axios 实例保持分离。这样可以灵活地使用不同的配置和选项来发送 HTTP 请求。

在这个实例中，配置对象包含了一个 baseURL 属性，它指定了请求的基础 URL。在这个例子中， baseURL 设置为 ‘http://106.14.120.88:6666/api/’，说明请求将会发送到远程服务器的 ‘http://106.14.120.88:6666/api/’ 路径下。

使用 baseURL 选项可以简化每个请求中的 URL 拼接，以及便于在多个请求中共享相同的基础 URL。

通过创建 requestInstance 实例，您可以在后续的代码中使用该实例来发送具有相同基础 URL 的请求，而无需重复设置每个请求的 URL。例如，可以使用 requestInstance.get('/users') 来发送一个 GET 请求到 ‘/api/users’ 路径。

requestInstance.interceptors.response.use(
  function (response) {
    const { code, message, data } = response.data;
    if (code === 100) {
      return data;
    }
    return Promise.reject(message);
  },
  function (error) {
    return Promise.reject(error);
  }
);

这段代码使用?requestInstance.interceptors.response.use()?方法给?requestInstance?实例添加了一个响应拦截器。

响应拦截器是在接收到响应数据之后，但在?.then()?或?.catch()?调用之前执行的函数。它允许您在处理响应数据之前对其进行任何必要的转换或处理。

具体到这段代码中，requestInstance.interceptors.response.use()?方法接受两个函数作为参数：一个用于处理成功的响应，另一个用于处理错误的响应。

第一个函数接收一个?response?参数，它表示从服务器返回的响应对象。在函数内部，使用解构赋值将?response.data?对象的?code、message?和?data?属性分别赋给相应的变量。

然后，通过检查?code?是否等于 100 来确定响应的有效性。如果?code?为 100，意味着服务器返回了有效的数据，这时候我们将返回?data，即响应数据的主体部分。

如果?code?不等于 100，说明服务器返回的数据有错误，我们会使用?Promise.reject()?方法返回一个被拒绝的 Promise，并传入错误消息?message。

第二个函数接收一个?error?参数，它表示请求过程中发生的错误。这个函数直接返回一个被拒绝的 Promise，并将错误对象传递给?Promise.reject()?方法。

通过设置这个响应拦截器，我们可以在每个请求的响应中进行一些通用的处理，例如根据不同的响应状态码进行不同的操作，或者统一处理响应的数据结构。

AddEmployee(Employee) {
    return requestInstance.post('Employee/AddEmployee', Employee);
  },

这段代码定义了一个名为?AddEmployee(Employee)?的函数，该函数用于向服务器发送一个 POST 请求来添加新员工。

函数内部使用了?requestInstance.post()?方法来发送请求。requestInstance?是之前创建的 axios 实例，通过该实例发送的请求会带有之前配置的 baseURL。

requestInstance.post()?方法接收两个参数：要发送的请求路径和要发送的数据。在这里，请求路径是 ‘Employee/AddEmployee’，相对于之前设置的 baseURL 进行拼接得到完整的 URL。

第二个参数?Employee?是要发送的数据，它作为一个对象传递给该方法。这个数据将会被序列化为请求的主体，并包含在请求中。

此函数返回?requestInstance.post()?方法的结果，即一个 Promise 对象。这个 Promise 对象将在请求成功时解析为服务器返回的数据，或在请求失败时被拒绝，并将错误信息传递给?.catch()?方法或后续的?.catch()?调用链。

在需要发送请求的组件中导入?http.js?并使用创建的 Axios 实例发送请求。例如，在组件的方法中使用?http?对象发送 HTTP 请求：

const getAllEmployee = async () => {
  try {
    Employee.value = await http.GetAllEmployee();
    loading.value = false;
    console.log(Employee.value);
  } catch (error) {
    ElMessage({
      message: error,
      type: 'error',
      duration: 1000,
      onClose: () => {
        loading.value = false;
      },
    });
  }
};

这段代码定义了一个异步函数?getAllEmployee()。它使用了?async/await?语法来处理异步操作。

在该函数中，首先使用?try/catch?块来捕获可能发生的异常。在?try?块中，代码通过调用?http.GetAllEmployee()?方法来获取所有员工的数据，并将返回的结果赋值给?Employee.value?变量。

接下来，将?loading.value?设置为?false，表示加载完成，然后通过?console.log()?打印?Employee.value?的值。

如果在执行获取员工数据的过程中发生了错误，将会进入?catch?块。在?catch?块中，通过?ElMessage?组件显示错误消息，并将消息类型设为 ‘error’。设置了持续时间为 1000 毫秒，并在消息关闭后执行一个回调函数，将?loading.value?设置为?false，表示加载完成。

总体而言，这段代码的作用是异步获取所有员工的数据，并在获取成功时更新?Employee.value?变量的值，并在发生错误时显示错误消息，并更新?loading.value?的状态。