整合 axios

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

手动整合
步骤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',
  ],

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

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

使用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;
});

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

发送一次请求
语法

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>

发送多次请求
语法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>

使用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>

客户端
步骤一：在nuxt.conf.js中配置客户端插件，设置 mode 为 client

  plugins: [
    { src: '~plugins/api.js', mode: 'client' }
  ],

步骤二：编写 plugins/api.js 对 内置的 $axios进行增强

//自定义函数
const request = {
  test : (params) => {
    return axios.get('/service-consumer/feign/echo/abc',{
      params
    })
  },
}

var axios = null
export default ({ $axios }, inject) => {

  //3） 保存内置的axios
  axios = $axios

  //4) 将自定义函数交于nuxt
  // 使用方式1：在vue中，this.$request.xxx()
  // 使用方式2：在nuxt的asyncData中，content.app.$request.xxx()

  inject('request', request)
}

服务端
步骤一：配置服务端插件，设置 mode 为 server

  plugins: [
    { src: '~plugins/api.js', mode: 'client' },
    { src: '~plugins/api.server.js', mode: 'server' },
  ],

步骤二：编写 plugins/api.server.js 对 内置的 $axios进行增强

const request = {
  test : (params) => {
    return axios.get('/service-consumer/feign/echo/abc',{
      params
    })
  },
  
}

var axios = null
export default ({ $axios, redirect, process }, inject) => {

  //赋值
  axios = $axios

  //4) 将自定义函数交于nuxt
  // 使用方式1：在vue中，this.$requestServer.xxx()
  // 使用方式2：在nuxt的asyncData中，content.app.$requestServer.xxx()
  inject('requestServer', request)
}

插件配置总结

//方式1：通过src设置文件，通过mode设置模式
plugins: [
	{ src: '~/plugins/apiclient.js', mode: 'client' },		//前端客户端
	{ src: '~/plugins/apiserver.js', mode: 'server' },		//前端服务端
    { src: '~/plugins/api.js' }								//前端客户端 + 前端服务端
]

//方式2：通过命名来确定模式
plugins: [
    '~/plugins/api.client.js',				//前端客户端
    '~/plugins/api.server.js',				//前端服务端
    '~/plugins/api.js',						//前端客户端 + 前端服务端
]