前端开发中，如果页面需要与后台接口交互，并且无刷新页面，那么需要借助一下Ajax的http库来完成与后台数据接口的对接工作。本文将结合我们团队使用的一个http库Axios和我们团队开发工程的一些场景，分享我们前端团队对http库进行封装的经历。

对Axios进行基本的封装

1. request.ts 的基本框架

import axios from 'axios'

const service = axios.create()
// request拦截器
service.interceptors.request.use(
  (config) => {}, (err) => {}
)
service.interceptors.response.use(
  (res) => {},  (err) => {}
)
const request = {
  get: () =>
    service.get().then(resolve),
  post: () => service.post().then(resolve),
}
export default request

2. interceptors.request拦截器代码处理拦截请求设置通用的请求头信息,比如设置 token

service.interceptors.request.use(
  (config) => {
    config.headers.token = sessionStorage.getItem('userToken')
    return config
  },
  (err) => {
    if (!err.response) {
      //实际业务场景用自己项目中的message相关组件或者antd
      console.log('请求超时，请稍后再试')
    }
  }
)

3.interceptors.use拦截器代码处理

通常是用于判断登录态,重定向至登录页,此处redirectToLogin 方法不进一步探讨

service.interceptors.response.use(
  (res) => {
    if (res.data.status) {
      let { code, retCode } = res.data.status
      // 根据 retCode||code 与后端协议好的状码 判断是否登录,或其他意外业务场景
      if (true) {
        redirectToLogin()
        return { data: {}, code: 1, msg: '未登陆', status: res.data.status }
      }
    }
    return res.data
  },
  (err) => {}
)

4. 通用请求返回值的format处理实际场景中甚用any,此处仅为减少代码篇幅

function handleResponseFormat(response: any): any {
  const { data, status } = response
  if (!status) {
    return response
  }
  const RetCode = status.RetCode === undefined
  ? status.retCode 
  : status.RetCode
  return {
    data,
    RetCode,
    msg: status.msg,
    success: status.RetCode === 0 || status.retCode === 0,
    status: { ...status, RetCode },
  }
}

5. request对象的完善

const request = {
  get: (url: string, params?: object) =>
    service.get(url,params).then(handleResponseFormat),
  post: (url: string, query: object) =>
    service.post(url,query)).then(handleResponseFormat),
}

到这里 request 基本封装结束

api的封装

1. 结合es6 module做接口封装通常我们的业务模块都是分几大块的 比如订单,排控,设置,主页等等,根据模块单独export 对应文件名:testApi

// 路径别名的设置 可以在webpack相关config文件里配置 此处不展开
// 没另做配置 可以直接用相对路径
import http from '@http'

export default {
 getInfo: (query: any) => http.get('/...具体api路径/info', body),
 //此处的ts定义 通常也是有另外的文件存储
 addInfo: (query: {id:number}) => http.post('/...具体api路径/info', body),
}

api业务场景中使用

// 路径别名的设置 可以在webpack相关config文件里配置 此处不展开
// 没另做配置 可以直接用相对路径
import {testApi} from '@api'

const getsomethingDetailInfo = async () => {
    const param={}
    const { data, success,msg} = await testApi.getInfo(param)
    if (success) {
       console.log(data)
    }else{
    //根据实际ui组件调用替换此处console
    console.log(msg)
  }
  const addsomething = async () => {
    //根据实际业务入参填写
    const param={}
    const { data, success,msg} = await testApi.addInfo(param)
    if (success) {
       console.log(data)
    }else{
    //根据实际ui组件调用替换此处console
    console.log(msg)
  }