vue在一个方法执行完后执行另一个方法
用Promise来实现。
Promise是ES6的新特性,用于处理异步操作逻辑,用过给Promise添加then和catch函数,处理成功和失败的情况

ES7中新提出async搭配await,建议使用async搭配await。
使用方法:async/await使用方法

示例1:

function2(){
    // 你的逻辑代码 
    return Promise.resolve(/* 这里是需要返回的数据*/)
}

function3(){
    // 你的逻辑代码 
    return Promise.resolve(/* 这里是需要返回的数据*/)
}

// 调用
function1(){
    this.function2().then(val => { 
        this.function3();
    });
}

示例2:

function timeout1(ms) {
  return new Promise(resolve => {
    setTimeout(resolve, ms);
  })
}

// 因为上面函数返回是的Promise对象,所以直接使用链式方法then时,是在Promise对象内的函数执行完之后执行的,这样就可以达到上面同样的结果
timeout1(5000).then(() => {
  console.log('timeout1'); // 5s之后打印出'timeout1'
})

示例3:
uniapp中request请求封装

function request(url, data = {}, method = "GET") {
  return new Promise(function(resolve, reject) {
    uni.request({
      url: url,
      data: data,
      method: method,
      header: {
        'Content-Type': 'application/json;charset=UTF-8',
        'token': uni.getStorageSync('token')
      },
      success: function(res) {
		if (res.data.code == 401) {
          //需要登录后才可以操作
          uni.showModal({
            title: '',
            content: '请重新登录',
            success: function(res) {
              uni.setStorageSync('token', null)
              if (res.confirm) {
                uni.redirectTo({
                  url: '/pages/index/page1-9/page1-9'
                });
              }
            }
          });
        } else {
          resolve(res.data);
        }
      },
      fail: function(err) {
				uni.showToast({
					icon: 'none',
					duration: 3000,
					title: '网络错误'
				})
        reject(err)
        console.log("failed")
      }
    })
  });
}

request(api.sendSms, {mobile: this.smsbtn.mobile}, 'GET').then(res => {
	if (res.code === 0) {
		uni.showToast({
			icon: 'success',
			title: '发送成功'
		});
	} else {
		uni.showToast({
			icon: 'none',
			title: res.msg
		});
	}
});
Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