Promiseの紹介

タイマーの非同期イベントを例にとると、各タイマーはネットワークリクエストと見なされます。通常の$ ajaxで記述されている場合、データ処理コードの量が多すぎてリクエストがネストされすぎると、次のようになります。コールバック地獄。。。

Promiseは明確な構造を持っています。取り扱いはエレガントです。 

new Promise((resolve, reject) => {
      // 第一次请求
      setTimeout(() => {
        resolve();
      }, 1000)
    }).then(() => {
      // 第一次处理
      let data = "hello world";
      console.log(data)
      console.log(data)
      console.log(data)

      return new Promise((resolve, reject) => {
        // 第二次请求
        setTimeout(() => {
          resolve()
        }, 1000)
      })
    }).then(() => {
      // 第二次处理
      let data1 = "hello 2"
      console.log(data1)
      console.log(data1)

      return new Promise((resolve, reject) => {
        // 第三次请求
        setTimeout(() => {
          resolve()
        }, 1000)
      })
    }).then(() => {
      // 第三次处理
      let data2 = "hello 3"
      console.log(data2)
      console.log(data2)
      console.log(data2)
    })

.catch（）の書き込みを無視し、setTimeoutをネットワーク要求として扱います。

new Promise( (resolve,reject) => {
      setTimeout(() => {
        // resolve("成功了！")
        reject("失败了！")
      },1000)
    }).then( data => {
      console.log(data)
    },err => {
      console.log(err)
    })

速記表示：

    // 普通写法
    new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("成功了！")
        // reject("失败了！")
      }, 1000)
    }).then(data => {
      console.log(data)

      // 普通写法
      return new Promise(resolve => {
        resolve(data + ' 第二次处理')
      })
      .then(data => {
        console.log(data)

        // 简写一
        // return Promise.resolve(data + ' 第三次处理')
        
        // 手动抛出异常，测试是否能catch到
        throw "err"
      }).then(data => {
        console.log(data)

        // 简写二
        return data + ' 第四次处理'
      }).then(data => {
        console.log(data)
      })
    }).catch (err => {
      console.log(err)
    })