和服务端进行交互

XYAdmin 是一套基于 Vue 技术栈的单页面应用，我们提供的是前端代码和 mock 模拟数据的开发模式，通过 API 的形式和任何技术栈的服务端应用一起工作。下面将简单介绍和服务端交互的基本写法。

使用

为了方便管理维护，统一的请求处理都放在 /src/api 目录中，并且一般按照 model 纬度进行拆分文件，如：

apis/
  modules/
    user.js
    permission.js
    goods.js
    ...
  index.js

其中，/src/utils/request 是基于 axios 的封装，便于统一处理 POST，GET 等请求参数，请求头，以及错误提示信息等。它封装了全局 request 拦截器、response 拦截器、统一的错误处理、baseURL 设置等。

import { message, notification } from 'ant-design-vue'
import jschardet from 'jschardet'
import XYHttp from 'xy-http'
import { config } from '@/config'
import { useUserStore } from '@/store'

const MSG_ERROR_KEY = Symbol('GLOBAL_ERROR')

const options = {
  enableAbortController: true,
  // 请求拦截
  interceptorRequest: (request) => {
    const userStore = useUserStore()
    const isLogin = userStore.isLogin
    const token = userStore.token

    if (isLogin) {
      request.headers['AUTH-TOKEN'] = token
    }
  },
  // 请求异常拦截
  interceptorRequestCatch: () => {},
  // 响应拦截
  interceptorResponse: (response) => {
    // 错误处理
    const { code, msg = '请稍后重试' } = response.data || {}
    if (![config('http.code.success'), ...config('http.code.ignore')].includes(code)) {
      notification.error({
        key: MSG_ERROR_KEY,
        message: '请求异常',
        description: msg,
      })
    }
  },
  // 响应异常拦截
  interceptorResponseCatch: (err) => {
    // 网络异常
    if (err.code === 'ERR_NETWORK') {
      message.error({
        key: MSG_ERROR_KEY,
        content: `网络异常：${err.message}`,
      })
      return
    }
    // 请求被取消
    if (err.code === 'ERR_CANCELED')
      return
    return Promise.reject(err)
  },
}

/**
 * 读取文件
 */
class ReadFile extends XYHttp {
  constructor() {
    super({
      baseURL: '',
      responseType: 'blob',
      transformResponse: [
        async (data) => {
          const encoding = await this._encoding(data)
          return new Promise((resolve) => {
            const reader = new FileReader()
            reader.readAsText(data, encoding)
            reader.onload = function () {
              resolve(reader.result)
            }
          })
        },
      ],
    })
  }

  /**
   * 文本编码
   * @param data
   * @returns {Promise<unknown>}
   */
  _encoding(data) {
    return new Promise((resolve) => {
      const reader = new FileReader()
      reader.readAsBinaryString(data)
      reader.onload = function () {
        resolve(jschardet.detect(reader?.result).encoding)
      }
    })
  }
}

const basic = new XYHttp({
  ...options,
  baseURL: config('http.apiBasic'),
})

const readFile = new ReadFile()

export default {
  basic,
  readFile,
}

提示

通过配置 baseURL 可支持请求多服务接口。

和服务端进行交互 ​

使用 ​

和服务端进行交互

使用