AJAX与axios：前端异步交互的魔法指南

AJAX与axios：前端异步交互的魔法指南

引用

CSDN

1.

https://m.blog.csdn.net/2301_79896470/article/details/146026493

什么是AJAX

AJAX（Asynchronous JavaScript and XML，异步 JavaScript 和 XML） 是一种用于创建异步网页应用的技术，允许网页在不重新加载整个页面的情况下，与服务器交换数据并局部更新页面内容。尽管名称中包含 XML，但现代 AJAX 主要使用 JSON（JavaScript Object Notation）作为数据格式。

核心原理

1. 异步通信

• 浏览器通过 JavaScript 异步发送请求到服务器，同时用户可继续操作页面。
• 服务器返回数据后，JavaScript 动态更新页面指定部分，无需刷新整个页面。

2. 基于 XMLHttpRequest 或 Fetch API

• 传统 AJAX 使用 XMLHttpRequest 对象发起请求。
• 现代开发中更常用 Fetch API（基于 Promise，语法更简洁）。

工作流程

sequenceDiagram
 participant 用户
 participant 浏览器
 participant 服务器
 用户->>浏览器: 触发事件（点击、滚动等）
 浏览器->>服务器: 发送异步请求（XHR/Fetch）
 服务器->>浏览器: 返回数据（JSON/XML/HTML）
 浏览器->>用户: 局部更新页面内容

关键特点

什么是axios

Axios 是一个基于 Promise 的现代化 HTTP 客户端库，专为浏览器和 Node.js 设计，用于简化前端与后端的数据交互。它封装了底层 HTTP 请求细节，提供了更简洁、易用的 API，并支持拦截器、自动 JSON 转换、请求取消等高级功能，是替代原生 XMLHttpRequest 和 Fetch API 的流行选择。

核心特性

基础用法示例

1. 发起 GET 请求

import axios from 'axios';

// 基本 GET 请求
axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data); // 响应数据
  })
  .catch(error => {
    console.error('请求失败:', error);
  });

// 带参数的 GET 请求
axios.get('https://api.example.com/user', {
  params: {
    id: 123,
    type: 'vip'
  }
});

2. 发起 POST 请求

axios.post('https://api.example.com/login', {
  username: 'admin',
  password: '123456'
})
.then(response => {
  console.log('登录成功:', response.data.token);
});

3. 并发请求

const getUser = axios.get('/user/123');
const getPosts = axios.get('/posts');
axios.all([getUser, getPosts])
  .then(axios.spread((userRes, postsRes) => {
    console.log('用户数据:', userRes.data);
    console.log('帖子数据:', postsRes.data);
  }));

4. 全局配置

// 设置全局默认值（如 API 基础路径）
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = 'Bearer token123';
axios.defaults.timeout = 5000; // 5秒超时

高级功能

1. 拦截器（Interceptors）

// 添加请求拦截器（如添加 Token）
axios.interceptors.request.use(config => {
  config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
  return config;
}, error => {
  return Promise.reject(error);
});

// 添加响应拦截器（如统一处理错误）
axios.interceptors.response.use(response => {
  return response.data; // 直接返回数据部分
}, error => {
  if (error.response.status === 401) {
    alert('登录已过期，请重新登录！');
    window.location.href = '/login';
  }
  return Promise.reject(error);
});

2. 取消请求

const source = axios.CancelToken.source();
axios.get('/data', {
  cancelToken: source.token
}).catch(error => {
  if (axios.isCancel(error)) {
    console.log('请求被取消:', error.message);
  }
});

// 取消请求（参数为可选提示信息）
source.cancel('用户主动取消操作');

Axios vs Fetch API

常见问题解决

1. 跨域请求（CORS）

• 需后端配置 Access-Control-Allow-Origin 等响应头。
• 开发环境可通过代理（如 Webpack DevServer 代理）绕过。

2. 文件上传

const formData = new FormData();
formData.append('file', fileInput.files[0]);
axios.post('/upload', formData, {
  headers: { 'Content-Type': 'multipart/form-data' }
});

3. 错误处理统一封装
   建议通过拦截器集中处理 HTTP 状态码和业务错误码。

什么是URL

URL（Uniform Resource Locator，统一资源定位符） 是用于标识和定位互联网上资源（如网页、图片、视频等）的字符串。它是 Web 的核心组成部分，用户通过 URL 访问特定资源，浏览器通过 URL 向服务器请求数据。

URL 的结构

一个完整的 URL 通常由以下部分组成：

协议://主机名:端口号/路径?查询参数#片段标识符

示例

https://www.example.com:443/path/to/resource?name=value#section1

URL 的组成部分详解

URL里的查询参数

什么是查询参数 ?

• 携带给服务器额外信息，让服务器返回我想要的某一部分数据而不是全部数据
• 举例：查询河北省下属的城市列表，需要先把河北省传递给服务器

1. 查询参数的语法 ？

• 在 url 网址后面用?拼接格式：XXXX参数名1=值1&参数名2=值2
• 参数名一般是后端规定的，值前端看情况传递即可

2. axios 如何携带查询参数?
   使用 params 选项即可

axios({
  url: '目标资源地址',
  params: {
    参数名: 值
  }
}).then(result => {
  // 对服务器返回的数据做后续处理
})

常用请求和数据提交

想要提交数据，先来了解什么是请求方法

• 请求方法是一些固定单词的英文，例如：GET，POST，PUT，DELETE，PATCH（这些都是http协议规定的），每个单词对应一种对服务器资源要执行的操作。

什么时候进行数据提交呢？

• 例如：多端要查看同一份订单数据，或者使用同一个账号进行登录，那订单/用户名+密码，就需要保存在服务器上，随时随地进行访问

axios 如何提交数据到服务器呢？

axios({
  url: '目标资源地址',
  method: '请求方法',
  data: {
    参数名: 值
  }
}).then(result => {
  // 对服务器返回的数据做后续处理
})

AXIOS的错误处理

Axios 的错误处理 是开发中非常重要的一部分，能够有效应对网络请求中的各种异常情况（如网络错误、服务器错误、超时等）。Axios 提供了多种方式来处理错误，包括 catch 方法、try/catch 语法（结合 async/await）以及拦截器机制。

Axios 的错误对象包含以下关键属性：

• message：错误描述。
• response：服务器返回的响应对象（如果有）。
• status：HTTP 状态码（如 404、500）。
• data：服务器返回的错误数据。
• request：请求对象（如果请求已发出但未收到响应）。
• config：请求的配置信息。

示例：使用 catch 处理错误

axios.get('https://api.example.com/data')
  .then(response => {
    console.log('请求成功:', response.data);
  })
  .catch(error => {
    if (error.response) {
      // 服务器返回了错误状态码（4xx/5xx）
      console.error('服务器错误:', error.response.status, error.response.data);
    } else if (error.request) {
      // 请求已发出但未收到响应
      console.error('网络错误:', error.message);
    } else {
      // 其他错误（如配置错误）
      console.error('请求配置错误:', error.message);
    }
  });

示例：使用 async/await 处理错误

async function fetchData() {
  try {
    const response = await axios.get('https://api.example.com/data');
    console.log('请求成功:', response.data);
  } catch (error) {
    if (error.response) {
      console.error('服务器错误:', error.response.status, error.response.data);
    } else if (error.request) {
      console.error('网络错误:', error.message);
    } else {
      console.error('请求配置错误:', error.message);
    }
  }
}