Возврат данных из axios не может быть записан в переменную

Question

Я хочу получить атрибут данных из моего поста axios и записать его в локальную переменную для повторного использования.Если я console.log это внутри axios .then, то данные установлены, если я записываю их в свою переменную и хочу использовать их после, она пуста.

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)
        }
    }

Что я делаю неправильно?

Другой вопрос:

Это правильный путь, если я хочу повторно использовать идентификатор в другом методе?Моя цель состоит в том, чтобы сначала создать проект, если его еще нет в моей базе данных, затем я хочу повторно использовать идентификатор созданной или возвращенной модели проекта для создания нового клиента в моей базе данных, если у клиента уже есть проект с идентификаторомэтого проекта не следует добавлять, если он новый, его следует добавить.

Это должно быть сделано в нескольких запросах или существует простой способ сделать это?

Answer 1

@ 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)
}

Answer 2

Я считаю, что проблема, которую вы видите, связана с асинхронной природой сетевых вызовов.Когда 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, поскольку оно позволяет вам проверять состояние ваших компонентов Vue.без использования console.log или добавления случайного эха в разметку шаблона.