Question

我尝试在对我的wordpress后端进行api调用之前设置url参数，但是在创建的挂钩中出现错误：“ TypeError：无法读取未定义的属性'then'” 。我在做什么错了？

SearchPage.Vue

export default {
    props: {
        page: {
            type: Number,
            required: true
        }
    },
    data() {
        return {
            postsRequest: {
                type: 'posts',
                params: {
                    per_page: this.$store.state.site.posts_per_page,
                    page: this.page,
                    search: null
                },
                showLoading: true
            },
            totalPages: 0,
        }
    },
    computed: {
        getTerm() {
            return this.$route.query.search
        },
        posts() {
            if (this.getTerm) {
                return this.$store.getters.requestedItems(this.postsRequest)
            }
        },
        title() {
            return this.getTerm ? this.getTerm : ''
        }
    },
    methods: {
        getPosts() {
            return this.$store.dispatch('getItems', this.postsRequest)
        },
        setPostsRequestParams() {
            this.postsRequest.params.search = this.getTerm
        },
        setTotalPages() {
            this.totalPages = this.$store.getters.totalPages(this.postsRequest)
        }
    },
    created() {
        this.setPostsRequestParams().then(() => this.getPosts()).then(() => this.setTotalPages())
    }
}
</script>

this.setPostsRequestParams().then(() => this.getPosts()).then(() => this.setTotalPages())给我错误。

基本上，我希望能够从url（ getTerm() ）中获取参数值，在进行api调用之前在数据中的postsRequest.params.search中进行设置，然后运行getPosts()。

抱歉，这是一个愚蠢的错误，仍然值得学习。

Answer 1

您似乎正在期待该方法返回承诺。目前，它什么也没有返回。如果希望.tflite作用于.then，则this.setPostsRequestParams()需要返回类似setPostsRequestParams的内容。

Answer 2

.then()返回一个Promise。您调用的所有方法都不会返回Promise。

可以说，由于您不需要做任何异步操作，因此您可以按以下顺序执行：

created() {
  this.setPostsRequestParams()
  this.getPosts()
  this.setTotalPages()
}

如果您想使用.then()，则将希望您的方法返回可解决的承诺，即使我看不到它们将返回什么有意义的解决方案，但以下是Promise的样子：

methods: {
  getPosts() {
    return this.$store.dispatch('getItems', this.postsRequest)
  },
  setPostsRequestParams() {
    return new Promise((resolve) => {
      this.postsRequest.params.search = this.getTerm
      resolve(true)
    })

  },
  setTotalPages() {
    return new Promise((resolve) => {
      this.totalPages = this.$store.getters.totalPages(this.postsRequest)
      resolve(true)
    })
  }
},

created() {
  this.setPostsRequestParams()
    .then(() => this.getPosts())
    .then(() => this.setTotalPages())
}

Answer 3

您需要像下面这样更新created()方法，以消除TypeError：

created() {
    this.setPostsRequestParams();
    this.getPosts().then(
        () => this.setTotalPages();
    );
}

返回代码中的Promise的唯一方法是this.getPosts()，因此，它是唯一包含then()函数的方法。

Vue-创建的挂钩中出现错误：“ TypeError：无法读取未定义的属性'then'”

3 个答案: