前端如何优雅地发送网络请求

一、axios

1. 请求拦截器（写在utils/fetch.js目录下）

import axios from 'axios';

// 创建Axios实例
const instance = axios.create({
  baseURL: 'https://example.com/api',
});

// 添加请求拦截器
instance.interceptors.request.use(function (config) {
  // 在请求发送之前，可以进行一些自定义处理，比如添加请求头信息等
  config.headers.Authorization = 'Bearer ' + localStorage.getItem('token');
  return config;
}, function (error) {
  // 请求错误时，可以在此处进行错误处理
  return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
  // 在获取响应数据之前，可以进行一些自定义处理，比如解密数据等
  return response.data;
}, function (error) {
  // 响应错误时，可以在此处进行错误处理
  return Promise.reject(error);
});

export default instance;

2. 拦截器的使用

import request from '@/utils/fetch'

export function getInfo(params) {
  return request({
    url: '/example/info',
    method: 'get',
    params
  })
}

export function updateInfo(data) {
  return request({
    url: '/example/update',
    method: 'post',
    data
  })
}

 二、ajax

// 创建一个XMLHttpRequest对象
let xhr = new XMLHttpRequest();

// 指定请求的类型和URL地址
xhr.open('GET', '/example/url', true);

//设置请求头信息
xhr.setRequestHeader('X-ECAPI-Authorization', getToken())

// 设置响应数据的类型
xhr.responseType = 'text';

// 发送请求
xhr.send();

// 注册事件监听器，处理服务器响应
xhr.onload = function() {
  if (xhr.status === 200) {
    // 请求成功，处理响应数据
    const response = xhr.response;
    console.log(response);
  } else {
    // 请求失败，处理错误
    console.error('Request failed. Error code: ' + xhr.status);
  }
};