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. a x i o s . x x x ( ) 操 作 a j a x 。 t h i s . axios.xxx() 操作ajax。this. axios.xxx()ajaxthis.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>
    
    
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值