1. 前后端通信

1.1. axios

1.1.1. 安装与使用

npm install axios

axios提供了多种简化HTTP请求的方法，使得与RESTful API的交互变得简单直观。以下是axios常用的几种方法。

[插图] axios.get(url[, config])：用于发送GET请求，获取数据。

[插图] axios.post(url, data[, config])：用于发送POST请求，提交数据。

[插图] axios.put(url, data[, config])：用于发送PUT请求，更新全部数据。

[插图] axios.delete(url[, config])：用于发送DELETE请求，删除数据。

[插图] axios.patch(url, data[, config])：用于发送PATCH请求，更新部分数据。

1.1.2. GET请求

import axios from 'axios';
// 发送 GET 请求
axios.get('https://api.example.com/items')
  .then(response => {
    console.log(response.data);                    // 处理响应数据
  })
  .catch(error => {
    console.error('Error fetching data:', error);  // 处理错误
  });

1.1.3. POST请求

。
import axios from 'axios';
const item = {
  title: 'New Item',
  description: 'Description of the new item'
};
axios.post('https://api.example.com/items', item)
  .then(response => {
    console.log('Item created:', response.data);             // 处理响应数据
  })
  .catch(error => {
    console.error('Error creating item:', error);  // 处理错误
  });

1.1.4. config对象

axios的config对象是一个可选参数，用于自定义请求的各种设置。以下是一些常见的配置选项和使用方法。

[插图] headers：自定义请求头。

[插图] params：URL参数，主要用于GET请求。

[插图] responseType：响应数据类型，如json、blob、document等。

[插图] timeout：设置请求的超时时间（毫秒）。

1.1.4.1. GET请求时带有URL参数

