默认整合
在构建项目时，如果选择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', //前端客户端 + 前端服务端
]