网络请求封装优化

接口调用架构

简介

在一个项目中，会有非常多的网络请求，如果在在项目中，直接使用原生网络请求方法发起网络请求，那么当网络环境发生变化时，项目代码随之需要大量更改，同时在这些网络请求代码中，存在大量的冗余代码，为了解决这些问题，可以对项目中的网络请求代码行进封装。

网络请求封装思路

将网络请求中的基本配置进行提取，包括基本 URL, 通用请求头信息，超时时间等。
封装请求方法，根据不同请求方式，封装请求方法，让开发人员只专注接口地址和请求参数数据。
将请求方法对象挂载到全局作用域，方便在项目中使用。

网络请求封装实现

提取基础信息

在项目中添加 api 文件夹，将网络请求中的基础信息封装到全局配置模块 http.js 文件中。

演示地址：https://httpbin.ceshiren.com
配置公共的 URL： baseURL
配置超时时间: timeout
配置公共的 Content-Type: 值为 application/json

// 完成 http 请求的基本配置信息
// 导入 axios
import axios from 'axios';

// 创建 axios 实例，并配置全局配置信息
const instance = axios.create({
    // 请求头
    headers:{
        'Content-Type':'application/json',
    },
    // 超时时间
    timeout:2500,
    // 基础 url
    baseURL: 'https://httpbin.ceshiren.com',
});

// 导出 axios 实例
export default instance;

封装请求方法

在 api 文件夹中，创建 api.js 文件，根据请求方式封装不同的请求方法。

// 导入 instance 实例
import instance from "./http";

// 定义api实例，包含请求方法
const api = {
  // get方法
  get(url, params) {
    // 使用 instance 实例发起请求
    return instance({
      url: url,
      method: "get",
      params: params,
    });
  },
  // get方法
  post(url, data) {
    return instance({
      url: url,
      method: "post",
      data: data,
    });
  },
  // put方法
  put(url, data) {
    return instance({
      url: url,
      method: "put",
      data: data,
    });
  },
  // delete方法
  delete(url, data) {
    return instance({
      url: url,
      method: "delete",
      data: data,
    });
  },
};
// 导入 api 实例
export default api;

挂载全局实例

在 main.js 中将封装好的网络请求实例挂载到全局对象 window 上。

// 导入 api 实例
import api from './api/api'
// 将网络请求实例挂载到全局对象中
window.$api = api

组件中应用

因将网络请求实例挂载到了 window 对象中，所以在组件中使用网络请求方法时，可直接进行使用。

<template>
    <div>
        <button @click="handleGetRequest">发起 GET 请求</button>
        <button @click="handlePostRequest">发起 POST 请求</button>
    </div>
</template>
<script setup>

// GET 请求
const handleGetRequest = () => {
    // 通过 window 对象中挂载的 api 实例调用请求方法
    window.$api.get('/get', {params:{id:"123"}})
    .then((result) => {
        console.log(result)
    }).catch((err) => {
        console.log(err)
    }); 
}

// POST 请求
const handlePostRequest = () => {
    // 简化使用，可直接使用 $api 变量访问 
    $api.post('/post', {id:"123","name":"tom"})
    .then((result) => {
        console.log(result)
    }).catch((err) => {
        console.log(err)
    });
}
</script>

总结

封装网络请求的意义在于将项目中的所有接口进行管理，提高代码的组织性和可维护性。

这样做有如下一些优点：

模块化管理: 将所有接口统一放置在一个文件中，使得项目结构更加清晰，方便查找和管理。
降低耦合性: 将接口请求与业务逻辑分离，提高了代码的可维护性和可扩展性。
便于统一处理: 可以在 api.js 中统一处理一些公共的逻辑，比如添加请求拦截器、响应拦截器等，使得所有的请求都能受到相同的处理。
简化调用: 在组件中只需要通过 window.$api 直接调用其中的接口函数，不需要重复导入和配置 axios。
方便切换接口地址: 如果需要切换接口地址（比如从测试环境切换到生产环境），只需要在 http.js 中修改 baseURL 即可，而不需要在每个模块中修改。

总的来说，将接口整合到一个文件中可以提高项目的可维护性、可读性，并且方便统一管理和处理接口请求。