如何在 vuejs 中更新'this'变量并设置 API 结果

Question

我想更新我的变量nbeBugs，但在then函数内无法访问。我的函数getApi是async函数，因为API需要时间来响应

template.vue

<script>
import ChartDataLabels from 'chartjs-plugin-datalabels'
import getApi from '../../api/api'
const plugins = [ChartDataLabels]
export default {
data() {
return {

plugins: [ChartDataLabels],
nbeBugs: [10,10,10,10,10],
chartGitlab: null,
lightOptions3: {
plugins: {
legend: {
labels: {
color: '#ddd'
},
display: true,
position: 'bottom',
align: 'center'
},
datalabels: {
color: '#EEE',
labels: {
value: {
font: {
weight: 'bold',
size: 24,
}
}
}
}
}
}
}
},
mounted () {
this.getData()       
},
methods: {
getData() {
let url_application = 'api/bugs_gitlab'

getApi(url_application, null).then(function(results){
console.log(results.data)
this.nbeBugs = results.data
})
this.chartGitlab = {
labels: ['Bloquant','Critique','Majeur','Moyen','Faible'],
datasets: [
{
borderColor: "#071426",
data: this.nbeBugs,
backgroundColor: ["#FF6384","#36A2EB","#FFA726","#66BB6A","#a855f7"],
hoverBackgroundColor: ["#FF6384","#36A2EB","#FFA726","#66BB6A","#a855f7"]
}
]
}
}
}
}
</script>
<template>
<div class="col-12 xl:col-6">
<div class="card p-3 h-full">
<h5>Nombre de bugs Gitlab</h5>
<div class="flex h-full justify-content-center align-content-center flex-wrap card-container yellow-container">
<Chart type="doughnut" :data="chartGitlab" :options="lightOptions3" :plugins="plugins"/>
</div>
</div>
</div>
</template>
<style scoped>
</style>

api.js

import axios from "axios";
let path = import.meta.env.VITE_API_URL;
const axiosObjet = axios.create({
baseURL: path,
timeout: 8000,
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + localStorage.apiToken
}
});
async function getApi(api_path, data) {
//console.log(headers)
console.log(path)
//console.log(axiosObjet)
try {
let res = await axiosObjet.get(api_path)
if(res.status == 200){
// test for status you want, etc
console.log(res.status)
}

// Don't forget to return something   
return res
}
catch (err) {
console.error("getApi error : " + err);
}
}
export default getApi

Answer 1

如果传递给.then()函数的参数是一个正则函数，它有自己的作用域，并且在它内部，使用this.无法访问外部作用域的变量。

使用箭头功能：

getApi(url_application, null).then(({ data }) => {
console.log(data);
this.nbeBugs = data;
});

附带说明：在请求返回之前，您正在更新this.chartGitlab。将更新移动到then()中，或者在服务器请求之前使用await。最有可能的是，这将按预期工作：

methods: {
async getData() {
let url_application = "api/bugs_gitlab";
await getApi(url_application, null).then(({ data }) => {
console.log(data);
this.nbeBugs = data;
});
this.chartGitlab = {
labels: ["Bloquant", "Critique", "Majeur", "Moyen", "Faible"],
datasets: [
{
borderColor: "#071426",
data: this.nbeBugs,
backgroundColor: ["#FF6384","#36A2EB","#FFA726","#66BB6A","#a855f7"],
hoverBackgroundColor: ["#FF6384","#36A2EB","#FFA726","#66BB6A","#a855f7"],
},
],
};
},
}