干货分享：Vue 3和TypeScript结合进行API封装

前言：

    在现代的前端开发中，使用Vue 3和TypeScript结合进行API封装已经成为一种流行的实践。通过将Vue 3的响应式性与TypeScript的静态类型检查相结合，我们可以更加安全和高效地管理和使用接口请求。本文将介绍如何在Vue 3项目中使用TypeScript进行API封装，以提高代码质量、可维护性和可读性。从创建API Service到定义接口类型，从封装请求方法到统一处理错误，本文将逐步引导您实现一个高度可扩展和可维护的API封装方案。让我们一起探索如何利用Vue 3和TypeScript的强大特性，优化前端项目的接口请求管理。

1.介绍

    封装API的主要原因是为了提高代码的可维护性和复用性。通过封装API，可以隐藏实现细节，使得其它模块或应用程序只需关注接口的调用方式，而无需关心具体实现。这样在以后需要修改实现时，只需要修改封装的API，而不会影响到其它代码。

    使用TypeScript的优势包括类型检查和丰富的功能。TypeScript是JavaScript的超集，添加了静态类型系统，可以在编码阶段发现很多潜在的错误。这有助于提高代码的质量和可靠性。此外，TypeScript还提供了模块化、泛型等特性，可以让代码更加清晰易读，并在开发过程中提供更好的工具支持。因此，结合封装API和使用TypeScript可以更好地编写高质量且易维护的代码。

2. 项目准备

• 确保你的Vue项目已经配置好TypeScript支持。
• 安装axios网络请求库并引入。
• 安装qs

3.创建API Service类

    在src内命名一个api 的文件夹，在api文件夹内创建axios.config.ts 、http.ts 、url.ts。

4.定义接口类型

    在axios.config.ts内定义接口类型，使用TypeScript定义接口类型，包括请求参数类型和响应数据类型。

import Axios, { AxiosResponse } from 'axios'
import qs from 'qs'


//这里为后端传递来的接口地址通用前缀
export const baseURL = 'https://'

//例如: https://gmall-prod.atguigu.cn/mall-api/



export const CONTENT_TYPE = 'Content-Type'

export const FILE_CONTENT_TYPE = 'multipart/form-data' //传输文件格式数据

export const FORM_URLENCODED = 'application/x-www-form-urlencoded; charset=UTF-8'

export const APPLICATION_JSON = 'application/json; charset=UTF-8'

export const TEXT_PLAIN = 'text/plain; charset=UTF-8'

const service = Axios.create({
  timeout: 10 * 60 * 1000,
})

service.interceptors.request.use(
  (config) => {
    !config.headers && (config.headers = {})

    if (!config.headers[CONTENT_TYPE]) {
      config.headers[CONTENT_TYPE] = FILE_CONTENT_TYPE
    }

    if (config.headers[CONTENT_TYPE] === FORM_URLENCODED) {
      config.data = qs.stringify(config.data)
    }
    return config
  },
  (error) => {
    return Promise.reject(error.response)
  }
)

service.interceptors.response.use(
  (response: AxiosResponse): AxiosResponse => {
    if (response.status === 200) {
      return response
    } else {
      throw new Error(response.status.toString())
    }
  },
  (error) => {
    if (import.meta.env.MODE === 'development') {
      console.log(error)
    }
    console.log(error.response);

    return Promise.reject({ code: 500, msg: '服务器异常，请稍后重试…' })
  }
)

export default service

5. 封装请求方法 

   在http.ts内封装基本的GET、POST等请求方法，处理请求前后逻辑。

import { AxiosResponse } from 'axios'
import { App } from '@vue/runtime-core'
import request from './axios.config'

export interface HttpOption {
  url: string
  data?: any
  method?: string
  headers?: any
  beforeRequest?: () => void
  afterRequest?: () => void
}

export interface Response<T = any> {
  totalSize: number | 0
  code: number
  msg: string
  data: T
}

function http<T = any>({ url, data, method, headers, beforeRequest, afterRequest }: HttpOption) {
  const successHandler = (res: AxiosResponse<Response<T>>) => {
    if (res.status === 200) {
      return res.data
    }
    throw new Error(res.data.msg || '请求失败，未知异常')
  }
  const failHandler = (error: Response<Error>) => {
    afterRequest && afterRequest()
    throw new Error(error.msg || '请求失败，未知异常')
  }
  beforeRequest && beforeRequest()
  method = method || 'GET'
  const params = Object.assign(typeof data === 'function' ? data() : data || {}, {})
  return method === 'GET'
    ? request.get(url, params,{ headers: headers }).then(successHandler, failHandler)
    : request.post(url, params, { headers: headers }).then(successHandler, failHandler)
}

export function get<T = any>({
  url,
  data,
  method = 'GET',
  headers,
  beforeRequest,
  afterRequest,
}: HttpOption): Promise<Response<T>> {
  return http<T>({
    url,
    method,
    data,
    headers,
    beforeRequest,
    afterRequest,
  })
}

export function post<T = any>({
  url,
  data,
  method = 'POST',
  headers,
  beforeRequest,
  afterRequest,
}: HttpOption): Promise<Response<T>> {
  return http<T>({
    url,
    method,
    data,
    headers,
    beforeRequest,
    afterRequest,
  })
}

function install(app: App): void {
  app.config.globalProperties.$http = http

  app.config.globalProperties.$get = get

  app.config.globalProperties.$post = post
}

export default {
  install,
  get,
  post,
}

declare module '@vue/runtime-core' {
  // 为 `this.$` 提供类型声明
  interface ComponentCustomProperties {
    $get: <T>(options: HttpOption) => Promise<Response<T>>
    $post: <T>(options: HttpOption) => Promise<Response<T>>
  }
}

6.封装调用接口

    在url.ts中对使用的接口进行简单封装，这里简单演示一个登录的接口Login

import { baseURL } from './axios.config'

export const baseAddress1 = baseURL

//baseURL就是axios.config.ts内封装好的 https://gmall-prod.atguigu.cn/mall-api/

export const Login = baseAddress1 + 'login' // 登录接口

//Login的完整地址：https://gmall-prod.atguigu.cn/mall-api/login

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $urlPath: Record<string, string>
  }
}

7.在Vue组件中使用API Service

    在login.vue中使用上述封装api

<script setup>
import { post, get } from '../../../api/http'
import { Login } from'../../../api/url';


//调用登录接口
function toLogin(){
  post({
    url: Login, // 这里就是封装好的api地址
    data:{
      userid: 666,  //data为接口的各个参数
      key: xxx
    }
  }).then(res =>{
     //res 接口成功返回的数据
  })
}

</script>

结语： 

通过封装API和使用TypeScript，我们可以提高项目的代码质量、可维护性和可读性。封装API可以帮助我们更好地组织接口请求逻辑，降低耦合度，统一管理请求。而使用TypeScript则可以通过静态类型检查和类型推断帮助我们避免潜在的错误，提升代码的稳定性和可靠性。

希望本文能够帮助您更好地理解如何在Vue 3项目中结合API封装和TypeScript优化前端开发流程，提升团队的开发效率和项目的质量。祝您使用愉快！如果有任何问题或建议，请随时与我联系。