青少年编程与数学 02-006 前端开发框架VUE 26课题、数据交互

一、Axios
二、Axios在Vue中的应用
三、数据格式
四、应用示例
- - 说明：
  - 服务器端接口：

课题摘要:本文介绍了Axios，一个基于Promise的HTTP客户端，用于浏览器和node.js中的HTTP请求处理。Axios的主要特点包括支持Promise API、转换请求和响应数据、防御XSRF、自动转换JSON数据等。文章提供了使用Axios发送GET和POST请求的示例，并讨论了其在Vue 3组合式API中的应用，包括安装Axios、在组件中引入Axios、使用setup函数发起HTTP请求、处理响应和错误。此外，还探讨了Axios支持的数据格式，如JSON、Text、Blob等，并提供了一个Vue 3组件示例，展示了用户信息表单的提交和查询显示功能，使用Axios与服务器端进行数据交互。

一、Axios

Axios 是一个基于 Promise 的HTTP客户端，用于浏览器和 node.js。它提供了一个简单的 API，用于向HTTP服务器发送请求，并处理返回的响应。Axios的主要特点包括：

从浏览器中创建 XMLHttpRequests：在前端应用中，Axios 允许你发送异步HTTP请求到REST端点。
从 node.js 发出 http 请求：在服务器端，Axios 可以使用 node.js 的 http 模块来发送请求。
支持 Promise API ：所有的请求均返回一个 Promise，这意味着你可以使用 .then() 和 .catch() 方法来处理响应和错误。
转换请求和响应数据：自动转换JSON数据。
客户端支持防御 XSRF：Axios 在请求时自动携带CSRF token，以防止跨站请求伪造攻击。
自动转换 JSON 数据：当请求或响应的数据类型为JSON时，Axios 会自动将数据转换为JavaScript对象。
客户端支持防御 XSRF：Axios 在请求时自动携带CSRF token，以防止跨站请求伪造攻击。
创建请求和响应的实例：Axios 允许你创建请求和响应的实例，这使得你可以在请求发送前后修改它们。
支持请求和响应的拦截器：你可以在请求发送前后或响应返回前后，添加拦截器来执行某些操作。
取消请求：Axios 支持取消请求，这对于处理长时间运行的请求或用户取消操作非常有用。
支持请求的超时设置：可以为请求设置超时时间，超过这个时间后请求将自动取消。
JSONP 支持：Axios 支持 JSONP 请求，这是一种跨域请求数据的技术。
防御重放攻击：通过添加时间戳和nonce，Axios 可以帮助防御重放攻击。

使用Axios非常简单，以下是发送一个GET请求和POST请求的基本示例：

javascript 复制代码

// 发送GET请求
axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error during fetching:', error);
  });

// 发送POST请求
axios.post('https://api.example.com/data', {
    title: 'Example Title',
    body: 'This is a new post.',
    userId: 1
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error during posting:', error);
  });

Axios是一个流行的库，因为它简单、易用，并且功能强大，适用于现代Web应用的开发。

二、Axios在Vue中的应用

在 Vue 3 中，组合式 API（Composition API）提供了一种新的方式来组织组件逻辑。使用组合式 API 时，你可以在 setup 函数中使用 Axios 来发起 HTTP 请求。以下是如何在 Vue 3 的组合式 API 中使用 Axios 的基本步骤：

安装 Axios ：

如果你还没有安装 Axios，可以通过 npm 或 yarn 来安装它。
bash 复制代码
```
npm install axios
```
或者
bash 复制代码
```
yarn add axios
```
在组件中引入 Axios ：

在你的 Vue 组件中，引入 Axios。
javascript 复制代码
```
import axios from 'axios';
```

使用 setup 函数 ：

在 setup 函数中，你可以定义响应式数据和方法来处理 Axios 请求。

javascript 复制代码

import { ref } from 'vue';
import axios from 'axios';

