AJAX发送请求方法封装和请求函数底层刨析以及axios二次封装

在JavaScript中，可以使用原生的XMLHttpRequest对象或者更现代的fetchAPI来发送AJAX请求。以下是使用fetchAPI的例子：

// 封装的AJAX请求函数
function fetchJSON(url, options) {
  return fetch(url, {
    ...options,
    headers: {
      'Content-Type': 'application/json',
      ...(options && options.headers)
    }
  })
  .then(response => {
    if (response.ok) {
      // 如果HTTP状态码在200-299范围内，直接返回response.json()的结果
      return response.json();
    }
    // 否则抛出错误
    return response.json().then(json => {
      throw new Error(json);
    });
  })
  .catch(error => {
    console.error('请求出错:', error);
    throw error;
  });
}
 
// 使用封装的AJAX请求函数
fetchJSON('/api/data', {
  method: 'POST',
  body: JSON.stringify({ key: 'value' })
})
.then(data => console.log('请求成功:', data))
.catch(error => console.error('请求出错:', error));

在实际应用中，可以根据需要对fetchJSON函数进行更多的封装和错误处理。例如，可以添加对请求超时的处理，或者对不同的HTTP状态码进行不同的处理等。

对于axios二次封装，可以参考下面的代码：

import axios from 'axios';
 
// 创建axios实例
const instance = axios.create({
  baseURL: 'http://your-api-url/',
  timeout: 1000, // 请求超时时间
  // 可以添加更多配置...
});
 
// 请求拦截器
instance.interceptors.request.use(config => {
  // 可以在这里添加例如token等请求头
  return config;
}, error => {
  // 请求错误处理
  return Promise.reject(error);
});
 
// 响应拦截器
instance.interceptors.response.use(response => {
  // 对响应数据做处理，例如只返回data部分
  return response.data;
}, error => {
  // 响应错误处理
  return Promise.reject(error);
});
 
// 封装的二次封装的AJAX请求函数
export function request(config) {
  // 使用axios实例发送请求
  return instance({
    ...config,
    method: config.method || 'get'
  });
}
 
// 使用二次封装的AJAX请求函数
request({
  url: '/endpoint',
  method: 'post',
  data: { key: 'value' }
})
.then(data => console.log('请求成功:', data))
.catch(error => console.error('请求出错:', error));

在这个例子中，我们使用axios创建了一个实例，并对请求和响应进行了拦截处理。然后我们创建了一个request函数，使用axios实例发送请求，并简化了响应数据。这样，我们可以在不同的地方复用这个封装过的request函数，提高代码的可维护性和复用性。