在集成终端打开，使用 npm 或 yarn 安装 Axios：
npm install axios
或
yarn add axios
这将在您的项目中安装 Axios。
在您的 Vue 3 项目中创建一个用于发送 HTTP 请求的模块或文件，比如?http.js。
在?http.js?文件中导入 Axios：
import axios from 'axios';
创建一个 Axios 实例，并进行必要的配置。您可以根据需要添加全局的默认配置和拦截器等。以下是一个简单的示例：
const http = axios.create({
baseURL: 'http://api.example.com', // 设置基础 URL
// 其他配置...
});
这里的?baseURL?是可选的，根据您的需要进行设置。
在需要发送请求的组件中导入?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 进行设置。
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?的状态。