Vue3实战笔记（09）—封装请求接口

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

将不同业务的接口写在不同的js中封装起来方便管理和运维。通过封装请求接口，可以使得应用程序的网络请求更加模块化、可维护和可扩展，有助于提升开发效率和项目的整体质量。

---

`

一、封装接口

例如封装一个user相关的接口文件，创建api目录，创建user.ts文件：

import shaxios from "@/utils/shaxios"

export const getUser = (userId:string)=>{
     return shaxios({
          method:"get",
          url:"/hellosh",
          params: {parentId: userId},
        })
}


export const getUserList = (params:any)=>{
    debugger
    return shaxios({
         method:"get",
         url:"/hellosh",
         ...params
       })
}

引入上文封装好的shaxios.js：

//封装axios
import axios from "axios"
import globalConfig from "@/global.config.js"

// Set config defaults when creating the instance
const shaxios = axios.create({
    //默认根域名
    baseURL: '/api'
  });
 
  // Alter defaults after instance has been created
  
  //1、通用默认配置

  //配置默认token  ---headers 配置请求也会导致跨域问题，需要配置Access-Control-Allow-Headers: test,test1,Content-Type
  // shaxios.defaults.headers.common['Authorization'] = "Bearer eyJraWQiOiI3MDM0OWZjYy02M2JjLTQ5NWUtOTU2MC0xNjc4MjNjYmY3MGQiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOiJtZXNzYWdpbmctY2xpZW50IiwiYXVkIjoibWVzc2FnaW5nLWNsaWVudCIsIm5iZiI6MTcwODI0MjI5NCwiaXNzIjoiaHR0cDovL2xvY2FsaG9zdDo5MjAzIiwiZXhwIjoxNzA4MzAyMjk0LCJpYXQiOjE3MDgyNDIyOTR9.PdB2sSr-nXGO8pk_TmykBPf_3kySkKimUeJdw3iiBcLFLNKsNFGegjhKn0Y3tQkjmEb5gXWLYSeuL50Nioc60FsejDyc66NYz74tERMMR2kH16ssr8QmKy8ztzAFJvOlTLprvhf55xyk-K5DawKzcGGe0lQCzGL3CAVzPJpbQn4Ingn1mSHGsc-jJ4rTlP2oXI-1eAgTuOgj9qcfA6fpWVvkgTDhUl86wWA1ZMv1Xsfnk9aTMveOToVGkBWiAS_gvdAOxV2BPCs9qiQ8fUcy1o56zT8Qytteu4eh-gpebEsuzCtaVD_ziutMql9Aw5cu1VwRTe3R1OzqCR-bkIZgNA";
  // 内容类型
  // shaxios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
  //超时时间
  shaxios.defaults.timeout = 60000;

  //2、拦截器配置
  shaxios.interceptors.request.use(function (config) {
    /*...token等配置*/
    let whiteList = globalConfig.whiteListApi
    let url = config.url
    //请求头token示例
    localStorage.setItem("token","Bearer eyJraWQiOiI1ZDk5ZTIyOS0zZTIyLTRlYjUtODVhZS1iNTFkZTcyMGE1MDEiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOiJtZXNzYWdpbmctY2xpZW50IiwiYXVkIjoibWVzc2FnaW5nLWNsaWVudCIsIm5iZiI6MTcwODQyNTcyMywiaXNzIjoiaHR0cDovL2xvY2FsaG9zdDo5MjAzIiwiZXhwIjoxNzA4NDg1NzIzLCJpYXQiOjE3MDg0MjU3MjMsImp0aSI6IjMxZmFjNDY4LTc5MGItNDM3Zi1iMzI2LWJlMGQ4MjNkMzZjMiJ9.hdI6DLYmLPQg0F5b2mYKZvlk8xU0j6OExk4gPa3bDhUTfg0Y7JwFfGqLg3iG17uFElZ5XtvQsNlID16h_X532EJDSG3uTsBS5dg4DlNNgkmL4CuoTGV9kVhnYkKwXHs7Is-BL9UESG99Ts0gPH99QSJtmwtXrEv6WQj8_PYq79TMUeuCHgYXOqUslFI_FIGEx46ksqBS_7wz1knnyZVvTmcN2ZYW09w7zbg5si6VErj6t2BCT500d_gDQZGbDfc5SELhXTa_UuBaZevN-7fDQYNFtpzC8tcPah6FLGcahBy6VALOflW_l8swPhhCmrJ7Zfq51ccO90_LNuwKI85SpQ")
    let token = localStorage.getItem("token")
    if(whiteList.indexOf(url)===-1&&token){ //不存在白名单中且token不为空
      // config.headers['Authorization'] = token//设置token
      config.headers['sh-oauth'] = token//设置token--- 请求头设置token
      // config.params={  //设置token--- 请求参数设置token
      //   'access-token':token
      // } 
    }
    console.log(whiteList)
    return config;
  },error=>{
    return Promise.reject(error) //错误处理
  }
  
  )
  shaxios.interceptors.response.use((res)=> {
    /*...响应相关统一处理*/
    const status = res.data.code || 200
    const message = res.data.message || "未知错误"
    debugger
    if(status === 401){
      alert("没有权限！")
      router.push("/login")
    }
    if(res.status!==200 || status === 10001){
      alert("错误："+status+" "+message)
      return Promise.reject(new Error(message))//错误处理
    }

    return res

  },error=>{
    return Promise.reject(error)//错误处理
  })

  export default shaxios

二、使用步骤

使用方法如下（示例）：

import {getUserList} from '@/api/user'
getUserList({params:{userId:1}})

简简单单清清爽爽就完成了请求用户信息的操作。
记录问题：

当引入一个自定义的js文件时ts校验通不过，运行没问题，但是这个提示恶心人。

解决方案：

在这个文件中增加：

，或者自己新建一个xxx.d.ts文件来管理自定义的文件。

还有两种方案：直接用.ts文件，或者用require方式引用:

const tool = require('@/utils/shaxios.js')

---

总结

将所有的API请求集中管理，有助于保持代码的整洁和组织性，便于维护和更新。封装后的接口可以在多个组件中使用，避免了代码重复，提高了开发效率。通过封装，可以确保所有的请求使用一致的格式和参数，使得整个应用程序的网络请求行为一致。