我的所有博文主要在我的另一个博客地址发布
如果对技术热爱者非常欢迎, 让我们一起探讨,共勉, 点击↓博客地址进入
博客地址
程序员必备编程之 Nuxt.js(四) ajax操作
一. 整合axiox
- 在构建项目时,如果选择axios组件,nuxt.js将自动与axios进行整合。
- 整合效果:
- 1)package.json有axios的版本
- 2)nuxt.config.js 以模块的方式添加axios
- 常见配置,修改 nuxt.config.js 进行baseURL的配置(根据自己后台配置路径更改即可)
axios: {
baseURL:'http://localhost:10010/api' //配置网关地址
},
二. 普通ajax(nuxt和axios整合)
普通axios操作this. a x i o s 就 可 以 获 得 a x i o s 实 例 , 从 而 发 送 a j a x / / g e t 请 求 t h i s . axios 就可以获得axios实例,从而发送ajax //get请求 this. axios就可以获得axios实例,从而发送ajax//get请求this.axios.get(‘路径’,参数) //post请求 this.$axios.post(‘路径’,参数)
举例使用:
<template>
<div>
普通ajax(nuxt整合axios)<br/>
<!-- 提供按钮,点击按钮,发送ajax查询结果,并将结果显示按钮下面 -->
<input type="button" @click="findAllFn" value="点击发送">
{{pageInfo}}
</div>
</template>
<script>
export default {
methods: {
async findAllFn() {
//发送ajax
let { data } = await this.$axios.get('/userservice/user/list')
//保存数据
this.pageInfo = data.data
}
},
data() {
return {
pageInfo: ''
}
},
}
</script>
<style>
</style>
三. 使用asyncData发送异步数据
1. 使用asyncData–一次请求
asyncData中的ajax将在“前端服务端执行”,在浏览器看到是数据,而不是ajax程序。
asyncData 方法,在渲染组件 之前 异步获取数据。asyncData方法会在组件(限于页面组件)每次加载之前被调用。asyncData方法在组件渲染之前执行了,组件还没有渲染,没有this。在asyncData方法中,不能使用this。
<template>
{{名称}}
</template>
<script>
export default {
//asyncData不能使用this(当前组件)
//提供第一个参数context,表示上下文(nuxt所有功能)
asyncData( context ) {
//发送ajax
let 数据 = context.$axios.get('','')
// 将数据组合并返回
return {
名称: 数据
}
}
}
</script>
•asyncData语法2:对context对象进行解构,context.$axios —> { $axios }
<script>
export default {
async asyncData( {$axios} ) {
//发送ajax
let { data } = await $axios.get('路径')
//封装
return {
变量: 查询数据
}
}
}
</script>
•示例
<template>
<div>
{{pageInfo}}
</div>
</template>
<script>
export default {
async asyncData( context ) {
//发送ajax
let { data } = await context.$axios.get('/userservice/user/list')
//组合数据
return {
pageInfo: data.data
}
},
}
</script>
<style>
</style>
普通ajax和asyncData对比
2.使用asyncData–多次请求
- 多次请求,需要借助 Promise ( $axios.get() 返回的就是 Promise对象 )
<script>
//很少直接使用“响应对象”
export default {
async asyncData( {$axios} ) {
//发送多次请求
let [响应1,响应2] = await Promise.all([请求1, 请求2])
//返回数据
return {
变量1: 响应1,
变量2: 响应2
}
}
}
</script>
//对“响应对象”进行解构 响应1 --> { data }
//“响应1”和“响应2”,都可以解构出data,变量名重复,建议采用别名 { data: 别名}
export default {
async asyncData( {$axios} ) {
//发送多次请求
let [ { data: d1 }, {data:d2} ] = await Promise.all([请求1, 请求2])
//返回数据
return {
变量1: d1.data,
变量2: d2.data
}
}
}
</script>
- 实例1:Promise.all 发送1个请求
<template>
<div>
{{pageInfo}}
</div>
</template>
<script>
export default {
async asyncData({ $axios }) {
//发送ajax
let [ {data} ] = await Promise.all([ $axios.get('/userservice/user/list') ])
//返回
return {
pageInfo : data.data
}
},
}
</script>
<style>
</style>
- 实例2:Promise.all 发送2个请求
<template>
<div>
{{pageInfo}}
{{list}}
</div>
</template>
<script>
export default {
async asyncData({ $axios }) {
//发送ajax
let [ {data : d1 }, {data : d2} ] = await Promise.all([ $axios.get('/userservice/user/list'), $axios.get('/userservice/user/list2') ])
//返回
return {
pageInfo : d1.data,
list : d2.data
}
},
}
</script>
<style>
</style>
三. fetch发送ajax
-
fetch 方法用于在渲染 页面前 填充应用的状态树(store)数据, 与 asyncData 方法类似,不同的是它不会设置组件的数据。
-
对比图
当然,要使用fetch发送ajax还得先学习整合vuex(状态树)
- 在nuxt中,只编写vuex的核心内容。
- 编写内容
//state区域,相当于定义变量
export const state = () => ({
})
//mutations区域,用于修改数据
export const mutations = {
方法名 (state,值) {
}
}
–state区域注意实现
//state 区域,相当于定义变量
export const state = ()=> {
return {
}
}
//省略写法
export const state = () => ({
})
举例使用:
-
- 创建 ~/store/index.js ,编写如下内容
//state 区域,相当于定义变量
export const state = () => ({
pageInfo: ''
})
//mutations区域,用于修改数据
export const mutations = {
setData( state , value) {
state.pageInfo = value
}
}
-
- 完成fetch操作
<template>
<div>
{{ this.$store.state.pageInfo }}
</div>
</template>
<script>
export default {
async fetch( {$axios, store } ) {
//发送ajax
let { data } = await $axios.get('/userservice/user/list')
console.info( data )
//将查询结果保存vuex
store.commit('setData', data.data )
}
}
</script>
<style>
</style>
同时需要注意的小知识点:
localStorage 和 sessionStorage在这里用不了,会出现一个错误
- localStorage 和 sessionStorage 都是浏览器端对象,在前端服务端没有。如果在created()使用以上2个变量,程序将抛异常(对象没有声明)
结论;
在nuxt.js中,将之前存放在created()中的代码,移植到 mounted()
<template>
</template>
<script>
export default {
/*
//created()函数在“客户端”和“服务端”都被调用,localStorage只能在客户端使用
created() {
localStorage.setItem('name','测试数据')
},
*/
mounted() {
localStorage.setItem('name','测试数据')
},
}
</script>
四.自定义axios
- 自定义axios目的:编写一个api.js文件,用于统一维护请求路径
- 步骤一:前提,修改nuxt.config.js,编写axios baseURL
- 步骤二:创建 ~/plugins/api.js 文件,并在nuxt.config.js文件进行配置(仅客户端可用)
plugins: [
// { src: '~/plugins/my.js' },
// { src: '~/plugins/my.js',mode: 'client' },
{ src: '~/plugins/my.js', mode: 'server' },
{ src: '~/plugins/api.js', mode: 'client' },
],
- 步骤三:修改api.js,拷贝固定内容
//自定义函数
const request = {
test : (params) => {
return axios.get('/web-service/test',{
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)
}
-
步骤四:其他组件中发送ajax
-
<template> <div> </div> </template> <script> export default { //页面加载成功 async mounted() { //发送ajax let { data } = await this.$request.findAll() console.info( data ) }, } </script> <style> </style>
-
步骤五:修改api.js 编写具体的功能
//自定义函数
const request = {
test : (params) => {
return axios.get('/web-service/test',{
params
})
},
//方法名 : 函数
findAll : () => {
return axios.get('/userservice/user/list')
}
}
自定义axios:原理分析
学完这里,你就可以在Nuxt.js中差不多可以来去自如
可以去操作编写一些页面了,快去试试吧!
看完恭喜你,又知道了一点点!!!
你知道的越多,不知道的越多!
~感谢志同道合的你阅读, 你的支持是我学习的最大动力 ! 加油 ,陌生人一起努力,共勉!!