Vue异步执行接口请求,解决数据获取不到就去加载的问题

通过vue的异步请求数据的方法,去解决页面加载但是没有数据的问题

  • 首先引入方法

main.js中引入全局异步请求的方法。代码如下

//全局引用异步执行请求方法       这里的可以通过传入在某个页面想要请求的接口
Vue.prototype.$visitStore = async (option) => {
	//如果是ajax,注意要加同步等待
	await http.get({
		url: '/s***e/ch****ys', // url: option,直接这样引用即可,我这里是写死了
	}).then(res => {
		console.log('执行成功');
		store.commit('systeminfo',res)
	}).catch(err => {
		console.log('执行失败', err);
	});

}
  • 上面的http、store.commit方法均为封装好的 request以及vuex组件的注册
import Vue from 'vue' //引入vue框架
import App from './App'

//注册vuex组件
import store from './store'
Vue.prototype.$store = store

import http from './common/requestConfig.js' //request封装 引入
Vue.prototype.$http = http //request封装 引入
  • 页面调用定义的全局方法

在全局中定义好方法以后去页面中调用此方法

	async onLoad(e) {
		// 页面中执行这个请求方法  也可以传值URL链址
		await this.$visitStore();//同步执行这个方法
	}
  • 请求方法成功后,在异步请求的成功回调后执行store.commit('systeminfo',res),就是将获取到的数据赋值到vuex。

  • 在vuex中对获取到的返回值进行处理

vuex中定义上变量,然后写上一个接受并赋值的方法。

	const store = new Vuex.Store({
		//定义变量
		state: {
			//系统信息 系统模式
			sysmode: {},
			sysinfo: {}},
		//方法
		mutations: {
		//用于异步请求后的赋值   接受传值
		async systeminfo(state,provider){
			//将接收后的值赋给定义好的变量
			state.sysmode = provider;
			state.sysinfo = provider.sysinfo;
		},
	}
  • 在页面中使用处理后的值

最后在页面中引入vuex对于的信息,使用即可。

import {mapState} from 'vuex';//引入vuex定义的state属性
export default {
	computed: {
		...mapState(['sysmode']) //引入需要用到的值
	},
}
//html 中使用 {{sysmode}}
//js 中使用 this.sysmode

整体的使用步骤(流程)为

页面调用this.$visitStore();方法。

   async onLoad(e) {
   	// 页面中执行这个请求方法  也可以传值URL链址
   	await this.$visitStore();//同步执行这个方法
   }

该方法执行请求

//全局引用异步执行请求方法       这里的可以通过传入在某个页面想要请求的接口
Vue.prototype.$visitStore = async (option) => {
	//如果是ajax,注意要加同步等待
	await http.get({
		url: '/s***e/ch****ys', // url: option,直接这样引用即可,我这里是写死了
	}).then(res => {
		console.log('执行成功');
		store.commit('systeminfo',res)
	}).catch(err => {
		console.log('执行失败', err);
	});

}

将获取到的返回值传到vuex进行赋值。

	//方法
		mutations: {
		//用于异步请求后的赋值   接受传值
		async systeminfo(state,provider){
			//将接收后的值赋给定义好的变量
			state.sysmode = provider;
			state.sysinfo = provider.sysinfo;
		},

最后在页面中取值使用

import {mapState} from 'vuex';//引入vuex定义的state属性
export default {
	computed: {
		...mapState(['sysmode']) //引入需要用到的值
	},
}
//html 中使用 {{sysmode}}
//js 中使用 this.sysmode
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值