精华内容
下载资源
问答
  • 问题描述axios请求后台封装在一个函数中,用其他函数调用时,因为是异步操作所以总是未执行完后台请求就直接往下执行了,导致取不到正确的数据,请教各位前辈如何解决。vue小白一个,不胜感激。问题出现的环境背景及...

    问题描述

    axios请求后台封装在一个函数中,用其他函数调用时,因为是异步操作所以总是未执行完后台请求就直接往下执行了,导致取不到正确的数据,请教各位前辈如何解决。vue小白一个,不胜感激。

    问题出现的环境背景及自己尝试过哪些方法

    尝试使用aysnc和await,如下所示,还是没有成功

    相关代码

    // 请把代码文本粘贴到下方(请勿用图片代替代码)

    aysnc checkLogin () {

    if (localStorage.getItem("access_token")){

    //访问后台查看access_token是否合法

    var postData = qs.stringify({

    'access_token': localStorage.getItem("access_token"),

    'refresh_token': localStorage.getItem("refresh_token"),

    'username': localStorage.getItem("username")

    })

    axios({

    method: 'POST',

    url: globalVar.remoteUrl + '/LoginCheck',

    data: postData,

    responseType: 'json',

    headers: {"Content-Type": 'application/x-www-form-urlencoded'}

    }).then((response) => {

    if (response.data.code === 200){

    //允许访问

    this.$toast.success('访问成功')

    }else if(response.data.code === 201){

    // access_token过期,refresh_token未过期

    this.$toast.success('重新生成access_token,且访问成功')

    }else if(response.data.code === 404){

    // access_token与refresh_token均过期

    this.$toast.error("登录信息过期,请重新登录")

    console.log('111')

    }

    })

    }else {

    this.$toast.error("请先登录")

    }

    },

    async Login () {

    await this.checkLogin();

    console.log('222')

    },

    你期待的结果是什么?实际看到的错误信息又是什么?

    我想是先执行

    console.log('111')

    后执行

    console.log(222)

    结果总是反的

    回答

    你在好好看看async/await咋用的。。改了一下

    checkLogin() {

    if (!localStorage.getItem("access_token")) {

    return Promise.reject();

    }

    //访问后台查看access_token是否合法

    var postData = qs.stringify({

    access_token: localStorage.getItem("access_token"),

    refresh_token: localStorage.getItem("refresh_token"),

    username: localStorage.getItem("username")

    });

    return axios({

    method: "POST",

    url: globalVar.remoteUrl + "/LoginCheck",

    data: postData,

    responseType: "json",

    headers: { "Content-Type": "application/x-www-form-urlencoded" }

    });

    },

    async Login() {

    let response = await this.checkLogin().catch(err=>{

    this.$toast.error("请先登录");

    });

    if (response&&response.data.code === 200) {

    //允许访问

    this.$toast.success("访问成功");

    } else if (response&&response.data.code === 201) {

    // access_token过期,refresh_token未过期

    this.$toast.success("重新生成access_token,且访问成功");

    } else if (response&&response.data.code === 404) {

    // access_token与refresh_token均过期

    this.$toast.error("登录信息过期,请重新登录");

    console.log("111");

    }

    console.log("222");

    }

    用co方便点:

    co(function* () {

    let res = yield axios(...)

    console.log(res.data)

    console.log(222);

    });

    可以这样并发请求

    function getUserAccount() {

    return axios.get('/user/12345');

    }

    function getUserPermissions() {

    return axios.get('/user/12345/permissions');

    }

    axios.all([getUserAccount(), getUserPermissions()])

    .then(axios.spread(function (acct, perms) {

    // 两个请求现在都执行完成

    }));

    数组里面写几个都行

    这样应该可以

    aysnc checkLogin () {

    try {

    ...

    return await axios()

    }

    }

    async function a() {

    await promiseB;

    setTimeout(() => {

    console.log('c done');

    }, 2000);

    }

    const promiseB = new Promise(function(resolve, reject) {

    setTimeout(() => {

    console.log('b done');

    resolve('done');

    }, 4000);

    });

    a();

    b done

    c done

    给console.log(2)加一个setTimeout(x x x,0)

    展开全文
  • 主题列表:juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green, vue-pro, healer-readable, mk-cute, jzman, geek-black, awesome-greentheme: ...

    主题列表:juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green, vue-pro, healer-readable, mk-cute, jzman, geek-black, awesome-green

    theme: cyanosis

    highlight:

    使用场景:A函数向后台请求得到数据dataA,B函数需要利用到数据dataA立即进行一些计算或者向后台请求别的数据,

    这时候写

    this.A();

    this.B();

    会报错,因为异步的原因,执行B的时候A的数据还没返回。

    方法

    首先执行的函数A:

    A() {

    const params = {

    projectName: this.listSearchKey

    };

    // 利用promise

    return new Promise((resolve, reject) => {

    // 异步请求

    projectList(params)

    .then(res => {

    if (res.code === '0') {

    this.dataA = res.data;

    // 返回想要的数据

    resolve(this.dataA);

    }

    })

    .catch(err => {

    console.error(err);

    });

    });

    }

    接着执行的函数B

    B(id) {

    //用到了函数A的返回数据dataA,并且希望拿到返回数据之后立即执行

    const params = {

    projectId: id || this.dataA[0].projectId

    };

    taskList(params)

    .then(res => {

    if (res.code === '0') {

    this.tableData = res.data.list;

    this.total = res.data.total;

    }

    })

    .catch(err => {

    console.error(err);

    });

    },

    在执行时这样写

    this.getProjectList().then(val => {

    this.getTaskList();

    });

    版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    作者: 到了冬天以后

    原文链接:https://juejin.im/post/6914096805437243406

    展开全文
  • 这个项目是我用vue写的项目用在微信网页中,现在我要请求微信的位置的api然后获得经纬度参数然后再请求后台接口获得数据,我写在每个组件中是没问题的,现在我想把这个方法提出来做个公共方法来用,可是我先方法可以...

    这个项目是我用vue写的项目用在微信网页中,现在我要请求微信的位置的api然后获得经纬度参数然后再请求后台接口获得数据,我写在每个组件中是没问题的,现在我想把这个方法提出来做个公共方法来用,可是我先方法可以调用也能请求到数据,但是我在调用方法的组件中拿不到数据,下面是代码,写在一个单独的js文件中

    //地理位置定位

    import {getLocationUrl} from 'common/config'

    import {SaveLocalStorage,GetLocalStorage} from 'common/localStorage'

    import {PasswordPost} from 'common/tool'

    export function GetLocationPos(){

    let _this=this

    return wx.ready(function(){

    wx.getLocation({

    type: 'wgs84', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'

    success: function (res) {

    let data=JSON.stringify(res)

    SaveLocalStorage('_User_Loaction_',data)

    let str=res.latitude+','+res.longitude

    return SendLocationAjax(str)

    }

    })

    })

    }

    function SendLocationAjax(params){

    //获取详细的城市信息

    return vm.$http.post(getLocationUrl,PasswordPost({location:params})).then((res)=>{

    // console.log(res.data)

    let data=JSON.stringify(res.data.data)

    vm.$cookie.set('user_location_info',data,{ expires: '1h' })//存一个1小时的地理cookie

    console.log(JSON.parse(vm.$cookie.get('user_location_info')))

    return res.data

    })

    }

    问下该如何修改可以在组件中拿到数据

    展开全文
  • Vue在页面数据渲染完成之后的调用方法在使用Vue框架的时候,有时候需要在Vue在页面数据渲染完成之后调用方法,不然获取不到准确的数据,特别是在获取列表的高度的时候,由于数据没有加载,获取不到准确的高度。...

    Vue在页面数据渲染完成之后的调用方法

    在使用Vue框架的时候,有时候需要在Vue在页面数据渲染完成之后调用方法,不然获取不到准确的数据,特别是在获取列表的高度的时候,由于数据没有加载完,获取不到准确的高度。之前在使用jquery的时候,有ready可以帮助我们实现,但是Vue不存在此类方法,我们需要结合watch和this.$nextTick()来实现。

    nextTick:在下次 DOM 更新循环结束之后执行延迟回调。

    watch:用于观察Vue实例上的数据变动。对应一个对象,键是观察表达式,值是对应回调。

    之前我是这样子使用nextTick的:

    mounted:{

    this.$nextTick(function(){

    /方法

    })

    }

    经测试发现实现不了所需要的效果,只有结构,没有数据,即获取不到想要的高度

    后发现需要结合watch监听某个属性:

    watch:{

    asyncArray:function()

    this.$nextTick(function(){

    //方法

    });

    }

    }

    经测试可用!

    以上这篇Vue在页面数据渲染完成之后的调用方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

    时间: 2018-09-09

    最近在做一个vue项目,用的是官方推荐的axios请求数据,数据结构是一级对象嵌套二级对象,发现一级对象数据渲染不报错,二级数据渲染报错.很是郁闷!data函数如下 export default { name: 'hello', data() { return { card:{} } } } 返回的数据如下: { "object":{ "subObject":"123", ... } } 报错的原因是在data函数return的card里没有二级

    vue里面本身带有两个回调函数: 一个是`Vue.nextTick(callback)`,当数据发生变化,更新后执行回调. 另一个是`Vue.$nextTick(callback)`,当dom发生变化,更新后执行的回调. 栗子: ...

    • {{item}}
    ... new Vue({ el:'#demo', data:
    展开全文
  • vue首页异步请求后数据不渲染

    千次阅读 2020-12-22 15:21:28
    自己遇到的问题记录一下,做一个企业微信鉴权登录,首页获取用户信息存session方便后续页面调用。...由于是异步请求,而app和home在请求还未完成时就已经加载完毕了,导致从session中拿取不到数据。知...
  • getInfoFn: async function(){ var that = this;... // 执行其它操作 } up主先前只是在getInfoFn函数内部 加了一对async/await =>不生效。 然后再调用getInfoFn的地方又加了一对async/await =>成功。
  • vue中,axios异步加载数据,但是有的文件里面需要用到异步拿到的数据数据还没拿到,文件已经执行了,这时候数据就是空,就会报错,这个问题怎么解决?具体表现:我这边vue项目是进入页面的时候会调用一个login方法...
  • 提醒一下:建议把ajax的请求,拆分成一...应该写到ajax执行结束。var lhcmDetail=new Vue({el:'#video-detail',data:{loadFlag:false},methods:{loading:function(a){//是否显示加载动画this.loadFlag=a;},judgeLo...
  • 本篇记录一下Vue.js 监控v-for循环渲染完成后执行方法。再项目开发中经常会遇到v-for循环渲染完成后需要设置某些元素选中或者其它一些特有样式。以前都 是用setTimeout实现。但for的数据源是通过ajax获取,获取的...
  • 比如一个弹窗需要请求表格跟树组件的数据需要发两个请求,这时我们需要等两个请求完成拿到数据后再去打开弹窗。 多个请求 axios.all([axios.post("/test1"),axios.post("/test2")]).then((test1,test2)=>{ ...
  • 需要引用vue-resource在入口函数中加入import VueResource from 'vue-...在package.json文件中加入"dependencies": {"vue": "^2.2.6","vue-resource":"^1.2.1"},请求如下mounted: function () {// GET /someUrl...
  • 由于这里是在的基础上进行稍加修改完成的,因而其绝大部分代码与上面的是一样的,而其不同之处在于,其请求数据的数据源不是来源于json文件,而是来自于后台的数据。此处的后台服务器中的数据由json server所提供。...
  • 最近在开发中遇到了这样一些情况,通过点击事件改变了对象里面得数据,但是页面却不刷新,后来发现,是在给对象添加属性时出现的问题。当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向...
  • Vue 如何解决跨域请求数据首先vue如何请求数据呢?解决跨域问题友情链接:365淘券吧 首先vue如何请求数据呢? vue 请求数据我采用了 axios 第一步: 打开cmd 进入到vue的项目目录 然后执行下面的命令安装axios ...
  • 之前问了一个循环请求接口的问题,循环请求接口是成功的,oneKeyGet(){let queue=this.dataTable.forEach(item=>{return new Promise(resolve=>{this.goToDetail(item).then(res=>{resolve(res)// this....
  • 例如第二个请求里参数,是从第一个接口中拿到的 asyncgetOrderDto(){ awaitthis.$get("url"+this.dataId) .then(data=>{ if(data){ this.orderDto=data; } }) .catch(error=>{ }); aw...
  • 首先说下今天遇到的问题: ...这些问题的出现是因为最开始请求后台的数据接口方法 fun A 写在 mounted 中, fun A 如下: getDetailData() { var that = this; var id = this.$route.query..
  • VUE DOM加载后执行自定义事件的方法

    千次阅读 2020-12-19 04:11:20
    最近想用vue做一个小东西,谁知道一开始就遇到了一个棘手的问题:首先我想在页面加载前通过ajax请求页面展示所需要的信息,于是我在created钩子函数里面请求了我想要的数据created:function(){var url="/indexitem";...
  • 需求如下:进入页面有一个检测按钮,点击即可向后端请求数据。进入页面如果不点击检测则显示如下点击检测 如果返回的是正常的状态则显示如果返回的状态是异常 则显示目前有个BUG 就是点击检测的时候 先从变为 然后...
  • 通过vue的异步请求数据的方法,去解决页面加载但是没有数据的问题 在main.js中引入全局异步请求的方法。代码如下 //全局引用异步执行请求方法 这里的可以通过传入在某个页面想要请求的接口 Vue.prototype.$...
  • Vue.js DOM加载后执行自定义事件的方法发布于 2020-7-12|复制链接分享一篇关于VUE DOM加载后执行自定义事件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小妖过来看看吧最近想用vue做一个小东西,谁...
  • vue中怎么请求后端数据?下面本篇文章给大家介绍一下vue 请求后台数据。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。vue 请求后台数据需要引用vue-resource安装请参考...
  • 如果在这里需要操作dom, 应该是等待 Vue 完成更新 DOM之后。一、新闻滚动列表1、在created函数中获取后台数据;2、模板引擎中用v-for生成列表项;3、调用滚动函数,假设该滚动函数式原声方法写的;4、什么时候开始...
  • vue在一个方法执行完后执行另一个方法用Promise来实现。Promise是ES6的新特性,用于处理异步操作逻辑,用过给Promise添加then和catch函数,处理成功和失败的情况ES7中新提出async搭配await,建议使用async搭配await...
  • 使用vue-resource库发送请求获取数据大家一定知道,在jquery中,我们使用$.ajax()方法,来发送请求获取数据,在vue中,我们使用vue-resource或者axios来向接口发送请求,获取数据,官方推荐使用axios,其实用法差不多...
  • 这次给大家带来vue请求数据后再渲染dom步骤详解,vue请求数据后再渲染dom的注意事项有哪些,下面就是实战案例,一起来看一下。在项目中遇到了一个问题,下面是vue template中的代码:我之前的写法是这样做的结果是...
  • 1,首先我们看下官网对created和mounted这个2个生命周期怎么定义的:created:(在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 50,463
精华内容 20,185
热门标签
关键字:

vue请求数据完成后执行

vue 订阅