vue 프로젝트 에서 promise 지옥 반환 과 동시 요청 문 제 를 해결 합 니 다.

필드 요구:
인터페이스 5 개 를 동시에 요청 해 야 합 니 다.
모두 성공 을 요청 한 후 다음 작업 을 수행 합 니 다.
해결 방법:
변 수 를 정의 합 니 다 i=5.인 터 페 이 스 를 성공 적 으로 요청 합 니 다.i=0 시 까지 다음 작업 을 수행 하지 않 으 면 실행 하지 않 습 니 다.
axios.all 병렬 요청,.then(axios.spread(function(callback 1,callback 2){})
promise.all 동시 요청,.then(function([callback 1,callback 2]){})
1.지옥 으로 돌아 가기:
함 수 는 매개 변수 로 층 층 이 끼 워 넣 습 니 다.
대신
2,promise.all 동시 요청
도입 인터페이스
import {getSellerDetail} from '../../api/seller'
import {getMemberCardInfo} from '../../api/pay_online/index'
데이터 처리
1.Promise 인 스 턴 스 를 만 들 고 데 이 터 를 가 져 옵 니 다.
2.처리 함수 resolve 와 reject 에 데 이 터 를 전달 합 니 다.
3.promise 는 성명 할 때 실 행 됩 니 다.

created(){
  if (this.$route.query.type){
    this.type = this.$route.query.type;
    this.sellerId = this.$route.query.targetId;
    this.initApi()
  }
},
methods: {
  initApi(){
    `//     `
    let SellerDetailApi = new Promise((resolve, reject) => {
      getSellerDetail(this.sellerId).then( res => {
        resolve(res)  // resolve(res.data)
      }).catch( err => {
        reject(res)
      })
    })
    `//      `
    let MemberCardInfoApi = new Promise((resolve, reject) => {
      getMemberCardInfo(this.sellerId, this.payMoney).then( res => {
        resolve(res) // resolve(res.data)
      }).catch( err => {
        reject(res)
      })
    })
    `// Promise all  ，       promise       `
    Promise.all([SellerDetailApi, MemberCardInfoApi]).then( res => {
      this.loading = false;
      //     
      this.detail = res[0].data.detail;
      this.sellerPic = this.detail.picture;
      this.sellerName = this.detail.name;
      this.discount = this.detail.discount;
      //      
      this.cardDetail = res[1].data;
      this.balance = this.cardDetail.balance; //  
      this.rechargeTip = this.cardDetail.rechargeTip; //         
    }).catch( err => {
      console.log(err)
    })
  }
}

3.인터페이스 반환:
promise.all 에서 console.log(res)는 배열 인터페이스 로 되 돌아 갑 니 다.

4.주의:
Promise.all 결함 중 어떤 작업 에 이상(reject)이 생기 면 모든 작업 이 끊 기 고 Promise 는 직접 reject 상태 에 들 어가 catch 로 되 돌 립 니 다.
Promise.allSettled 는 하나의 작업 이 정상 적 이거 나 이상 하 더 라 도 대응 하 는 상태 로 돌아 가 상기 문 제 를 해결 할 수 있 습 니 다.
vue 프로젝트 의 Promise 동기 화 요청
1.js 에서 Promise 정의

export function wxLogin() {
 let pResult = new Promise((resolve, reject) => {
 uni.login({
  provider: 'weixin',
  success: (res) => {
  console.log('login success:', res);
  // return res;
  setTimeout(function() {
   resolve(res);
  }, 3000);
  },
  fail: (err) => {
  console.log('login fail:', err);
  reject(err);
  }
 });
 }).catch(res => {
 console.log(666, res);
 })
 return pResult;
}

2.vue 파일 에서 사용

 import {login,wxLogin} from '@/common/login.js'
 
  (async () => {
  //      
  console.log(1111,"111")
  let aaa = await wxLogin();
  console.log(3333,"3333");
  console.log(4444,aaa);
  })()

이상 vue 프로젝트 에서 promise 가 지옥 반환 과 병발 요청 을 해결 하 는 문 제 는 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 도 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.