08. asyncData和fetch

asyncData和fetch都是nuxt的钩子函数，这2个函数一般用于向后端请求数据。用法如下 ：

export default {
    async asyncData({ $axios }) {
        const res = await $axios({
            method: 'get',
            url: 'http://xxxx/getTitle',
        });
        return {
            title: res.data.title, // 把title赋值到data里的title
        };
    },
    data() {
        return {
            title: "",
        };
    }
};

那为什么要在这2个函数中请求数据，而不在created或者mounted里请求数据呢？

因为在这2个函数中请求的数据，可以被seo！这个很重要，这也是我们使用nuxt来做项目的目的。你会发现，在这2个函数中请求的数据，当我们用鼠标-右键-查看源代码，是可以看到数据的。

如下 ：

asyncData和fetch的区别

相同点

1. 这2个函数都是只运行一次，即页面刚进来的时候运行

2. 这些数据都可以被seo

异同点

1. asyncData用于页面，而fetch用于组件。（就是说asyncData只能给pages下的文件使用，而fetch则只能给components文件夹下的文件使用）

2. asyncData不能使用this、window、或者操作dom，fetch不能使用window、操作dom，但是可以使用this，如下 ：

export default {
  async fetch() {
    const res = await this.$axios({
      method: "get",
      url: "http://xxxx/getTitle",
    });
    this.title = res.data.title;
  },
  data() {
    return {
      title: "",
    };
  },
};

使用asyncData和fetch的一些注意事项

1.  在asyncData中的请求数量需要适当，不要有太多的请求，不然会照成页面长时间卡顿白屏。因为程序需要等待asyncData中的所有请求都成功了，才会继续执行

2.  少用或者尽量不用fetch。页面渲染的时候，需要等待asyncData和fetch这2个请求都有响应才会开始渲染。因为asyncData会先执行，然后再执行fetch，如果这时fetch的请求卡主了，则会照成页面长时间卡顿白屏。