每日進度 1 (JS Concept)

Question 1

作用域

Answer 1

• var (scope) (hoisting)
  
  • 1. function scope
  • 2. global scope
  • 外 -> 內 (similar to scope chain, lexical outer environment)、i.e.
• const、let (block)
  
  • { }

Question 2

this in different type of functions

Answer 2

• 1. normal function: 取決於 the fun. 在哪裡 “執行” (implicit binding)
• 2. arrow function: 取決於 the fun. 在哪裡 “宣告”

Question 3

this的5種綁定priority

Answer 3

0. arrow function
1. new $fun () // 使用new關鍵字做綁定
2. explicit binding (bind、apply、call)
3. implicit binding (重點是怎樣被執行)
4. default binding (未經修飾, 沒有xxx.xxx or 沒有值like null or undefined) ( i.e. $fun.call(undefined) )

Question 4

同步、非同步fun.的圖示

Answer 4

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

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

Question 5

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

Answer 5

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

Question 6

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

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

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

Answer 6

• 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 7

Promise declaration (do sth. ajax with 相關處理) and applying

Answer 7

## Promise Declaration
const promise1 = new Promise((resolve, reject) => {
  // do sth. ajax

  if (404) reject(new Error('404'));
    //  不需要return
    //  不需要return
    //  不需要return

resolve(someDataFromAjax);
});

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

Question 8

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

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

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

Answer 8

!!! fetch也會回傳Promise !!!

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 = {}) => console.log(error));
	});
}

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

start();

Question 9

fetch回傳?

Answer 9

Promise

Question 10

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

Answer 10

1. async function 的 『 底層 、Promise related』
我們可以把一個function用async包裝來轉成 [回傳Promise] 的形式!!! 
  - (async function的底層還是用Promise來實作)
  - async fun. 一律回傳 Promise
  - // 在該async. function中如果沒有errors，return $value會相當於 resolve($value)
2. 『 不是 』
// 不是所有非同步處理的函式都能夠用async await==包裝使用==，
// ==能否==用async await來==包裝使用==端視==該function的實作方式而定==
// 像是fs.readFile "就被設計為只吃callback形式" ，
// 所以無法用async await包裝改寫

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

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

Question 11

Demonstration of timeoutDetectionPromise

Answer 11

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 12

Demonstration of timeoutDetectionPromise (concept)

Answer 12

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 13

Demonstration of timeoutDetectionPromise (code) 主要用了哪個 js function 和 Promise方法

Answer 13

export function timeoutDetectionPromise (timeout) {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
      reject(new Error('the timeout error msg that you need'));
    }, timeout);
	}); 
}

export function oauthDotGetWithTimeoutFunctionality(
callback,
oauthLib,
oauthUrl,
… // the parameters that you need
timeout,
) {
Promise.race([
new Promise((resolve, reject) => {
oauthLib.get(oauthUrl, null, null, function (oauthError, result) {
// Promise裡面除非需要，不然一般不太需要return

			if (oauthError) {
				reject(oauthError);
			}

				resolve(result);
			})
		}),
		timeoutDetectionPromise(3000),
	])
	.then((result) => {
		// do sth. with result
	})
	.catch((error) => {
		if (error.message === 'the timeout message that you need') {
            // timeout error
			// do sth. that you need

		return callback && callback(null, null);
	}

		// do sth. when it's not a timeout error
		callback && callback(error, null);
	});
}