nuxt学习二
Nuxt路由与视图
https://blog.csdn.net/v3424/article/details/121938799
6. ajax操作
6.1 整合axios
6.1.1 默认整合
- 在构建项目时,如果选择axios组件,nuxt.js将自动与axios进行整合
6.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',
],
6.1.3 常见配置
- 修改 nuxt.config.js 进行baseURL的配置
// Axios module configuration: https://go.nuxtjs.dev/config-axios
axios: {
baseURL:'http://localhost:10010/'//此处是我的网关地址
},
6.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;
});
6.3 使用asyncData发送 ajax
- asyncData中的ajax将在“前端服务端执行”,在浏览器看到是数据,而不是ajax程序。
6.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>
6.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>
6.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>
6.5 插件:自定义axios
6.5.1 客户端
-
步骤一:在
nuxt.conf.js
中配置客户端插件,设置 mode 为 clientplugins: [ { 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)
}
6.5.2 服务端
-
步骤一:配置服务端插件,设置 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) }
6.5.3 插件配置总结
//方式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', //前端客户端 + 前端服务端
]