Vue3 Ajax(axios)

关键要点

Axios 是一个基于 Promise 的 HTTP 库，适合在 Vue3 中处理 AJAX 请求。
支持多种安装方式，包括 CDN、NPM、Bower 和 Yarn。
提供 GET、POST 等请求方法，支持并发请求和请求取消。
可以设置默认配置，如 baseURL、timeout 和 headers。

安装与基本使用

首先，通过 CDN 或包管理器安装 Axios。例如，使用 CDN：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
或使用 NPM：$ npm install axios。

基本 GET 请求示例：

axios.get('/user?ID=12345').then(response => console.log(response)).catch(error => console.log(error));

POST 请求示例：

axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }).then(response => console.log(response)).catch(error => console.log(error));

高级功能

并发请求：使用 Promise.all 或 axios.all 处理多个请求。
创建实例：axios.create({ baseURL: 'https://some-domain.com/api/', timeout: 1000, headers: {'X-Custom-Header': 'foobar'} })。
拦截器：通过 axios.interceptors.request.use() 和 axios.interceptors.response.use() 拦截请求和响应。
取消请求：使用 CancelToken 取消正在进行的请求。

详细报告

Vue3 中使用 Axios 进行 AJAX 请求是一种常见的做法，Axios 是一个基于 Promise 的 HTTP 客户端，适用于浏览器和 Node.js 环境。以下是关于 Vue3 与 Axios 的全面讲解，涵盖安装、基本使用、高级功能和注意事项。

背景与定义

AJAX（Asynchronous JavaScript and XML）是一种在不刷新页面的情况下与服务器异步交换数据的技术。在 Vue3 中，官方推荐使用 Axios 来完成 AJAX 请求，因为它提供了简洁的 API，支持 Promise，易于处理异步操作，并内置了请求和响应拦截器。

Axios 的 GitHub 开源地址为 https://github.com/axios/axios，是一个成熟且广泛使用的库。

安装方法

Axios 支持多种安装方式，适合不同开发环境：

CDN：直接在 HTML 中引用，例如：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
或
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/axios/0.26.0/axios.min.js" type="application/javascript"></script>。
NPM：$ npm install axios。
Bower：$ bower install axios。
Yarn：$ yarn add axios。

安装完成后，可以通过 import axios from 'axios' 在代码中引入。

基本使用

Axios 提供了多种 HTTP 方法，常见的有 GET 和 POST。以下是示例：

GET 请求

GET 请求用于从服务器获取数据，示例代码如下：

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .finally(function () {
    // 总是执行
  });

也可以使用参数对象：

axios.get('/user', {
  params: {
    ID: 12345
  }
}).then(response => console.log(response)).catch(error => console.log(error));

使用 async/await 语法：

async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

注意：async/await 是 ECMAScript 2017 的一部分，不支持 Internet Explorer 和老旧浏览器。

POST 请求

POST 请求用于向服务器发送数据，示例代码如下：

axios.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
}).then(response => console.log(response)).catch(error => console.log(error));

并发请求

当需要同时发送多个请求时，可以使用 Promise.all 或 Axios 提供的并发助手：

使用 Promise.all：

  Promise.all([getUserAccount(), getUserPermissions()])
    .then(results => {
      const acct = results[0];
      const perm = results[1];
    });

使用 Axios 的 all 和 spread：

  axios.all([getUserAccount(), getUserPermissions()])
    .then(axios.spread((acct, perms) => {
      // 处理结果
    }));

创建实例

可以创建 Axios 实例以设置默认配置，适用于需要重复使用的场景：

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

实例创建后，可以像普通 Axios 一样使用，例如 instance.get('/user')。

配置选项

Axios 支持丰富的配置选项，以下是常见选项的表格：

选项名称	描述	默认值
url	请求 URL（必需）	无
method	请求方法	‘get’
baseURL	请求基础 URL	无
headers	自定义请求头	{}
params	URL 查询参数	{}
data	请求体数据	无
timeout	请求超时时间（毫秒）	0（无超时）
withCredentials	是否携带凭证（如 Cookie）	false
responseType	响应数据类型	‘json’
xsrfCookieName	XSRF 令牌 Cookie 名称	‘XSRF-TOKEN’
xsrfHeaderName	XSRF 令牌 Header 名称	‘X-XSRF-TOKEN’
onUploadProgress	上传进度回调	无
onDownloadProgress	下载进度回调	无
maxContentLength	最大内容长度	2000
maxRedirects	最大重定向次数	5

更多配置选项请参考官方文档。

响应结构

每个 Axios 响应包含以下属性：

data：响应数据。
status：HTTP 状态码。
statusText：HTTP 状态文本。
headers：响应头。
config：请求配置。

示例：

axios.get('/user')
  .then(response => {
    console.log(response.data); // 响应数据
    console.log(response.status); // 状态码，如 200
  });

默认配置

可以设置 Axios 的默认配置，适用于全局：

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

拦截器

拦截器允许在请求发送前或响应返回前进行处理。示例：

请求拦截：

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

响应拦截：

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

拦截器可以通过 eject 方法移除。

取消请求

可以使用 CancelToken 取消请求，示例：

const source = CancelToken.source();
axios.get('/user', {
  cancelToken: source.token
}).catch(error => {
  if (axios.isCancel(error)) {
    console.log('Request canceled', error.message);
  }
});
source.cancel('Operation canceled by the user.');

也可以通过 executor 创建：

new CancelToken(function executor(c) {
  // 取消函数
  cancel = c;
});
cancel();

表单 URL 编码

对于表单数据：

浏览器中，可以使用 URLSearchParams 或 qs 库。
Node.js 中，可以使用 querystring 或 qs 库。

示例：

const params = new URLSearchParams();
params.append('name', 'value');
axios.post('/form', params);

TypeScript 支持

Axios 对 TypeScript 有良好的支持，示例：

import axios from "axios";
axios.get("/user?ID=12345");

可以定义类型以增强代码提示。

注意事项

async/await 不支持 Internet Explorer 和老旧浏览器，需注意兼容性。
使用历史模式（createWebHistory）时，需服务器配置，否则刷新可能出现 404。
并发请求时，确保处理好错误，避免部分请求失败影响整体。

总结

Vue3 中使用 Axios 进行 AJAX 请求简单高效，支持多种高级功能如拦截器和取消请求。建议根据项目需求选择合适的安装方式，并注意浏览器兼容性和服务器配置。

关键要点

安装与基本使用

高级功能

更多资源

详细报告

背景与定义

安装方法

基本使用

GET 请求

POST 请求

并发请求

创建实例

配置选项

响应结构

默认配置

拦截器

取消请求

表单 URL 编码

TypeScript 支持

注意事项

总结

关键引文

Vue3 混入

Vue3 Tailwind CSS

Vue 实例选项

Vue3 创建单文件组件(SFC)

Vue 组件实例

Vue3 条件语句

发表回复取消回复

关键要点

安装与基本使用

高级功能

更多资源

详细报告

背景与定义

安装方法

基本使用

GET 请求

POST 请求

并发请求

创建实例

配置选项

响应结构

默认配置

拦截器

取消请求

表单 URL 编码

TypeScript 支持

注意事项

总结

关键引文

类似文章

发表回复 取消回复

发表回复取消回复