如何在Vue.js中更新一个'this'变量并设置API结果
P粉071626364
P粉071626364 2023-09-06 20:36:30
[Vue.js讨论组]

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

模板.vue





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

P粉071626364
P粉071626364

全部回复(1)
P粉854119263

如果传递给 .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"],
        },
      ],
    };
  },
}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号