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 的状态。