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

axios详细步调

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

  复制代码
  或
  
  1. yarn add axios

  复制代码
  这将在您的项目中安装 Axios。
  
• 在您的 Vue 3 项目中创建一个用于发送 HTTP 哀求的模块或文件，比如 http.js。
  
• 在 http.js 文件中导入 Axios：
  
  1. import axios from 'axios';

  复制代码
• 创建一个 Axios 实例，并进行必要的配置。您可以根据必要添加全局的默认配置和拦截器等。以下是一个简单的示例：
  
  1. const http = axios.create({
  2.   baseURL: 'http://api.example.com', // 设置基础 URL
  3.   // 其他配置...
  4. });

  复制代码
  这里的 baseURL 是可选的，根据您的必要进行设置。
  
• 在必要发送哀求的组件中导入 http.js 并使用创建的 Axios 实例发送哀求。比方，在组件的方法中使用 http 对象发送 HTTP 哀求：
  
  1. import http from './http';
  3. // ...
  5. methods: {
  6.   fetchData() {
  7.     http.get('/api/data')
  8.       .then(response => {
  9.         // 处理成功的响应
  10.         console.log(response.data);
  11.       })
  12.       .catch(error => {
  13.         // 处理错误
  14.         console.error(error);
  15.       });
  16.   }
  17. }

  复制代码
  这里的 /api/data 是您具体的哀求路径，根据您的后端 API 进行设置。
  

axios代码详解

1. 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 哀求来获取数据，然后将返回的数据设置到组件的数据中，从而使得数据能够渲染到页面上。

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

复制代码

这段代码使用 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’ 路径。

1. requestInstance.interceptors.response.use(
2.   function (response) {
3.     const { code, message, data } = response.data;
4.     if (code === 100) {
5.       return data;
6.     }
7.     return Promise.reject(message);
8.   },
9.   function (error) {
10.     return Promise.reject(error);
11.   }
12. );

复制代码

这段代码使用 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() 方法。
通过设置这个响应拦截器，我们可以在每个哀求的响应中进行一些通用的处理，比方根据不同的响应状态码进行不同的利用，或者同一处理响应的数据结构。

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

复制代码

这段代码界说了一个名为 AddEmployee(Employee) 的函数，该函数用于向服务器发送一个 POST 哀求来添加新员工。
函数内部使用了 requestInstance.post() 方法来发送哀求。requestInstance 是之前创建的 axios 实例，通过该实例发送的哀求会带有之前配置的 baseURL。
requestInstance.post() 方法吸收两个参数：要发送的哀求路径和要发送的数据。在这里，哀求路径是 ‘Employee/AddEmployee’，相对于之前设置的 baseURL 进行拼接得到完备的 URL。
第二个参数 Employee 是要发送的数据，它作为一个对象通报给该方法。这个数据将会被序列化为哀求的主体，并包罗在哀求中。
此函数返回 requestInstance.post() 方法的结果，即一个 Promise 对象。这个 Promise 对象将在哀求乐成时解析为服务器返回的数据，或在哀求失败时被拒绝，并将错误信息通报给 .catch() 方法或后续的 .catch() 调用链。

1. 在需要发送请求的组件中导入 http.js 并使用创建的 Axios 实例发送请求。例如，在组件的方法中使用 http 对象发送 HTTP 请求：
3. const getAllEmployee = async () => {
4.   try {
5.     Employee.value = await http.GetAllEmployee();
6.     loading.value = false;
7.     console.log(Employee.value);
8.   } catch (error) {
9.     ElMessage({
10.       message: error,
11.       type: 'error',
12.       duration: 1000,
13.       onClose: () => {
14.         loading.value = false;
15.       },
16.     });
17.   }
18. };

复制代码

这段代码界说了一个异步函数 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 的状态。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。