nuxt的asyncdata踩坑

介绍

asyncData方法会在组件（限于页面组件）每次加载之前被调用。它可以在服务端或路由更新之前被调用。在这个方法被调用的时候，第一个参数被设定为当前页面的上下文对象，你可以利用 asyncData方法来获取数据，Nuxt.js 会将 asyncData 返回的数据融合组件 data 方法返回的数据一并返回给当前组件

注意：由于asyncData方法是在组件 初始化 前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象。

全局配置

    module.exports = {
        env: {
            DEV_API: "",
            PROD_API: "",
            domain: process.env.ENV === "production" ? "https://www.wenjuan.com" : ""
        },
        axios: {
            proxy: true
         },
         proxy: {
          "/app_api": {
                changeOrigin: true,
                target: "/app_api/",
                pathRewrite: {
                  "^/app_api": ""
                }
            }
          }
        }
    }
    
    
    // 判断是路由跳转还是 axios 请求
        if (process.server) {
              config.baseURL = `${
                process.env.ENV !== "production"
                  ? process.env.DEV_API
                  : process.env.PROD_API
              }`;
              console.log(config.baseURL);
        }
    

使用

    async asyncData({ params, app }) {
        let res = await request.get(`/lib/app/plague/category/`, {});
        return {info:res.data};
    }
    
    一定要return出去获取到的对象，这样就可以在组件中使用，这里返回的数据会和组件中的data合并。这个函数不光在服务端会执行，在客户端同样也会执行。
    
    这样使用后，测试环境没有问题，数据正常获取。但是部署上线后就报错：
        1.NuxtServerError
            造成原因：是因为请求是没有带上域名，他不会自动加上域名，导致报错，找不到服务器
        2.NuxtServerError connect ECONNREFUSED 127.0.0.1:80
            造成原因:asyncData方法异步请求数据时，以为/api/${params.id}这个接口的网址是 127.0.0.1:80,所以将请求发送给了127.0.0.1:80，而我的接口服务器并没有跑在80端口上，所以报错
            
            
            
      mounted() {
          getInfo(){
              request.get(`/lib/app/plague/category`, {}).then(res => {
                  return {info:res.data};
              })
          }
      }
      
      这个就可以正常访问，自动加上了当前页面的域名
    

解决方法

将asyncData方法使用的请求url加上域名

    async asyncData({ params, app }) {
        let domain = app.context.env.domain;
        let res = await request.get(`${domain}/lib/app/plague/category/`, {});
        return {info:res.data};
    }
    
总结：请求url必须要加上域名