每日進度11

Question 1

同步、非同步fun.的圖示

Answer 1

——–fun1——fun2——–fun3——–> // 同步

    /-----------------------\ ------fun1-----fun2-----fun3--------------> // 非同步
             \----------------/

Question 2

如何知道一個函式為同步或非同步

Answer 2

• 你沒有辦法知道一個函式是同步或者是非同步，除非你看過文件、或者函式的內部實作

Question 3

[1. the callback way] 用3種解法來解下列 the function gets data in ajax way

// hint: =fetch= some APIs or fs.readFile in the getData function

const start = () => {
  const data = getData();
  console.log(data);
}
start();

Answer 3

• callback: 在未來某一個時間點會完成執行的事情，wait for it callback
  
  • 傳callback function進去，作為 “未來會完成的事情” 的 “處理” 的 “預備”

function getData (cb = () => {}) {

	function getAjaxData () {
		fetch('https://jsonplaceholder.typicode.com/users')
    	.then((resp = {}) => resp.json())
      .then((respData = {}) => {
				// console.log(respData);
				cb(respData);
			})
			.catch((error = {}) => console.log(error));
	}

getAjaxData(); }

function start () {
  getData((theData = {}) => {
    console.log(theData);
  });
}

start();

Question 4

Promise declaration and applying

Answer 4

## Promise Declaration
const promise1 = new Promise((resolve, reject) => {
  // do sth. ajax
  if (404) reject(new Error('404'));
  resolve(someDataFromAjax); //  不需要return
});

Promise Applying
promise1
.then((ajaxData) => console.log(ajaxData))
.catch((error) => console.log(error));

Question 5

[2. the promise way] 用3種解法來解下列 the function gets data in ajax way

// hint: callSomeAPI or fs.readFile in the getData function

const start = () => {
  const data = getData();
  console.log(data);
}
start();

Answer 5

function getData () {
	return new Promise((resolve, reject) => {
	    fetch('https://jsonplaceholder.typicode.com/usddders')
    	      .then((resp = {}) => resp.json())
              .then((respData = {}) => {
                 // console.log(respData);
                 resolve(respData);
              })
	      .catch((error = {}) => reject(error));
	});
}

function start () {
    getData()
      .then((respData = {}) => console.log(respData))
      .catch((error = {}) => console.log(error));
}

start();

Question 6

[3. the async/await way] 用3種解法來解下列 the function gets data in ajax way

// hint: callSomeAPI or fs.readFile in the getData function

const start = () => {
  const data = getData();
  console.log(data);
}
start();

Answer 6

async function getData () {
  // do sth. ajax
  try {
      const resp = await fetch('https://jsonplaceholder.typicode.com/users');
      const respData = await resp.json();

      return respData;
  } catch (e) {
  	// do sth. error handling
    console.log(e);
  }
}

async function start () {
  const data = await getData();
  console.log(data);
}

start();

Question 7

針對function包裝async代表什麼？(3點)

Answer 7

1. async function 的 『 底層 、Promise related』
   我們可以把一個function用async包裝來轉成 [回傳Promise] 的形式!!!
   - (async function的底層還是用Promise來實作)
   - async fun. 一律回傳 Promise
   - // 在該async. function中如果沒有errors，return $value會相當於 resolve($value)
   - // 我們可以把一個function用async包裝來轉成 [回傳Promise] 的形式!!!

2. 『 不是 』
// 不是所有非同步處理的函式都能夠用async await包裝，
// 像是fs.readFile "就被設計為只吃callback形式" ，
// 所以無法用async await包裝改寫

3. 『 使用async await的 "限制" 』
// 要能夠使用 async await 改寫
// 要能夠使用 async await 去 apply the function
=> 因為async await的底層還是用Promise來實作，所以必須確保return Promise (或async/await)的函式才能夠用async await來操作。

// Promise 跟 async await 是 同一件事 !!!
// Promise 跟 async await 是 同一件事 !!!
// Promise 跟 async await 是 同一件事 !!!

Question 8

Demonstration of timeoutDetectionPromise

Answer 8

https://hackmd.io/AlMvjFHOTAunEQQf20rgpA

1. ==定義==技術難題
   - In my experience, the difficulty will go away if we have ==enough time==, we usually can find solutions and shift the pressure in the process if we have enough time

• the emergency incident will be the great example of a difficult technical challenge.

2. 舉例
   lots of 504 Timeout Errors been detected on the logging system (Splunk), that will cost the machine extra resources and the service will then redirected to 404 page, so it needs to be solved ASAP.
3. 結果 (強調==時間、快速解決、跟定義前後呼應==)
   Finally, I solved the problem within 2 hours (including hotfix build on pipeline).

Question 9

this的4個相關概念

Answer 9

• 1. (the owner object) 是function的owner object (the owner object of the function，代表function『 執行時 』的context)
• 2. (function如何被執行) 大部分時間取決於一個function如何被執行
• 3. (the arrow function的solution) arrow function的強制綁定的solution: that
• 4. (element的相關操作) element相關操作 (i.e. el.addEventListener(‘click’, e => console.log(this))) // 此時this代表該element

Question 10

this的綁定原則

Answer 10

0. arrorw function
1. new $function // 使用new關鍵字做綁定
2. 顯式綁定 (explicit binding)
   - bind、apply、call
3. 隱式綁定 (implicit binding)
   - 沒有ref.到其他物件
   - 重點在於『 怎麼被執行 』
4. 預設綁定 (default binding)
   - the function inside of a function
   - fun.apply(null)
   - fun.call(undefined)