Nuxt使用axios请求、loading页面配置——nuxt2

Nuxt数据交互

准备工作

数据的获取需要使用@nuxtjs/axios发出请求，同时使用@nuxtjs/proxy代理转发解决跨域问题。
所以我们需要安装这两个库

npm i @nuxtjs/axios @nuxtjs/proxy

这两个库属于nuxt内置的库，所以我们你需要在nuxt.config.js的modules中进行配置：
nuxt.config.js

export default {
   
   
  // 服务端渲染模式，同构
  mode: 'universal',
  ...
   /*
  ** 模块
  */
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ],
  ...
  }

获取数据

获取同域资源

准备数据
我们先伪造一个数据，之后获取该数据：
static/data/list.json

{
   
   
  "title": "数据获取"
}

获取数据
数据的获取是在nuxt的asyncData & fetch钩子中，这两个钩子都适用于在渲染组件前获取异步数据数据。
因为我们在modules中引入了@nuxtjs/axios，所以可以在上下问对象中获取到$axios来获取数据。

$axios({ url: "请求路径" ， params:{_limit:1});

• url：表示发送请求的路径
• params：表示请求的参数，_limit表示只接受一条请求结果
  eg：
• asyncData :

<template>
  <div>
    <h1>首页</h1>
    <div>{
  
  { title }}</div>
  </div>
</template>

<script>
export default {
     
     
  async asyncData({
      
       $axios }) {
     
     
    let res = await $axios({
     
      url: "/data/list.json" });
    console.log("获取到的数据是", res);
    return {
     
     
      title: res.data.title,
    };
  },
};
</script>

显示效果;

• fetch:

<template>
  <div>
    <h1>首页</h1>
    <div>{
  
  { title }}</div>
  </div>
</template>

<script>
export default {
     
     
  // async asyncData({ $axios }) {
     
     
  //   let res = await $axios({ url: "/data/list.json" });
  //   console.log("获取到的数据是", res);
  //   return {
     
     
  //     title: res.data.title,
  //   };
  // },
  async fetch({
      
       $axios }) {
     
     
    let res = await $axios({
     
      url: "/data/list.json" });
    console.log("获取到的数据是", res);
    return {
     
     
      title: res.data.title,
    };
  },
};
</script>

获取跨域资源

准备跨域数据
node运行如下文件，开启3001端口的服务，提供数据

const Vue = require('vue')
const server =