脚本宝典收集整理的这篇文章主要介绍了基于Typescript与Axios的接口请求管理详解，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
本文主要介绍基于TS和AXIOS的接口请求封装
请求拦截
响应拦截
先把套路化的代码写出来：
import axios, {
AxiosInstance,
AxiosResponse,
AxiosRequestconfig,
AxiosError
} From 'axios'
export default abstract class HttpClient {
PRotected readonly instance: AxiosInstance
public constructor(baseURL = '/api', timeout = 1000 * 120) {
this.instance = axios.create({
baseURL,
timeout
})
// 1. 请求拦截器
this._inITializeRequestInterceptor()
// 2. 响应拦截器
this._initializeResponseinterceptor()
}
private _initializeRequestInterceptor = () => {
this.instance.interceptors.request.use(
this._handleRequest,
this._handleError
)
}
private _handleRequest = (config: AxiosRequestConfig) => {}
private _initializeResponseInterceptor = () => {
this.instance.interceptors.response.use(
this._handleResponse,
this._handleError
)
}
private _handleResponse = (response: AxiosResponse) => {}
protected _handleError = (error: AxiosError) => Promise.reject(error)
}
简单说一下上面的代码，我们创建了一个用于请求接口的HttpClient类，在constructor中定义了baseURL和超时时间timeout,同时定义了请求拦截方法和响应拦截方法。
至此，发起一个接口的流程如下：
下面开始详细的逻辑，请求拦截的时候，可以做的事情如下：
private _handleRequest = (config: AxiosRequestConfig) => {
//1. 添加自定义请求头
config.headers['Authorization'] = 'my token'
config.headers['mobile'] = 'my mobile'
//2. 判断是否登录（判断是否有toke）
//3. 转化数据格式
config.data = qs.stringify(config.data)
return config
}
得到了响应之后，处理如下：
// 响应拦截器
private _handleResponse = (response: AxiosResponse) => {
const { data, headers } = response
//1.--处理响应的token,保存token
const token = headers['authorization']
if (token) {
this._saveToken(token)
}
//2. --处理响应码,这里try-catch一下，如果后端有的接口没有返回code,直接返回
try {
const code = data.code,
message = data.desc || data.msg
const isSucceed = this._handleResCode(code, message, url)
if (isSucceed) {
return Promise.resolve(data)
} else {
return Promise.reject(message)
}
} catch (error) {
return Promise.resolve(data)
}
}
//保存token
private _saveToken(token: string) {
const USER = getModule(UserModule)
USER.setToken(token)
}
private _handleResCode(code: number, message: string, url: string) {
if (code === 0) {
// 请求成功
return true
} else if (code===4000) {
// token失效,跳回登录界面
Vue.prototyPE.$message.error('身份信息过期，请重新登陆')
router.push({ name: 'login' })
return false
} else {
// 其他情况，统统提示message信息
Vue.prototype.$message.error(message)
return false
}
}
建议请求相关的文件定义在@/api目录下面,目录如下
httpClient.ts user.ts uti.ts
在对应的文件中定义请求,注意事项
import HttpClient from './HttpClient'
import { AlarmItemType } from '../types/test'
import { BaseResType } from '../types/index'
class UtilApi extends HttpClient {
//例如后台返回的响应 res={code:xxx,data:xxx,token:xxx,desc:xxx}
//首先需要定义 res.data 的类型 即get的第一个参数 AlarmItemType
//然后需要定义整个响应的类型 即 BaseResType<AlarmItemType>
public getAlarmById = (id: string) =>
this.instance.get<AlarmItemType, BaseResType<AlarmItemType>>(
`/realtime/alarms/queryByAlarmId/${id}`
)
}
export const UTIL_API = new UtilApi()
在需要发送请求的组件中键入请求模块的关键字，例如USER_API,如果安装了插件TypeScript Importer，就会有相应的模块导入提示，此时输入回车即可导入相应的模块。
<template>
<section>请求数据:{{ alarmData }}</section>
</template>
<script lang="ts">
import { UTIL_API } from '@/api/utilApi'
import { Vue, component } from 'vue-property-decorator'
@Component({
components: {}
})
export default class TestRequest extends Vue {
alarmData = {}
async getAlarmData() {
const res = await UTIL_API.getAlarmById('alarmIDC7e9bd47')
if (res.code == 0) {
this.$message.success('请求成功')
this.alarmData = res.data
}
}
mounted() {
this.getAlarmData()
}
}
</script>
<style lang="scss" scoped></style>
到此这篇基于Typescript与Axios的接口请求管理的文章就介绍到这了,更多相关Typescript与Axios接口请求内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！
以上是脚本宝典为你收集整理的基于Typescript与Axios的接口请求管理详解全部内容，希望文章能够帮你解决基于Typescript与Axios的接口请求管理详解所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。