視頻資源來(lái)自：b站coderwhy王紅元老師——最全最新Vue、Vuejs教程，從入門到精通
文章僅為個(gè)人觀看視頻后的學(xué)習(xí)心得筆記，用于個(gè)人查看和記錄保存。文中定有疏漏錯(cuò)誤之處，懇請(qǐng)指正。

Promise是異步編程的一種解決方案。

回調(diào)地獄

Promise的基本使用

定時(shí)器的異步事件

參數(shù) -> 函數(shù)（resolve,reject）
resolve,reject本身又是函數(shù)
鏈?zhǔn)骄幊?/p>

new Promise((resolve,reject) =>{
  setTimeout(() =>{
    resolve()
  },1000)
}).then(() =>{
  console.log('Hello world')

  return new Promise((resolve ,reject) =>{
    setTimeout(() =>{
      resolve()
    },1000)
  })
}).then(() =>{
  console.log('Hello vuejs')

  return new Promise((resolve ,reject) =>{
    setTimeout(() =>{
      resolve()
    },1000)
  })
})

什么情況會(huì)用到Promise?

一般情況下，使用Promise對(duì)這個(gè)異步操作進(jìn)行封裝

new -> 構(gòu)造函數(shù)（1.保存了一些狀態(tài)信息 2.執(zhí)行傳入的函數(shù)）

在執(zhí)行傳入的回調(diào)函數(shù)時(shí)，會(huì)傳入兩個(gè)參數(shù)，resolve，reject，本身又是函數(shù)

請(qǐng)求與處理分離，變得優(yōu)雅。。

new Promise((resolve,reject) =>{
  setTimeout(() =>{
    //成功的時(shí)候調(diào)用resolve
    //resolve()

    //失敗的時(shí)候調(diào)用reject
    reject('error message')
  },1000)
}).then(data => {
  console.log(data);
  console.log(data);
}).catch(err =>{
  console.log(err)
})

控制臺(tái)輸出 error message

then前面的函數(shù)必須返回一個(gè)Promise對(duì)象

 return Promise.resolve(taskName)

Promise三種狀態(tài)

<font color=#909534>sync ->synchronization -> 同步</font>

<font color=#909534>async ->asynchronization -> 異步</font>

<font color=#909534>operation -> 操作</font>

image-20210711211042996

wrapped into
網(wǎng)絡(luò)請(qǐng)求：aaa -> 自己處理（10行）
處理：aaa 111 -> 自己處理（10行）
處理：aaa 222 -> 自己處理

new Promise((resolve ,reject) =>{
  setTimeout(()=>{
    resolve('aaa')
  },1000)
}).then(res =>{
  //1.自己處理10行代碼
  console.log(res,'第一層的10行處理代碼');

  //2.對(duì)結(jié)果進(jìn)行第一次處理
  return new Promise((resolve) =>{
    resolve(res + '111')
  })
}).then(res =>{
  console.log(res,'第二層的10行處理代碼');

  return new Promise(resolve => {
    resolve(res + '222')
  })
}).then(res =>{
    console.log(res,'第三層的10行處理代碼');
  })

new Promise((resolve ,reject) =>{
  setTimeout(()=>{
    resolve('aaa')
  },1000)
}).then(res =>{
  //1.自己處理10行代碼
  console.log(res,'第一層的10行處理代碼');

  //2.對(duì)結(jié)果進(jìn)行第一次處理
  return Promise.resolve(res + '111')
}).then(res =>{
  console.log(res,'第二層的10行處理代碼');

  return Promise.resolve(res + '222')
}).then(res =>{
  console.log(res,'第三層的10行處理代碼');
})

3.省略掉Promise.resolve

new Promise((resolve ,reject) =>{
  setTimeout(()=>{
    resolve('aaa')
  },1000)
}).then(res =>{
  //1.自己處理10行代碼
  console.log(res,'第一層的10行處理代碼');

  //2.對(duì)結(jié)果進(jìn)行第一次處理
  return Promise.resolve(res + '111')
}).then(res =>{
  console.log(res,'第二層的10行處理代碼');

  return Promise.resolve(res + '222')
}).then(res =>{
  console.log(res,'第三層的10行處理代碼');
})

結(jié)果：<img src="https://xiao910888.oss-cn-hangzhou.aliyuncs.com/img/image-20210711224516288.png" alt="image-20210711224516288" style="zoom: 67%;" />

多個(gè) 共用一個(gè)catch。抓住錯(cuò)誤

1.reject，catch

  new Promise((resolve ,reject) =>{
    setTimeout(()=>{
      resolve('aaa')
    },1000)
  }).then(res =>{
    //1.自己處理10行代碼
    console.log(res,'第一層的10行處理代碼');

    //2.對(duì)結(jié)果進(jìn)行第一次處理
    return new Promise((resolve,reject) =>{
     // resolve(res + '111')
      reject('err')
    })
  }).then(res =>{
    console.log(res,'第二層的10行處理代碼');

    return new Promise(resolve => {
      resolve(res + '222')
    })
  }).then(res =>{
      console.log(res,'第三層的10行處理代碼');
    }).catch(err =>{
      console.log(err);
  })

2.throw，catch

  new Promise((resolve ,reject) =>{
    setTimeout(()=>{
      resolve('aaa')
    },1000)
  }).then(res =>{
    //1.自己處理10行代碼
    console.log(res,'第一層的10行處理代碼');

    //2.對(duì)結(jié)果進(jìn)行第一次處理
   // return Promise.resolve(res + '111')
    throw  'error message'
  }).then(res =>{
    console.log(res,'第二層的10行處理代碼');

    return Promise.resolve(res + '222')
  }).then(res =>{
    console.log(res,'第三層的10行處理代碼');
  }).catch(err =>{
    console.log(err);
  })

1.ajax異步訪問(wèn)：

兩個(gè)請(qǐng)求同時(shí)到達(dá)時(shí)才能處理

//請(qǐng)求一：
let isResult1 =false
let isResult2 =false
$ajax({
  url: '',
  success: function () {
    console.log('結(jié)果一');
    isResult1 = true
    handleResult()
  }
})
//請(qǐng)求二：
$ajax({
  url: '',
  success: function () {
    console.log('結(jié)果二');
    isResult2 = true
    handleResult()
  }
})

function handleResult() {
  if(isResult1 &&isResult2){
  }
}

<font color=#909534>iterator：可迭代的（數(shù)組）</font>

2.Promise的異步訪問(wèn)

<script>
  Promise.all([
      new Promise((resolve,reject) =>{
        setTimeout(() =>{
          resolve('result1')
        },2000)
      }),
      new Promise((resolve,reject) =>{
        setTimeout(() =>{
          resolve('result1')
        },1000)
      })
  ]).then(result =>{
    //results是個(gè)數(shù)組，results[0]代表第一個(gè)請(qǐng)求
    console.log(results);
  })

總目錄：
邂逅Vuejs
Vue基礎(chǔ)語(yǔ)法
組件化開發(fā)
前端模塊化
webpack詳解
Vue CLI詳解
vue-router
Promise的使用
Vuex詳解
網(wǎng)絡(luò)模塊封裝
項(xiàng)目實(shí)戰(zhàn)