Question

我想从axios帖子中获取数据属性，并将其写入本地变量以重用。如果我将console.log记录在axios内，那么将设置tha数据，如果我将其写入变量并想在以后使用它，则为空。

export default {
        data(){
        return {
          post:{},
          projectId: '',
          existingProjects: []
        }
    },
    methods: {
        addPost(){
            //check if project exists else create
            let uriProj = 'http://localhost:4000/projects/add';
            this.axios.post(uriProj, {
               projectName: this.post.project,
            }).then(response => this.projectId = response.data.data);
            console.log("project_id: "+this.projectId)
        }
    }

我在做什么错了？

另一个问题：

如果我想在另一种方法中重用ID，这是正确的方法吗？我的目标是首先创建一个项目，如果该项目不在我的数据库中，那么我想重用已创建或返回的项目模型的ID在我的数据库中创建一个新客户（如果该客户已经具有该ID的项目）此项目的项目，不应添加，如果是新项目，则应添加。

是在多个请求中完成此操作还是有一种简单的方法来执行此操作？

Answer 1

我相信您看到的问题与网络调用的异步性质有关。当axios提交发布请求时，它会返回一个Promise，然后addPost函数将继续执行。因此，projectId在设置初始值之后但在网络请求完成之前被记录。一旦网络请求完成，then()函数中的所有内容都会执行，因此您可以通过移动console.log进行测试，以在请求完成后执行。您还可以在模板中输出值，以便可以看到它更新了{{ projectId }}

        this.axios.post(uriProj, {
           projectName: this.post.project,
        }).then(response => {
            this.projectId = response.data.data
            console.log("project_id: "+this.projectId)
        });

理想情况下，我建议使用VueJS开发工具浏览器扩展程序，因为它使您无需使用console.log或在模板标记中添加随机回显即可检查Vue组件的状态。

Answer 2

@jfadich是正确的。我建议使用async/await代替then，这样阅读起来更直观。

async addPost(){
    //check if project exists else create
    let uriProj = 'http://localhost:4000/projects/add';
    let resp = await this.axios.post(uriProj, {
       projectName: this.post.project,
    })
    this.projectId = resp.data.data
    console.log("project_id: "+this.projectId)
}

从axios返回的数据无法写入变量

2 个答案: