目前,使用vue3的应该是大部分人了,使用vue3肯定少不了对于TypeScript的使用。虽然说最近Svelte(Svelte是一种流行的JavaScript框架,它提供了一种现代化的方式来构建Web应用程序)团队决定停止对TypeScript的支持,这一决定引起了很多开发者的关注和讨论。但是对于我们普通开发者来说目前为止影响不大,该学习还是得学。
废话少说,上代码:
import type { AxiosRequestConfig, AxiosResponse } from 'axios'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import 'element-plus/es/components/message/style/css'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
NProgress.configure({showSpinner: false}) // NProgress Configuration
interface statusCode {
[propName: number]: string
}
const statusCode: stautsCode = {
200: '服务器成功返回请求的数据',
201: '新建或修改数据成功。',
202: '一个请求已经进入后台排队(异步任务)',
204: '删除数据成功',
400: '请求错误(400)',
401: '未授权,缺少令牌',
403: '拒绝访问(403)',
404: '请求出错(404)',
408: '请求超时(408)',
500: '服务器错误(500)',
501: '服务未实现(501)',
502: '网络错误(502)',
503: '服务不可用(503)',
504: '网络超时(504)'
}
const http = axios.create({
baseURL: import.meta.env.VITE_APP_BASE_API,
timeout: 5000
})
// 请求拦截器
http.interceptors.request.use(
(config: AxiosRequestConfig) => {
NProgress.start() // 进度条
// todo
return config
},
(error) => {
return Promise.reject(error)
}
)
// 响应拦截器
http.interceptors.response.use(
(response: AxiosResponse) => {
NProgress.done()
// todo
return response.data
},
(error) => {
NProgress.done()
const response = Object.assign({}, error.response)
response && ElMessage.error(statusCode[response.status] || '系统异常, 请检查网络或联系管理员!')
return Promise.reject(error)
}
)
interface responseData<T> {
code: number;
data: T;
msg: string;
}
const request = <T = unknown>(config: AxiosRequestConfig): Promise<responseData<T>> => {
return new Promise((resolve, reject) => {
http
.request<T>(config)
.then((res: AxiosResponse) => resolve(res.data))
.catch((err: { message: string }) => reject(err))
})
}
export default request
基本使用:
import request from '@/utils/request'
import type { dataType, loginData, userType } from './type.d.ts'
/**
* @description: 用户登录
* @params data
*/
export const loginAPI = (data: loginData) => {
return request<dataType>({
url: '/user/login', // mock接口
method: 'post',
data,
})
}
/**
* @description: 获取用户信息
* @returns
*/
export const userInfo = () => {
return request<userType>({
url: '/user/info', // mock接口
method: 'get',
})
}
以上就是简单的vue3+ts的封装啦,bye~