axios.get('https://api.example.com/items', {
  params: {
    userID: 12345
  }
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

在这个示例中，params对象包含要附加到URL的查询参数，如userID: 12345。这将使请求的完整URL变为https://api.example.com/items?userID=12345。

1.1.4.2. POST请求中设置自定义头部

axios.post('https://api.example.com/items', {
  title: 'New Item',
  description: 'Description of the new item'
}, {
  headers: {
    'Content-Type': 'application/json'
  }
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

在这个示例中，axios.post()方法的第三个参数是配置对象。这里的headers设置了请求头部，指定'Content-Type': 'application/json'，告诉服务器发送的数据是JSON格式。

1.1.5. 结合vue组件

在mounted中发送请求，示例如下。

<script setup>
  import { onMounted } from 'vue';
import axios from 'axios';
onMounted(() => {
  axios.get('https://api.example.com/data')
    .then(response => {
      // 处理响应数据
      // 如更新组件的状态
    })
    .catch(error => {
      // 处理错误情况
      // 如显示错误消息
    });
});
</script>

代码解释如下。

[插图] 使用onMounted钩子确保请求在组件完全加载和渲染之后发出。

[插图] 在请求的.then部分处理服务器的响应，可以更新组件的状态或处理数据。

[插图] 在.catch部分处理可能发生的错误，如网络问题或服务器错误。

1.1.6. 结合async/await

当结合使用axios和async/await时，可以更简洁且高效地处理HTTP请求和响应。Async/await是一种现代的JavaScript异步处理方法，能够以更接近同步编程的风格编写异步代码。

相比基于回调或.then().catch()的链式调用，async/await提供了更直观且易于理解的代码结构。使用axios与async/await的优化步骤如下。

(1)使用axios的各种方法（如get、post、put、delete等）发送请求，这些方法返回一个Promise对象。

(2)在标记为async的函数中，使用await关键字来暂停函数执行，直到Promise被解决（即请求完成）。

(3)这种方式允许将异步HTTP请求的结果直接赋值给变量，例如，const response =await axios.get('https://api.example.com/data');。

async/await语法的另一个优势是简化了错误处理。通过将请求逻辑封装在try…catch块中，可以更容易地捕获并处理请求过程中可能发生的任何异常。在catch块中，可以处理这些异常，如打印错误信息或对用户显示错误提示。

import axios from 'axios';
async function fetchData() {
  try {
    const response = await axios.get('https://api.example.com/data');
    console.log(response.data);                              // 处理响应数据
  } catch (error) {
    console.error('Error fetching data:', error);            // 处理错误
  }
}
fetchData();

在这个示例中：

[插图] fetchData是一个异步函数，用于发送HTTP GET请求。

[插图] 使用await axios.get(…)发送请求，并等待响应。

[插图] 如果请求成功，则response.data包含响应数据。如果请求失败，则catch块捕获并处理错误

1.1.7. Multipart请求

(1)创建FormData实例：FormData用于构建一组键-值对，代表表单字段和其值。

(2)添加数据到FormData：使用append()方法向FormData对象添加数据。这些数据可以是文本字段或文件。

(3)发送请求：使用axios发送请求，将FormData对象作为请求体。

基于上述步骤的完整示例如下。

import axios from 'axios';
// 创建 FormData 实例
const formData = new FormData();
// 添加文本字段
formData.append('username', 'exampleUser');
formData.append('email', 'user@example.com');
// 添加文件，这里的fileInput是一个指向文件输入元素的引用
// 假设fileInput是一个包含文件的HTML input元素
const fileInput = document.querySelector('input[type="file"]');
if (fileInput.files[0]) {
  formData.append('profilePicture', fileInput.files[0]);
}
// 发送Multipart请求
axios.post('https://api.example.com/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})
  .then(response => {
    console.log('Upload successful:', response.data);
  })
  .catch(error => {
    console.error('Upload error:', error);
  });

在这个例子中：

[插图] 使用FormData的append()方法添加了文本字段和文件。

[插图] 在发送axios请求时，通常设置Content-Type为multipart/form-data。

[插图] axios将formData对象作为请求体发送，服务器将接收到一个Multipart请求。

从axios v0.27.0版本开始，当请求头中的Content-Type设置为multipart/form-data时，axios会自动将普通对象序列转换成一个FormData对象，从而简化了发送Multipart请求的过程。

示例代码如下。

import axios from 'axios';
// 普通的JavaScript对象
const data = {
  username: 'exampleUser',
  email: 'user@example.com',
  // 文件引用需要从文件输入元素获取
  profilePicture: document.querySelector('input[type="file"]').files[0]
};
// 发送Multipart请求
axios.post('https://api.example.com/upload', data, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})
  .then(response => {
    console.log('Upload successful:', response.data);
  })
  .catch(error => {
    console.error('Upload error:', error);
  });

在这个例子中，data是一个包含用户名、电子邮件和文件的普通JavaScript对象，axios会在内部将这个对象转换为FormData实例。

此种方式无须手动创建和填充FormData，除非要进行更复杂的操作（如追加多个文件或设置复杂的数据结构）。

1.1.8. Vue全局配置

全局配置axios实例并设定baseURL是Vue 3应用中的一个实用做法。这主要适用于那些所有HTTP请求都指向同一API端点的应用，可以有效减少代码重复并提高维护效率。

要实现Vue全局配置，在Vue 3项目中，首先需要创建一个配置了baseURL的axios实例。后续的请求发送都通过此实例完成，以确保所有的HTTP请求都自动使用这个baseURL。

1.1.8.1. 创建并配置axios实例

例如，新建axios.js文件，代码如下。

// src/axios.js
import axios from 'axios';
const axiosInstance = axios.create({
  baseURL: 'https://api.example.com' // 替换为API基础URL
});
export default axiosInstance;

代码解释如下。

[插图] axios.create()方法创建自定义axios实例，在方法中可以配置基础URL、头部、超时时间等信息。

[插图] baseURL被设置为https://api.example.com。这意味着对于这个axios实例发起的任何请求，这个URL都将作为请求URL的前缀。例如，使用这个实例调用.get('/users')，那么实际请求的URL将是https://api.example.com/users。从而避免在每个请求中重复写入完整的URL。

1.1.8.2. 导入并挂载axios实例

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import axios from './axios';
const app = createApp(App);
app.config.globalProperties.$axios = axios; // 将axios添加到Vue全局属性
app.mount('#app');

代码解释如下。

[插图] 在Vue 3中，app.config.globalProperties用于定义全局属性。这些属性在应用的所有组件中都是可用的。这意味着一旦某个属性被添加到globalProperties，它就可以在应用中的任何组件内通过this关键字被访问。

[插图] app.config.globalProperties.$axios = axios;这行代码实际上是在globalProperties对象上创建了一个新的属性$axios，并将其值设置为导入的axios实例。这样做的结果是，在Vue应用的任何组件中都可以通过this.$axios访问到这个axios实例。

1.1.8.3. 使用

<script setup>
import { ref, getCurrentInstance } from 'vue';
const responseData = ref(null);
const { proxy } = getCurrentInstance();                // 获取组件实例
const fetchData = async () => {
  try {
    // 使用相对路径，baseURL 会自动加上
    const response = await proxy.$axios.get('/items');
    responseData.value = response.data;                 // 存储响应数据
  } catch (error) {
    console.error('Error fetching data:', error);       // 处理错误
  }
};
fetchData();
</script>

代码解释如下。

[插图] 创建响应式变量：使用ref创建名为responseData的响应式变量，用于存储从服务器获取的数据。

[插图] 定义异步函数fetchData：此函数负责执行HTTP请求并处理响应。

[插图] 发起GET请求：使用proxy.$axios.get('/items')发送请求。这里proxy是Vue组件实例，通过它来访问全局属性$axios。'/items'是请求的相对路径，完整的URL由baseURL和此相对路径组成。

[插图] 处理响应和异常：如果请求成功，则存储响应数据到responseData；如果请求失败，则使用catch块捕获错误并在控制台输出错误信息。0