点击async-await-场景：三个接口依次调用

最新推荐文章于 2024-03-21 19:44:10 发布

小姚同志yao

最新推荐文章于 2024-03-21 19:44:10 发布

阅读量1.3k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/yao_1063066968/article/details/114071391

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<template>
  <div @click="getproise">
    点击async-await-场景：三个接口依次调用
  </div>
</template>

<script>
export default {
  data(){
    return{

    }
  },
  methods: {
    requestApi(url,params){
      return new Promise((resolve,reject)=>{
        this.$allAxios(this,url,params,(res)=>{
          resolve(res.data.data)
        },(fail)=>{
          reject(fail.data.errorMsg)
        })
      })
    },
    async  getProvince(){
      return await this.requestApi('getProvince',{
        account: '',
        shopcode: '',
        username: '',
      })
    },
    async  getCity(access_code){
      return await this.requestApi('getCity',{
        access_code:access_code
      })
    },
    async  getDistrict(access_code){
      return await this.requestApi('getDistrict',{
        access_code:access_code
      })
    },
    async getproise(){
      var aa = await this.getProvince();
      var bb = await this.getCity(aa.access_code);
      var cc = await this.getDistrict(aa.access_code);
      console.log(aa,bb,cc)
    }
  },
}
</script>

<template>
  <div @click="getproise">
    点击async-await-场景：放在一个函数中调用
  </div>
</template>

<script>
export default {
  data(){
    return{

    }
  },
  methods: {
  	// 为了asyncAPI页面使用 将allaxios合并整合
	requestApi(url, params) {
	    return new Promise((resolve, reject) => {
	        allAxios(this, url, params, (res) => {
	            resolve(res.data.data)
	        }, (fail) => {
	            reject(fail.data.errorMsg)
	        })
	    })
	},
    async getproise(){
      try{
        let result = await this.requestApi('getProvince',{
          account: '',
          shopcode: '',
          username: '',
        })
        console.log(result)
        // 接下来连续调用接口
        let result1 = await this.getCity(result.access_code);
        console.log(result1)
      }catch(error){
        console.log(error)
      }
    },
    async  getCity(access_code){
      return await this.requestApi('getCity',{
        access_code:access_code
      })
    },
  }
}
</script>