如何设置网站,常州市天宁区建设局网站,做网站排名收益,虚拟主机 2个网站导出一个通用的请求工具函数#xff0c;支持设置响应数据类型 支持不同接口设不同的响应数据的类型
import axios, { AxiosError, type Method } from axios// 4. 请求工具函数
const request (url: string, method: Method GET, submitData?: object) {return insta…导出一个通用的请求工具函数支持设置响应数据类型 支持不同接口设不同的响应数据的类型
import axios, { AxiosError, type Method } from axios// 4. 请求工具函数
const request (url: string, method: Method GET, submitData?: object) {return instance.request({url,method,[method.toUpperCase() GET ? params : data]: submitData})
}
加上泛型
//后台返回的数据结构几乎相同所以可以抽取相同的类型
type DataT {code: numbermessage: stringdata: T
}
// 4. 请求工具函数 toUpperCase()统一为大写默认为GET
const request T(url: string, method: Method get, submitData?: object) {return instance.requestT, DataT({url,method,[method.toLowerCase() get ? params : data]: submitData})
}测试封装好的请求工具函数
script setup langts
import { request } from /utils/request
import type { User } from ./types/user
import { Button as VanButton } from vant
import { useUserStore } from ./stores// 测试请求拦截器是否携带token响应拦截器401拦截到登录地址
const getUserInfo async () {const res await request(/patient/myUser)console.log(res)
}// 测试响应拦截器出现非10000的情况和返回剥离后的数据
const store useUserStore()
const login async () {
//地址/login/password 请求方式 POST提交的数据({mobile: 13211112222, password: abc12345 })const res await requestUser(/login/password, POST, {mobile: 13211112222,// 密码 abc123456 测试出现非10000的情况password: abc12345})store.setUser(res.data)
}
/scripttemplatevan-button typeprimary clickgetUserInfo获取个人信息/van-buttonvan-button typeprimary clicklogin登录/van-button
/template
