和服务端进行交互

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 { config } from '@/config'
import { useUserStore } from '@/store'
import jschardet from 'jschardet'
import XYHttp from 'xy-http'

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_NETWORK' === err.code) {
            message.error({
                key: MSG_ERROR_KEY,
                content: `网络异常：${err.message}`,
            })
            return
        }
        // 请求被取消
        if ('ERR_CANCELED' === err.code) 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) => {
                        let reader = new FileReader()
                        reader.readAsText(data, encoding)
                        reader.onload = function () {
                            resolve(reader.result)
                        }
                    })
                },
            ],
        })
    }

    /**
     * 文本编码
     * @param data
     * @returns {Promise<unknown>}
     * @private
     */
    _encoding(data) {
        return new Promise((resolve) => {
            let 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 可支持请求多服务接口。

和服务端进行交互 ​

使用 ​

和服务端进行交互

使用