> 웹 프론트엔드 > JS 튜토리얼 > Vue에서 Promise 객체 Promise.all() 메소드를 사용하는 방법(순수 코드)

Vue에서 Promise 객체 Promise.all() 메소드를 사용하는 방법(순수 코드)

不言
풀어 주다: 2018-08-01 16:49:33
원래의
7700명이 탐색했습니다.

이 글은 Vue에서 Promise 객체의 Promise.all() 메서드를 사용하는 방법을 소개합니다. 참고할 만한 가치가 있으니 도움이 필요한 분들에게 도움이 되었으면 좋겠습니다.

1. promise 정의

<script type="text/javascript">
// 定义一些公共的属性和方法
const httpUrl = 'http://39.105.17.99:8080/'
function promiseFun (url, params) {
  return new Promise((resolve, reject) => {
    this.$http.post(this.globalHttpUrl + url, params).then(
      (res) => {
        resolve(res.json())
      },
      (err) => {
        reject(err.json())
      }
    )
  })
}
var p1 = Promise.resolve(1)
var p2 = Promise.resolve(2)
var p3 = Promise.resolve(3)
Promise.all([promiseFun, p1, p2, p3]).then((res) => {
  console.log(res, 'promise all 方法')
})
// 暴露出这些属性和方法
export default {
  httpUrl,
  promiseFun
}
</script>
로그인 후 복사

2. 컴포넌트에서

methods: {
    loginInFun () {
      localStorage.setItem('userId', '00001')
      let params = {
        telphone: this.username,
        password: this.password
      }
      let pro1 = this.promiseFun('itArtison/user/login', params)
      let pro2 = this.promiseFun('itArtisOn/user/register', params1)
      
      // 使用 Promise.all()
      Promise.all([pro1, pro2]).then(
          (res) => {
              console.log(res);
          }
      ).catch(
          (err) => {
              console.log(err)
          }
      )
로그인 후 복사

사용 추천 관련 기사:

Javascript의 BOM 객체 사용

Javascript의 call() 메소드와 apply() 메소드의 사용법은 무엇입니까? ?(코드 포함)

위 내용은 Vue에서 Promise 객체 Promise.all() 메소드를 사용하는 방법(순수 코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