loadcsv(file: File): string[] {
let csvRecordsArray: string[];
this.parse(file).then((p) => {
console.log(p);
csvRecordsArray = p as string[];
});
console.log('mydata', csvRecordsArray);
return csvRecordsArray;
}
console.log内的 then打印我需要的数据。 Promise没问题。但是，由于它没有阻塞，因此我的第二个console.log在csvRecordsArray中未定义。因此，我阅读了Promise并得知我需要await。一旦输入async，使loadcsv async ts lint会说：
类型'string []'在ES5 / ES3中不是有效的异步函数返回类型，因为它没有引用Promise兼容的构造函数值。
请帮助我摆脱困境。
答案 0 :(得分：1)
您可以将<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie-edge">
<!-- Jquery CDN-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap CDN -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" integrity="sha384-pjaaA8dDz/5BgdFUPX6M/9SUZv4d12SUPF0axWc+VRZkx5xU3daN+lYb49+Ax+Tl" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- vuejs CDN -->
<script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div class="container">
<div id="app">
<tabs>
<tab name="One" :selected="true">
<h1>Composer is Great</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</tab>
<tab name="two">
<h1>Vagarant is awesome.</h1>
<p> Duis aute irure dolor in reprehenderit in voluptate velit.</p>
</tab>
<tab name="Three">
<h1>Docker is great.</h1>
<p>
ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</tab>
<tab name="Four">
<h1>What is Vue.js?</h1>
<p>sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</tab>
</tabs>
</div>
</div>
<script type="x-template" id="template-tabs">
<div id="applicationContainer">
<div id="navBarContainer" class='navbar navbar-expand-lg navbar-light bg-light'>
<ul class="nav navbar-nav">
<li class="nav-link active" :class="{ active: menuItem.isActive }" v-for="menuItem in navItemsArray" >
<a href="#" @click="selectTabItem(menuItem)">{{ menuItem.name }}</a>
</li>
</ul>
</div>
<div id="tabContentContainer">
<slot></slot>
</div>
</div>
</script>
<script type="x-template", id="template-tab">
<div id="individualTabContentContainer" v-show="isActive">
<slot></slot>
</div>
</script>
<script>
Vue.component('tabs',{
template: '#template-tabs',
data(){
return {
navItemsArray: []
}
},
mounted() {
this.navItemsArray = this.$children
},
methods: {
selectTabItem(passedAlongMenuItemObject){
this.navItemsArray.foreach(navItem => {
navItem.isActive = (passedAlongMenuItemObject == navItem)
})
}
}
})
Vue.component('tab', {
template: '#template-tab',
props:{
name: {required: true },
selected: {default: false }
},
data() {
return {
isActive: false
}
},
mounted() {
this.isActive = this.selected
}
})
new Vue({
el: '#app'
})
</script>
</body>
</html>
函数的实现更改为loadcsv。为此，您必须async对await的函数调用。
此外，由于预计this.parse函数将返回async，因此您必须将函数的返回类型更改为Promise
像这样更改您的实现：
Promise<string[]>答案 1 :(得分：0)
如果您的函数是async函数，因为您需要使用await，那么这些函数将始终返回Promise。
因此，正确的签名是：
loadcsv(file: File): Promise<string[]> {
}