vue框架中export const多常量添加调用及异步请求Promise对象取值赋值操作
前端  /  管理员 发布于 2年前   1350
昨天技术群里有个同学工作中遇到的问题:
在config.js(相当于配置文件)文件里多常量异步请求接口数据的调用赋值操作,就是Promise对象取值赋值思路想叉批了,我是主后端的,前端vue不太熟,原理及知识面有点少,所以研究很长时间才搞明白,今天记录一下
我的环境:
windows
node
vue
之前已安装好了,具体教程有兴趣的可以复制过去看看
https://www.zongscan.com/demo333/48.html
启动node环境
D:\nodejs\mytest>cnpm run dev
> [email protected] dev D:\nodejs\mytest
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
10% building modules 0/1 modules 1 active ... webpack/hot/dev-server ./src
...
添加路由:
D:\nodejs\mytest\src\router\index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import test from '@/components/test'
Vue.use(Router)
export default new Router({
mode:'history',
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/test',
name: 'test',
component: test
}
]
})
添加创建配置文件
D:\nodejs\mytest\src\components\moduls\config.js
import axios from 'axios';
export const aaa = function(v) { return 1}
export const bbb = function(v) { return 2}
//测试
export const ccc = async url => {
let res = await axios.get('https://www.zongscan.com/indextest?v=123')
return res
}
创建添加单页文件
D:\nodejs\mytest\src\components\test.vue
<template>
<div class="hello">
<h1>{{ msg }}---111</h1>
</div>
</template>
<script>
import {aaa ,bbb ,ccc} from './moduls/config.js'
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
mounted() {
//console.log(ccc().then(res => { console.log(res) }))
//赋值 ccc()返回的是Promise对象
ccc().then(res => {
this.msg = res.data
})
}
}
</script>
好了看看效果图:
原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..路人 在
php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..博主 在
科学上网翻墙之v2rayN-Core客户端免费公益节点使用教程中评论 @ mashrdn 多切换几个节点测试,免费ssr是没那么稳..Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号