请求动作封装实战是优化API调用流程的关键实践，通过创建封装好的API请求，简化HTTP操作，提高代码可维护性和复用性。此方法适用于HTTP操作频繁的场景，能显著提升开发效率，同时减少代码重复、简化逻辑、提高可读性和维护测试便捷性。

请求动作封装基础

在开发过程中，请求动作封装是一种关键的实践，旨在简化HTTP请求的处理流程，提高代码的可维护性和复用性。它通过创建一个封装好的API请求，让用户可以更简洁地调用，而无需关心底层的细节，如URL、HTTP方法、参数处理、响应解析等。这种方法在API调用频繁的场景下尤其显得高效，能够显著提升开发效率。

准备环境与工具

选择合适的编程语言与框架是实现请求动作封装的基础。以JavaScript和axios为例：

环境配置与安装

1. 安装Node.js：访问Node.js官网下载并安装。
2. 创建项目：在命令行或终端中使用mkdir命令创建项目目录，然后执行cd进入目录并使用npm init初始化项目，最后运行npm install axios来安装axios库。

示例代码

// 引入axios库
const axios = require('axios');

// API请求基础封装
async function fetchWeather(city) {
  try {
    // axios请求参数设置
    const response = await axios.get(`https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=${city}`);
    return response.data;
  } catch (error) {
    console.error('请求失败:', error.message);
    return null;
  }
}

// 调用示例
fetchWeather('北京')
  .then(data => console.log('天气数据:', data))
  .catch(error => console.error('获取天气数据时发生错误:', error));

基本请求封装实践

实现GET请求的封装

function fetchData(url, params = {}) {
  return new Promise((resolve, reject) => {
    axios.get(url, { params })
      .then(response => {
        resolve(response.data);
      })
      .catch(error => {
        reject(error);
      });
  });
}

POST请求的封装示例

function postData(url, data) {
  return new Promise((resolve, reject) => {
    axios.post(url, data)
      .then(response => {
        resolve(response.data);
      })
      .catch(error => {
        reject(error);
      });
  });
}

进阶封装技巧

自动处理Token认证

function request(url, method, data = {}, headers = {}) {
  const config = {
    method,
    url,
    headers: {
      ...headers,
      Authorization: `Bearer ${localStorage.getItem('token')}`
    }
  };

  if (method === 'POST') {
    config.headers['Content-Type'] = 'application/json';
    config.data = JSON.stringify(data);
  }

  return axios(config)
    .then(response => response.data)
    .catch(error => {
      console.error('请求失败:', error);
      return null;
    });
}

设置超时与重试机制

function requestWithTimeout(url, params, timeout = 5000) {
  return new Promise((resolve, reject) => {
    axios.get(url, { params, timeout })
      .then(response => {
        resolve(response.data);
      })
      .catch(error => {
        if (error.code === 'ECONNABORTED') {
          console.error('请求超时');
          setTimeout(() => {
            requestWithTimeout(url, params, timeout).then(
              data => resolve(data),
              error => reject(error)
            );
          }, 2000);
        } else {
          reject(error);
        }
      });
  });
}

请求参数与响应数据处理

参数的有效性校验

function validateParams(params) {
  const requiredParams = ['city', 'apiKey'];
  requiredParams.forEach(param => {
    if (!params[param]) {
      throw new Error(`参数 ${param} 未提供`);
    }
  });
  return true;
}

响应数据的统一处理与格式化

function processData(data) {
  // 根据API文档调整数据结构
  const result = {};
  result.city = data.location.name;
  result.condition = data.current.condition.text;
  result.temperature = data.current.temp_c;
  return result;
}

实战案例分析

用户登录请求的封装实例

async function loginUser(email, password) {
  try {
    const response = await axios.post('/api/login', { email, password });
    if (response.status === 200) {
      return response.data;
    } else {
      throw new Error('登录失败');
    }
  } catch (error) {
    console.error('登录请求时发生错误:', error.message);
    return null;
  }
}

商品列表获取的封装与优化

async function fetchProductList(page = 1, limit = 10) {
  try {
    const response = await axios.get('/api/products', {
      params: {
        page,
        limit
      }
    });
    if (response.status === 200) {
      return response.data;
    } else {
      throw new Error('获取商品列表失败');
    }
  } catch (error) {
    console.error('获取商品列表时发生错误:', error.message);
    return null;
  }
}

综合案例：实现一个简易的天气查询应用

const apiKey = 'YOUR_WEATHER_API_KEY';
const city = '北京';
const apiBaseUrl = `https://api.weatherapi.com/v1/forecast.json?key=${apiKey}&q=${city}&days=7`;

async function fetchWeatherForecast() {
  try {
    const response = await axios.get(apiBaseUrl);
    if (response.status === 200) {
      const { forecast } = response.data;
      return {
        date: forecast.forecastdate,
        days: forecast.forecastday.map(day => ({
          date: day.date,
          temperature: day.day.avgtemp_c,
          condition: day.day.condition.text
        }))
      };
    } else {
      throw new Error('获取天气预报失败');
    }
  } catch (error) {
    console.error('获取天气预报时发生错误:', error.message);
    return null;
  }
}

fetchWeatherForecast()
  .then(data => console.log('天气预报:', data))
  .catch(error => console.error('获取天气预报时发生错误:', error));

通过以上示例，我们可以看到不同层次的请求动作封装实践，从基础封装到进阶技巧，再到具体应用中的实际案例，逐步深入，帮助开发者建立起高效、灵活且易于维护的API调用体系。