/**
* get方法,对应get请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function get(url, params){
return new Promise((resolve, reject) =>{
axios.get(url, {
params: params
})
.then(res => {
resolve(res.data);
})
.catch(err => {
reject(err.data)
})
});
}
/**
* post方法,对应post请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function post(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, params)
.then(res => {
resolve(res);
})
.catch(err => {
if(err.statusText == 'Internal Server Error'){
this.$confirm({
title: '程序错误',
content: '联系后端工程师进行处理',
okText: 'OK',
});
}
reject(err.data)
})
});
}
改为ts文件后,运行会报错如下:
ERROR in src/common/request.ts:38:22
TS7006: Parameter 'url' implicitly has an 'any' type.
36 | * @param {Object} params [请求时携带的参数]
37 | */
> 38 | export function get(url, params){
| ^^^
39 | return new Promise((resolve, reject) =>{
40 | axios.get(url, {
41 | params: params
ERROR in src/common/request.ts:38:27
TS7006: Parameter 'params' implicitly has an 'any' type.
36 | * @param {Object} params [请求时携带的参数]
37 | */
> 38 | export function get(url, params){
| ^^^^^^
39 | return new Promise((resolve, reject) =>{
40 | axios.get(url, {
41 | params: params
ERROR in src/common/request.ts:57:23
TS7006: Parameter 'url' implicitly has an 'any' type.
55 | * @param {Object} params [请求时携带的参数]
56 | */
> 57 | export function post(url, params) {
| ^^^
58 | return new Promise((resolve, reject) => {
59 | axios.post(url, params)
60 | .then(res => {
ERROR in src/common/request.ts:57:28
TS7006: Parameter 'params' implicitly has an 'any' type.
55 | * @param {Object} params [请求时携带的参数]
56 | */
> 57 | export function post(url, params) {
| ^^^^^^
58 | return new Promise((resolve, reject) => {
59 | axios.post(url, params)
60 | .then(res => {
ERROR in src/common/request.ts:65:17
TS2683: 'this' implicitly has type 'any' because it does not have a type annotation.
63 | .catch(err => {
64 | if(err.statusText == 'Internal Server Error'){
> 65 | this.$confirm({
| ^^^^
66 | title: '程序错误',
67 | content: '联系后端工程师进行处理',
68 | okText: 'OK',
url
和 params
参数没有类型注解,所以url
和 params
参数可以是任何类型的值,可能会导致类型错误。我们应该为 url
和 params
参数添加类型注解,例如 string
和 Record<string, any>
。
在 TypeScript 中,this
关键字的类型注解通常在类或对象的方法中添加。不能在一个非类、非对象的函数中使用的,这在 TypeScript 中是不允许的。
我们需要在Vue 中处理这个错误。因为 this.$confirm
是 Vue 实例的方法,不能在普通的 TypeScript 函数中使用。可以选择在调用 post
函数的 Vue 组件中处理这个错误。
修改为如下代码后报错消失:
/**
* get方法,对应get请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function get(url: string, params: Record<string, any>): Promise<any> {
return new Promise((resolve, reject) => {
axios.get(url, {
params: params
})
.then((res: AxiosResponse) => {
resolve(res.data);
})
.catch((err: AxiosError) => {
reject(err.response?.data)
})
});
}
/**
* post方法,对应post请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function post(url: string, params: Record<string, any>): Promise<any> {
return new Promise((resolve, reject) => {
axios.post(url, params)
.then((res: AxiosResponse) => {
resolve(res);
})
.catch((err: AxiosError) => {
if(err.message == 'Internal Server Error'){
// Note: This part has to be handled in a Vue component
// this.$confirm({
// title: '程序错误',
// content: '联系后端工程师进行处理',
// okText: 'OK',
// });
}
reject(err.response?.data)
})
});
}
我们添加了类型注解到 url
和 params
参数中,以及 get
和 post
函数的返回类型。在 catch
块中,我们使用了可选链操作符(?.
)来安全地访问 err.response.data
,这样即使 err.response
是 undefined
,代码也不会抛出错误。