export default {
  setup() {
    // 定义响应式数据
    const data = ref(null);

    // 定义方法来发起 GET 请求
    const fetchData = async () => {
      try {
        const response = await axios.get('https://api.example.com/data');
        data.value = response.data;
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    // 在组件创建时调用 fetchData
    fetchData();

    // 返回响应式数据供模板使用
    return {
      data
    };
  }
};

在模板中使用响应式数据 ：

在你的组件模板中，你可以使用返回的响应式数据。

html 复制代码

<template>
  <div>
    <div v-if="data">Loaded data: {{ data }}</div>
    <div v-else>Loading...</div>
  </div>
</template>

处理 POST 请求和其他 HTTP 方法 ：

你也可以用类似的方式发起 POST 请求或其他类型的 HTTP 请求。

javascript 复制代码

const postData = async () => {
  try {
    const response = await axios.post('https://api.example.com/data', {
      title: 'Example Title',
      body: 'This is a new post.',
      userId: 1
    });
    console.log(response.data);
  } catch (error) {
    console.error('Error posting data:', error);
  }
};

使用 Axios 响应拦截器和请求拦截器 ：

你可以在 setup 函数中设置 Axios 的拦截器来处理请求和响应。

javascript 复制代码

axios.interceptors.request.use(config => {
  // 在发送请求之前做些什么
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

axios.interceptors.response.use(response => {
  // 对响应数据做点什么
  return response;
}, error => {
  // 对响应错误做点什么
  return Promise.reject(error);
});

使用组合式 API 时，你可以将 Axios 请求逻辑封装在 setup 函数中，这样可以保持组件的逻辑清晰和组织有序。

三、数据格式

Axios 支持多种数据格式，这些格式通常通过设置请求的 Content-Type 请求头或者通过 responseType 配置来指定。以下是 Axios 支持的一些主要数据格式：

JSON格式：
- 默认情况下，Axios 将响应数据解析为 JSON 对象。当发送请求时，如果数据已经是 JSON 格式，无需额外设置请求头，Axios 会自动将其发送为 application/json 类型。
- 示例：axios.get('/api/data').then(response => console.log(response.data))
Text格式：
- 通过设置 responseType: 'text'，可以将响应数据处理为文本字符串。
- 示例：axios.get('/api/text', { responseType: 'text' }).then(response => console.log(response.data))
Blob格式：
- 设置 responseType: 'blob' 可以将响应数据处理为 Blob 对象，适用于文件下载或图像处理等场景。
- 示例：axios.get('/api/file', { responseType: 'blob' }).then(response => { const url = URL.createObjectURL(response.data); ... })
ArrayBuffer格式：
- 设置 responseType: 'arraybuffer' 可以将响应数据处理为 ArrayBuffer 对象，适用于处理二进制数据，如音频或文件数据。
- 示例：axios.get('/api/audio', { responseType: 'arraybuffer' }).then(response => { const audioContext = new (window.AudioContext || window.webkitAudioContext)(); ... })
Document格式：
- 设置 responseType: 'document' 可以将响应数据解析为文档对象（DOM 对象），适用于处理 HTML/XML 文档。
- 示例：axios.get('/api/html', { responseType: 'document' }).then(response => console.log(response.data))
URL编码数据格式（application/x-www-form-urlencoded）：
- 适用于表单数据，Axios 可以通过设置请求头 Content-Type 为 application/x-www-form-urlencoded 发送编码后的表单数据。
- 示例：axios.post('/api/data', { key: 'value' }, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
文件上传格式（multipart/form-data）：
- 用于文件上传，Axios 可以通过设置请求头 Content-Type 为 multipart/form-data 发送表单数据，包括文件。
- 示例：axios.post('/api/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' } })

这些格式涵盖了大多数网络请求的场景，使得 Axios 成为一个灵活且强大的 HTTP 客户端。开发者可以根据后端接口的要求选择合适的数据格式进行请求和响应处理。

四、应用示例

下面是一个Vue 3 组件示例，它结合了用户信息表单的提交和查询显示功能。这个组件使用组合式 API 和 Axios 来与服务器端进行数据交互。

vue 复制代码

<template>
  <div>
    <h1>用户信息表单</h1>
    <form @submit.prevent="submitForm">
      <div>
        <label for="name">姓名:</label>
        <input type="text" id="name" v-model="user.name" required />
      </div>
      <div>
        <label for="email">邮箱:</label>
        <input type="email" id="email" v-model="user.email" required />
      </div>
      <button type="submit">提交</button>
    </form>

    <div v-if="error">
      <p>错误信息: {{ error }}</p>
    </div>

    <div v-if="success">
      <p>提交成功!</p>
    </div>

    <button @click="fetchUserInfo">查询用户信息</button>

    <div v-if="userInfo">
      <h2>用户信息:</h2>
      <ul>
        <li v-for="item in userInfo" :key="item.id">
          <p>姓名: {{ item.name }}</p>
          <p>邮箱: {{ item.email }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import axios from 'axios';

export default {
  setup() {
    const user = ref({ name: '', email: '' });
    const error = ref(null);
    const success = ref(false);
    const userInfo = ref([]);

    const submitForm = async () => {
      try {
        const response = await axios.post('/api/users', user.value);
        success.value = true;
        error.value = null;
        // 清空表单
        user.value = { name: '', email: '' };
        // 假设服务器返回新创建的用户信息，并添加到列表中
        userInfo.value.push(response.data);
      } catch (err) {
        error.value = err.response?.data?.message || '提交失败';
        success.value = false;
      }
    };

    const fetchUserInfo = async () => {
      try {
        const response = await axios.get('/api/users');
        userInfo.value = response.data; // 假设服务器返回用户列表
      } catch (err) {
        error.value = err.response?.data?.message || '查询失败';
        userInfo.value = [];
      }
    };

    return {
      user,
      error,
      success,
      userInfo,
      submitForm,
      fetchUserInfo,
    };
  },
};
</script>

<style>
/* 添加一些基本样式 */
input, button {
  margin: 10px 0;
  padding: 8px;
  font-size: 16px;
}
</style>

说明：

表单提交 ：用户填写姓名和邮箱后，点击提交按钮会触发 submitForm 方法，该方法使用 Axios 发起 POST 请求到 /api/users 接口。
查询用户信息 ：点击"查询用户信息"按钮会触发 fetchUserInfo 方法，该方法使用 Axios 发起 GET 请求到 /api/users 接口，获取用户信息列表。
显示用户信息：查询到的用户信息会显示在页面上，每个用户的信息都在一个列表项中。
样式：简单的 CSS 样式用于美化表单和按钮。

服务器端接口：

/api/users（POST）：接收用户信息并创建新用户。
/api/users（GET）：返回用户信息列表。

确保你的服务器端接口能够处理这些请求，并返回正确的数据格式。这个示例假设服务器返回的数据格式是一个包含用户信息对象的数组。