【上課筆記】第二堂 #Vue 直播班 — 2022 春季班

2022.01.21

寫了作業才發現，不動手真的忘很快呢...

1. Axios / 非同步 與 API 說明

事件佇列

• JavaScript 本質是同步語言
• 非同步的行為會先放在事件佇列內，等所有程式執行完後才執行
• setTimeout 屬於非同步的概念，所以遇到時會先宣告放在function Quene(儲列)，待同步的JS完成後才會執行
• 迷因：callbackhell

Promise 參考

Promise結構

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

💡 執行 Promise 建構式時還會再帶入 resolve 與 reject 的 callback function。

• resolve: 完成的 callback
• reject: 失敗的 callback

#1 示範案例：成功
#2 示範案例：失敗

promiseSetTimeout(1)
  .then(function (res) {
    console.log(res);
  })
  .catch((err) => {
    console.log(err);
  })

#3 示範案例：鏈接(可以連貫觸發)

promiseSetTimeout(1)
  .then(function (res) {
    console.log(res);
    return promiseSetTimeout(1);
  })
  .then(function (res) {
    console.log(res);
  })
  .catch((err) => {
    console.log(err);
  })

💡錯誤將會以離該 .then 最近的 .catch 作為錯誤執行(=會跳過該 .then 之後+ .catch 之前的 其他 .then)

Axios 說明

github
CDN
randomuser.me
#1 示範取得遠端資料

axios.get('https://randomuser.me/api/')
    .then(res => {
      console.log(res);
    })
    .catch(err => {
      console.log(err);
    })

#2 示範使用鏈接

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

#3 示範失敗的情境
失敗參考

const btn = document.querySelector('#err');
btn.addEventListener('click', errFn);
function errFn() {
  axios.get('https://randomuser.me/')
    .catch(error => {
      console.dir(error); // Error 物件
      console.log(error.response);
      console.log(error.message);
    });
}

2.This

• function 中內建的參數
• params this window arguments(不太用了)

function fn(params) {
  console.log(params, this, window, arguments);
  // debugger; (js 除錯用)
}

• this 一開始為 window
• this 在 function 調用時才會改變
• 沒有在 function 中 var 宣告 會變成全域變數

var someone = '全域變數'; // 請注意，這裡用的是 var
function callSomeone() {
    console.log(this.someone);
}
callSomeone();

• this的指向關鍵在如何呼叫它

//#1
var obj = {
      someone: '物件',
      callSomeone() {
        console.log(this.someone);
      }
    }
obj.callSomeone();//物件
//#2
var obj2 = {
      someone: '物件2',
      callSomeone
    }
obj2.callSomeone(); //物件2
//#3
var wrapObj = {
      someone: '外層物件',
      callSomeone,
      innerObj: {
        someone: '內層物件',
        callSomeone,
      }
    }
wrapObj.innerObj.callSomeone();//內層物件

• 類似Vue的結構

const newObj={
    data:'...',
    render(){
        console.log(this.data)
    },
    init(){
        this.render()
    }
}
const Card = {
      el: '#app',
      template: `<div class="alert alert-primary" role="alert">
        A simple primary alert—check it out!
      </div>`,
      render() {
        // #1 如何取得本物件 el
        const dom = document.querySelector(this.el);
        // #2 如何取得本物件 template
        dom.innerHTML = this.template;
      }
    };
Card.render();

• 箭頭函式
  simple call(看不出來誰調用，※禁止使用) 大部分指向window
  箭頭函式沒有自己的this，會使用父層function作用域的的this(沒有父層就是window)

3.This 與 Vue 的關係

Vue.createApp({
    data(){
        return{
            text:'12345'
        }
    },
    // 方法集
    methods:{
        
    },
    // 生命週期
    mounted(){
        
    }
}).mount('#app');

• Vue建立物件時，會把 資料集合、方法集合、生命週期展開，所以用this可以直接呼叫執行資料、方法
• 生命週期物件建立的時候就會觸發它

mouted(){
}

• 畫面觸發

v-on:click="getData"

其他

Vu3
Option API
composition api