Nuxt中axios操作

1 整合 axios

1.1 默认整合

• 在构建项目时，如果选择axios组件，nuxt.js将自动与axios进行整合
  

---

1.2 手动整合（可选）

• 步骤1：package.json有axios的版本
  

•   "dependencies": {
      "@nuxtjs/axios": "^5.13.1",
    },
  

• 步骤2：安装

  npm install
  

• 步骤3：nuxt.config.js 以模块的方式添加axios

  

    modules: [
      // https://go.nuxtjs.dev/axios
      '@nuxtjs/axios',
    ],
  

---

1.3 常见配置

• 修改 nuxt.config.js 进行baseURL的配置

    // Axios module configuration: https://go.nuxtjs.dev/config-axios
    axios: {
      baseURL:'http://localhost:10010/'
    },
  

---

2 使用axios发送ajax

• 在vue页面中，通过 this.$axios.xxx()操作ajax。this.$axios 与之前 axios等效。

  this.$axios.post("/search-service/search",this.searchMap).then( res => {
      //获得查询结果
      this.searchResult = res.data.data;
  });

---

3 使用asyncData发送 ajax

• asyncData中的ajax将在“前端服务端执行”，在浏览器看到是数据，而不是ajax程序。

3.1 发送一次请求

• 语法：

export default {
	async asyncData( context ) {  //context就相当于其他地方的this
        //发送ajax
        let { data } = await context.$axios.get('路径','参数')
        // 返回结果
        return {变量: 查询结果从data获取 }
	},
}

• 实例

  <template>
    <div>{{echo}}</div>
  </template>
  
  <script>
  export default {
    async asyncData(context) {
      // 发送ajax
      let {data} = await context.$axios.get('/service-consumer/feign/echo/abc')
      // 返回数据
      return {
        echo: data
      }
    },
  }
  </script>
  
  <style>
  
  </style>
  
  

---

3.2 发送多次请求

• 语法1：

  export default {
      async asyncData( content ) {
          let [结果1,结果2] = await Promise.all([ ajax请求1, ajax请求2])
          return {
              变量1: 结果1,
              变量2: 结果2
          }
      },
  }

• 语法2：

  export default {
      async asyncData( content ) {
          let [{数据:别名1},{数据:别名2}] = await Promise.all([ ajax请求1, ajax请求2])
          return {
              变量1: 别名1,
              变量2: 别名2
          }
      },
  }

• 实例

<template>
  <div>{{echo}} {{echo2}}</div>
</template>

<script>
export default {
  async asyncData(context) {
    // 发送ajax
    let [{data:echo}, {data:echo2}] = 
                await Promise.all([
                    context.$axios.get('/service-consumer/feign/echo/abc'),
                    context.$axios.get('/service-consumer/client/echo/abc')
                ])

    // 返回数据
    return {
      echo,
      echo2
    }
  },
}
</script>

<style>

</style>

---

4 使用fetch发送 ajax

• fetch 方法用于在渲染页面前填充应用的状态树（store）数据， 与 asyncData 方法类似，不同的是它不会设置组件的数据。

• 步骤1：创建store/index.js

  export const state = () => ({
    str: 0
  })
  
  export const mutations = {
    setData (state, value) {
      state.str = value
    }
  }
  

• 步骤2：测试页面

  <template>
    <div>
      <!-- 显示数据 -->
      {{$store.state.str}}
    </div>
  </template>
  
  <script>
  
  export default {
    async fetch( {store, $axios} ) {
      // 发送ajax
      let { data } = await $axios.get('/service-consumer/feign/echo/abc')
      // 设置数据
      store.commit('setData' , data )
    }
  }
  </script>
  
  <style>
  
  </style>