# 同步 & 非同步 & promise
###### tags: `JavaScript` `JS 直播班 - 2021 秋季班`

## 同步
1. 執行程式是由上往下照順序跑下來

## 非同步

let data = '';
    setTimeout(() => {
      data = '小明';
    }, 10);
    console.log(data);


說明:
一開始 data 設為空字串 ， setTimeout() 將 data 設定為 '小明' 並延遲10秒 ， 再 console.log 出 data ， 執行完的地方會放入一個 event queue ， 而這個 setTimeout 則會擺在最後再來執行 ， 所以 console.log 只會將 data 顯示為空字串，就算把延遲10秒改成0秒也是

## 什麼是　promise
promise 是一個語法 ， 專門處理非同步問題
以下是一個 promise 函式

    const promiseSetTimeout = (status) => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          if (status) {
            resolve('promiseSetTimeout 成功')
          } else {
            reject('promiseSetTimeout 失敗')
          }
        }, 10);
      })
    }

### promise 兩種結果
Promise是一個function ， resolve 會回傳成功的結果 ， reject 會回傳失敗的結果 ， 情況只會擇一不會同時發生!

### 如果成功則執行then，記得then跟catch要一起加上去，不一定每次都成功~

// #1 示範案例：成功
    promiseSetTimeout(1)
    .then(res=>{
      console.log(res);
    })
    .catch(err=>{
      console.log(err);
    })

### 如果失敗則catch捕捉失敗

// #2 示範案例：失敗
    promiseSetTimeout(0)
    .then(res=>{
        console.log(res);
    })
    .catch(err=>{
      console.log(err);
    })

### promise 串接，執行完之後接下去再執行(解決非同步)

  // #3 示範案例：鏈接
    promiseSetTimeout(1)
    .then(res=>{
      console.log(res);
      return promiseSetTimeout(1);  //再回傳一個 promise 來進行執行下一個then，可串接很多個~
    })
    .then(res=>{
      console.log(res);
    })
    .catch(err=>{
      console.log(err);
    })

### 如果串接中途發生錯誤的話呢?

Ans : 會從錯誤的地方直接跳到 catch ， 中間的 then 並不會被執行 ， 但是 catch 之後的 then 還會繼續接著執行

## 實際用 axios 來進行串接範例~

 axios.get("https://randomuser.me/api/")
    .then(res=>{
      console.log(res.data);
      const {seed}=res.data.info;
      return axios.get(`https://randomuser.me/api/?seed=${seed}`)
    })
    .then(res=>{
      console.log(res.data);
    })
    .catch(err=>{
      console.log(err);
    })