vue3 axios +elementplus请求封装

一、首先安装axios

1、npm install axios
2、npm install qs

二、创建config.ts

const config: {
  base_url: {
    base: string
    dev: string
    pro: string
    test: string
  }
  result_code: number | string
  default_headers: AxiosHeaders
  request_timeout: number
} = {
  base_url: {
    // 开发环境
    base: '',

    // 打包开发环境
    dev: '',

    // 打包生产环境
    pro: '',

    // 打包测试环境
    test: ''
  },

  /**
   * 接口成功返回状态码
   */
  result_code: '200',

  /**
   * 接口请求超时时间
   */
  request_timeout: 120000,

  /**
   * 默认接口请求类型
   * 可选值：application/x-www-form-urlencoded multipart/form-data
   */
  default_headers: 'application/json'
}

export { config }

三、请求拦截、请求响应

创建request.ts

import axios, {
  AxiosInstance,
  AxiosRequestConfig,
  AxiosRequestHeaders,
  AxiosResponse,
  AxiosError
} from 'axios'

//引入elementplus提示弹窗
import { ElMessage } from 'element-plus'

import qs from 'qs'

import { config } from 'config'

const { result_code, base_url } = config

export const PATH_URL = base_url[import.meta.env.VITE_API_BASEPATH]

// 创建axios实例
const service: AxiosInstance = axios.create({
  baseURL: PATH_URL, // api 的 base_url
  timeout: config.request_timeout // 请求超时时间
})

// request 请求拦截器
service.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    if (
      config.method === 'post' &&
      (config.headers as AxiosRequestHeaders)['Content-Type'] ===
        'application/x-www-form-urlencoded'
    ) {
      config.data = qs.stringify(config.data)
    }
 
    if (config.method === 'get' && config.params) {
      let url = config.url as string
      url += '?'
      const keys = Object.keys(config.params)
      for (const key of keys) {
        if (config.params[key] !== void 0 && config.params[key] !== null) {
          url += `${key}=${encodeURIComponent(config.params[key])}&`
        }
      }
      url = url.substring(0, url.length - 1)
      config.params = {}
      config.url = url
    }
    return config
  },
  (error: AxiosError) => {
    console.log(error)
    Promise.reject(error)
  }
)

// response 响应拦截器
service.interceptors.response.use(
  (response: AxiosResponse<Recordable>) => {
    if (response.data.code === result_code) {
      return response.data
    } else {
      ElMessage.error(response.data.message)
    }
  },
  (error: AxiosError) => {
    console.log('err' + error)
    ElMessage.error(error.message)
    return Promise.reject(error)
  }
)

export { service }

四、创建http.ts

import { service } from 'request'
import { AxiosPromise } from 'axios'
import { config } from 'config'

const { default_headers } = config

const request = <T>(option: AxiosConfig): AxiosPromise<T> => {
  const { url, method, params, data, headersType, responseType } = option
  return service({
    url: url,
    method,
    params,
    data,
    responseType: responseType,
    headers: {
      'Content-Type': headersType || default_headers
    }
  })
}

function getFn<T = any>(option: AxiosConfig): AxiosPromise<T> {
  return request<T>({ method: 'get', ...option })
}

function postFn<T = any>(option: AxiosConfig): AxiosPromise<T> {
  return request<T>({ method: 'post', ...option })
}

function deleteFn<T = any>(option: AxiosConfig): AxiosPromise<T> {
  return request<T>({ method: 'delete', ...option })
}

function putFn<T = any>(option: AxiosConfig): AxiosPromise<T> {
  return request<T>({ method: 'put', ...option })
}

export const http = () => {
  return {
    get: getFn,
    post: postFn,
    delete: deleteFn,
    put: putFn
  }
}

五、如何使用:例如登录、商品列表调用：demo

1、首先创建类型约束types.ts

export type UserLoginType = {
  username: string
  password: string
}

export type UserType = {
  username: string
  password: string
  role: string
  roleId: string
}

2、接口API调用,创建api.ts

import { http } from 'http'
import type { UserLoginType, UserType } from './types'

const request = http()

//登录API
export const loginApi = (data: UserLoginType) => {
  return request.post({
    url: 'API',
    data
  })
}

//退出
export const loginOutApi = () => {
  return request.get({ url: 'API' })
}

//商品列表
export const getGoodsListApi = ({ params }: AxiosConfig) => {
  return request.get<{
    total: number
    list: GoodsType[] //GoodsType[] 自行添加类型约束
  }>({ url: '/goods/list', params })
}

//other
export const getTestRoleApi = ({ params }) => {
  return request.get<{
        list: string[]//自定义约束类型
  }>({ url: '/other/list', params })
}

3、页面调用

<script setup lang="ts">
    import { reactive, ref, unref, watch } from 'vue'
    import { loginApi,getGoodsListApi} from 'api'
    import type { UserLoginType } from 'types'

    // 登录
    const signIn = async () => {
      const formRef = unref(elFormRef)
      await formRef?.validate(async (isValid) => {
        if (isValid) {
          loading.value = true
          const { getFormData } = methods
          const formData = await getFormData<UserLoginType>()

          const res = await loginApi(formData)
            .catch(() => {})
            .finally(() => (loading.value = false))

          if (res) {
            const { wsCache } = useCache()
            wsCache.set(appStore.getUserInfo, res.data)

            getRole()
          }
        }
      })
    }
    
  //商品列表
  const getGoodsList = async (params?: Params) => {
      const res = await getGoodsListApi({
        params: params || {
          pageIndex: 1,
          pageSize: 10
        }
      })
        .catch(() => {})
        .finally(() => {
          loading.value = false
        })
      if (res) {
        //渲染列表
        
      }
 }
</script>