Je souhaite mettre à jour ma variable nbeBugs
但在 then
qui n'est pas accessible au sein de la fonction.
Ma fonction getApi est une fonction async
car l'API met du temps à répondre
<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>
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
Si transmis à
.then()
函数的参数是常规函数,它有自己的作用域,并且在其内部,外部作用域的变量将无法使用this 访问.
.Utilisez plutôt les fonctions fléchées :
Remarque : vous serez mis à jour
this.chartGitlab
。要么将该更新移至then()
内,要么在服务器请求前面使用await
avant le retour de la demande. Très probablement, cela fonctionnera comme prévu :