uni-app中axios无法使用泛型 报错
uni-app中axios无法使用泛型 报错
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Windows | 21h2 | CLI |
产品分类：uniapp/小程序/微信
### 示例代码：
```javascript
import axios, {AxiosRequestConfig} from 'axios'
// create an axios instance
const service = axios.create({
baseURL: 'https://www.yongjiachen.top/jccrm', // url = base url + request url
//withCredentials: true, // send cookies when cross-domain requests 注意：withCredentials和后端配置的cross跨域不可同时使用
timeout: 6000, // request timeout
})
// request拦截器,在请求之前做一些处理
service.interceptors.request.use(
config => {
// if (store.state.token) {
// // 给请求头添加user-token
// config.headers["user-token"] = store.state.token;
// }
console.log('请求拦截成功')
return config;
},
error => {
console.log(error); // for debug
return Promise.reject(error);
}
);
//配置成功后的拦截器
service.interceptors.response.use(res => {
if (res.data.status == 200) {
return res.data
} else {
return Promise.reject(res.data.msg);
}
}, error => {
if (error.response.status) {
switch (error.response.status) {
case 401:
break;
default:
break;
}
}
return Promise.reject(error)
})
// 在main.js中放入这段自定义适配器的代码，就可以实现uniapp的app和小程序开发中能使用axios进行跨域网络请求，并支持携带cookie
axios.defaults.adapter = function (config: any) {
return new Promise((resolve, reject) => {
console.log(config)
var settle = require('axios/lib/core/settle');
var buildURL = require('axios/lib/helpers/buildURL');
uni.request({
method: config.method.toUpperCase(),
url: config.baseURL + buildURL(config.url, config.params, config.paramsSerializer),
header: config.headers,
data: config.data,
dataType: config.dataType,
responseType: config.responseType,
sslVerify: config.sslVerify,
complete: function complete(response: any) {
console.log("执行完成：", response)
response = {
data: response.data,
status: response.statusCode,
errMsg: response.errMsg,
header: response.header,
config: config
};
settle(resolve, reject, response);
}
})
})
}
export default service
import service from './utils/https'
import {RootObject} from "./models/rootObject";
import {AxiosResponse} from "axios";
service.request<RootObject,AxiosResponse<RootObject>>({
url:'/demo/public/admin/school/querySchoolList',
method:'get',
param:{}
}).then(function({data}){
console.log(data)
}).catch(err => {
console.log(err)
})
操作步骤：
编译即可报错
预期结果：
正常运行
实际结果：
TypeError: {(intermediate value)(intermediate value)(intermediate value)}.then is not a function
at Module.<anonymous> (vendor.js? [sm]:8680)
at Module.<anonymous> (vendor.js? [sm]:8763)
at __webpack_require__ (runtime.js? [sm]:92)
at Module.<anonymous> (main.js? [sm]:16)
at __webpack_require__ (runtime.js? [sm]:92)
at checkDeferredModules (runtime.js? [sm]:48)
at Array.webpackJsonpCallback [as push] (runtime.js? [sm]:35)
at main.js? [sm]:1
at require (VM2053 WAService.js:2)
at r (VM2053 WAService.js:2)(env: Windows,mp,1.05.2107221; lib: 2.19.2)
(anonymous) @ VM2091:5
doWhenAllScriptLoaded @ VM2082:1428
scriptLoaded @ VM2082:1456
(anonymous) @ VM2082:1481
load (async)
(anonymous) @ assubloader.js:1
V @ VM2053 WAService.js:2
loadScripts @ assubloader.js:1
async function (async)
loadScripts @ assubloader.js:1
loadAppResourceScripts @ assubloader.js:1
(anonymous) @ VM2082:1500
(anonymous) @ VM2082:1506
loadScripts @ assubloader.js:1
async function (async)
loadScripts @ assubloader.js:1
loadAppResourceScripts @ assubloader.js:1
(anonymous) @ VM2078:1
t.loadScripts @ VM8 asdebug.js:1
loadAppService @ VM8 asdebug.js:1
messagerCallback @ VM8 asdebug.js:1
(anonymous) @ VM8 asdebug.js:1
f @ VM8 asdebug.js:1
g @ VM8 asdebug.js:1
(anonymous) @ VM8 asdebug.js:1
_ws.onmessage @ VM8 asdebug.js:1
VM2053 WAService.js:2 TypeError: {(intermediate value)(intermediate value)(intermediate value)}.then is not a function
at Module.<anonymous> (vendor.js? [sm]:8680)
at Module.<anonymous> (vendor.js? [sm]:8763)
at __webpack_require__ (runtime.js? [sm]:92)
at Module.<anonymous> (main.js? [sm]:16)
at __webpack_require__ (runtime.js? [sm]:92)
at checkDeferredModules (runtime.js? [sm]:48)
at Array.webpackJsonpCallback [as push] (runtime.js? [sm]:35)
at main.js? [sm]:1
at require (VM2053 WAService.js:2)
at r (VM2053 WAService.js:2)(env: Windows,mp,1.05.2107221; lib: 2.19.2)
errorReport @ VM2053 WAService.js:2
thirdErrorReport @ VM2053 WAService.js:2
(anonymous) @ VM2053 WAService.js:2
u @ VM2053 WAService.js:2
o @ VM2053 WAService.js:2
c @ VM8 asdebug.js:1
r @ VM8 asdebug.js:1
window.onerror @ VM2046:1
doWhenAllScriptLoaded @ VM2082:1428
scriptLoaded @ VM2082:1456
(anonymous) @ VM2082:1481
error (async)
t.default @ VM2046:1
137 @ VM2046:1
n @ VM2046:1
(anonymous) @ VM2046:1
(anonymous) @ VM2046:1
VM2053 WAService.js:2 TypeError: {(intermediate value)(intermediate value)(intermediate value)}.then is not a function
at Module.<anonymous> (vendor.js? [sm]:8680)
at Module.<anonymous> (vendor.js? [sm]:8763)
at __webpack_require__ (runtime.js? [sm]:92)
at Module.<anonymous> (main.js? [sm]:16)
at __webpack_require__ (runtime.js? [sm]:92)
at checkDeferredModules (runtime.js? [sm]:48)
at Array.webpackJsonpCallback [as push] (runtime.js? [sm]:35)
at main.js? [sm]:1
at require (VM2053 WAService.js:2)
at r (VM2053 WAService.js:2)(env: Windows,mp,1.05.2107221; lib: 2.19.2)
errorReport @ VM2053 WAService.js:2
thirdErrorReport @ VM2053 WAService.js:2
(anonymous) @ VM2053 WAService.js:2
u @ VM2053 WAService.js:2
o @ VM2053 WAService.js:2
(anonymous) @ VM2053 WAService.js:2
emit @ VM2053 WAService.js:2
(anonymous) @ VM2053 WAService.js:2
doWhenAllScriptLoaded @ VM2082:1428
scriptLoaded @ VM2082:1456
(anonymous) @ VM2082:1481
error (async)
(anonymous) @ VM2053 WAService.js:2
(anonymous) @ VM2053 WAService.js:2
(anonymous) @ VM2053 WAService.js:2
bug描述：
cli版本使用vue3 ts开发时 使用axios无法使用泛型 报错
更多关于uni-app中axios无法使用泛型 报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html
1 回复
更多关于uni-app中axios无法使用泛型 报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html
这个错误并非由泛型本身引起，而是因为你的响应拦截器返回的数据结构不符合axios的预期。
在你的响应拦截器中：
service.interceptors.response.use(res => {
if (res.data.status == 200) {
return res.data // 这里返回的是res.data，而不是res
} else {
return Promise.reject(res.data.msg);
}
})
当res.data.status == 200时，你直接返回了res.data。这意味着axios实例返回的Promise解析值是res.data，而不是完整的AxiosResponse对象。
然而你在调用时使用了泛型：
service.request<RootObject,AxiosResponse<RootObject>>({...})
axios期望返回一个包含.then()方法的Promise，但由于你的拦截器返回的是普通数据而非Promise链，导致.then()方法不存在。
解决方案：
修改响应拦截器，确保返回完整的响应对象：
service.interceptors.response.use(res => {
if (res.data.status == 200) {
return res // 返回完整的res对象，而不是res.data
} else {
return Promise.reject(res.data.msg);
}
}, error => {
// ... 错误处理保持不变
})
或者，如果你只需要返回数据部分，可以这样调用：
// 移除第二个泛型参数，只指定响应数据的类型
service.request<RootObject>({
url:'/demo/public/admin/school/querySchoolList',
method:'get',
params:{} // 注意：应该是params而不是param
}).then(function(response){
console.log(response.data) // 通过response.data访问数据
}).catch(err => {
console.log(err)
})