代码之家 › 专栏 › 技术社区 › Alexander Kim

在创建的函数-Vue2中访问axios响应数据

axios vue.js javascript

Alexander Kim · 技术社区 · 6 年前

categories mounted () :

data () {
  return {
    categories: {}
  }
}

created () {
  this.fetchCategories()
  this.showArticles(this.categories[0].id)
}

methods: {
  fetchCategories () {
    return axios.get(globalConfig.FAQCATS_URL)
      .then((resp) => {
        this.categories = resp.data
      })
      .catch((err) => {
        console.log(err)
      })
    }
}

Cannot read property 'id' of undefined . 我猜axios的承诺是异步的,这就是为什么我不能在内部使用它的响应 created 或 mounted . 如何正确访问它的响应?

我的操作的目的是在页面加载时设置默认类别,这样页面就不会为空,因为如果没有选择类别,我不会显示任何项目。

showArticles

showArticles (id) {
  return axios.get(globalConfig.FAQCATS_URL + '/' + id + '/articles')
    .then((resp) => {
      this.articles = resp.data
      // console.log(resp)
    })
    .catch((err) => {
      console.log(err)
    })
}

2 回复 | 直到 6 年前

t.niese 6 年前

fetchCategories 使用解析 .then

this.fetchCategories()
    .then(() => this.showArticles(this.categories[0].id))

或者如果你能用 await async :

async created () {
  await this.fetchCategories()
  this.showArticles(this.categories[0].id)
}

但你可能想用 watch :

data () {
  return {
    categories: null
  }
}

watch: {
  categories( newList, oldList ) {
     if( !oldList ) {
        // only call showArticles if categories was not et before
        this.showArticles(this.categories[0].id)
     }
  }
} 

created () {
  this.fetchCategories()
}

Hozhabr 6 年前

Create mounted 相反 create Created methods 然后将响应存储在store函数中,因为您无法访问 data variable 安装前。

data () {
  return {
    categories: {}
  }
}

mounted() {
  this.fetchCategories()
}

methods: {
  fetchCategories () {
    return axios.get(globalConfig.FAQCATS_URL)
      .then((resp) => {
        this.categories = resp.data;
        this.showArticles(this.categories[0].id)
      })
      .catch((err) => {
        console.log(err)
      })
    }
    }

推荐文章

StuP · 响应式Vue组件在数据更改时不更新

2 年前

dbzx10299 · 对从Api端点返回的数据使用Vue转换组

2 年前

mrDandaleonx · Vue3获取div内容并将其发布到表单

2 年前

ateymour · Vue3在异步调用后将道具传递给子组件

2 年前

Artur Müller Romanov · 是否可以有条件地渲染布局?

2 年前

Ilijanovic · 对象可能未定义

2 年前

devAR · 单击其他组件时,单选按钮未保持选中状态

2 年前

Coderama · 在v-for指令中使用:key属性时,TS应出现类型错误

2 年前

Suffii · Vue表单输入绑定的条件绑定存在问题

2 年前

akkonrad · 函数的作用是:返回数据属性为空的实例

2 年前