js中如何添加ajax，前端ajax请求封装方法

在JavaScript中,实现异步数据交互的核心且最高效的方案是使用原生fetch API或基于Promise封装的axios库，相较于传统的XMLHttpRequest，现代AJAX技术不仅语法更简洁，支持原生Promise链式调用，还具备更好的错误处理机制和跨域配置灵活性，对于大多数现代Web开发场景，推荐优先使用fetch以保持原生轻量，或在需要复杂拦截器、自动JSON转换及广泛兼容性的项目中选用axios。

核心方案对比与技术选型

在深入代码实现之前,明确技术选型至关重要，传统AJAX依赖于XMLHttpRequest对象，其回调地狱（Callback Hell）问题严重，代码可读性差，现代开发中，fetch作为浏览器内置API，无需引入额外依赖，适合轻量级项目；而axios作为第三方库，提供了更丰富的功能特性，如请求拦截、响应拦截、自动转换JSON数据以及更好的错误处理机制，适合中大型复杂应用。

基于原生Fetch API的实现

fetch API基于Promise，采用链式调用方式，使得异步代码更加清晰，以下是标准的GET和POST请求实现示例。

GET请求示例：

fetch('/api/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log('Success:', data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

POST请求示例：

fetch('/api/submit', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ key: 'value' }),
})
  .then(response => response.json())
  .then(data => console.log('Success:', data))
  .catch(error => console.error('Error:', error));

使用async/await语法可以进一步简化代码结构，使其看起来像同步代码，极大提升可读性：

async function fetchData() {
  try {
    const response = await fetch('/api/data');
    if (!response.ok) throw new Error('Network response was not ok');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Fetch error:', error);
  }
}

基于Axios库的进阶应用

对于需要处理复杂HTTP逻辑的项目,axios提供了更强大的功能，首先需通过npm安装：npm install axios。

配置与拦截器： Axios允许设置全局默认配置，如基础URL、超时时间和请求头，更重要的是，其拦截器机制可以在请求发出前或响应返回后统一处理逻辑，例如自动添加Token或统一错误提示。

import axios from 'axios';
// 创建实例并配置
const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
  headers: { 'X-Custom-Header': 'foobar' }
});
// 请求拦截器
instance.interceptors.request.use(config => {
  // 添加认证Token
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, error => {
  return Promise.reject(error);
});
// 响应拦截器
instance.interceptors.response.use(response => {
  return response.data;
}, error => {
  // 统一处理错误
  if (error.response) {
    console.error(`Error ${error.response.status}: ${error.response.data.message}`);
  } else {
    console.error('Request Error:', error.message);
  }
  return Promise.reject(error);
});
// 使用示例
instance.get('/user/12345')
  .then(response => console.log(response))
  .catch(error => console.log(error));

性能优化与安全最佳实践

在实际生产环境中,除了正确的语法实现，还需关注性能与安全，避免在循环中发起多个独立的AJAX请求，应使用Promise.all并发请求以提高效率，对于敏感数据，务必使用HTTPS协议传输，防止中间人攻击，合理设置请求超时时间，避免用户长时间等待无响应，注意跨域资源共享（CORS）配置，确保后端服务器正确设置了Access-Control-Allow-Origin等头部信息。

相关问答

Q1: Fetch和XMLHttpRequest的主要区别是什么？ A: 主要区别在于API设计和错误处理机制。XMLHttpRequest基于事件驱动，代码冗长且难以维护；fetch基于Promise，语法更简洁，支持async/await。fetch默认不发送Cookie，除非显式配置credentials: 'include'，而XMLHttpRequest默认发送。fetch在HTTP错误状态码（如404、500）下不会自动reject，需要手动检查response.ok。

Q2: 如何在Axios中实现请求取消？ A: Axios提供了CancelToken或AbortController来取消请求，推荐使用AbortController，因为它更符合现代浏览器标准。

const controller = new AbortController();
const signal = controller.signal;
axios.get('/api/data', { signal })
  .then(res => console.log(res))
  .catch(err => {
    if (axios.isCancel(err)) {
      console.log('Request canceled');
    }
  });
// 取消请求
controller.abort();

互动环节

您在日常开发中更倾向于使用原生的fetch还是功能更丰富的axios？在实际项目中是否遇到过跨域或请求超时的棘手问题？欢迎在评论区分享您的见解或遇到的技术难题，我们将为您进一步解答。