Vue で Promise オブジェクトの Promise.all() メソッドを使用する方法 (純粋なコード)

不言
リリース: 2018-08-01 16:49:33
オリジナル
7672 人が閲覧しました

この記事では、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 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート