4-1 Promise非同步

非同步是要等所有語法才會執行

 function getData() {
   setTimeout(() => {
     console.log('... 已取得遠端資料');
   }, 1000);
 }
// // 請問取得資料的順序為何:1>2>取得遠端資料
//因setTimeout為非同步屬性所以最後才執行
 const component = {
   init() {
    console.log(1);................結果執行順序1
     getData();....................結果執行順序3
    console.log(2);................結果執行順序2
   }
 }
 component.init();

// 更正確的說法，Promise 是為了解決傳統非同步語法難以建構及管理的問題

照理說順序
1>getData>3
但有setTimeout為非同步行為，所以最後顯示
程式顯示結果執行順序
1>2>取得遠端資料

關於promise運行結構

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

// #2-1 基礎運用
 promiseSetTimeout(true)
 .then(function(res){
   console.log(res);
 })


// #2-2 串接
 promiseSetTimeout(true)
 .then(function(res){
   console.log(res);
   return promiseSetTimeout(true);
 })
 .then (res =>{
   console.log(2,res);
 })

// #2-3 失敗捕捉

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

4-2 在瀏覽器上運行 ES 模組

預設匯出：常見的匯出方式，通常用於匯出物件，在 Vue 開發中可用來匯出元件
建立export1.js 以下內容語法:

export default {  //匯出檔案語法不具名
    ....
}

對應預設匯入:因為預設匯出沒有名字，所以可以為它命名

import newComponent from './export1.js';

具名匯出：可用於匯出已定義的變數、物件、函式，專案開發中通常用於 “方法匯出”
第三方的框架、函式、套件很常使用具名定義 “方法”
建立export2.js 以下內容語法:

export const a=1;

export function b(){
    console.log(1);
}

export function c(a,b){
    return a+b;
}

對應單一匯入（建議寫法）

import {a,b} from './export2.js';
console.log(a);
b();

全部匯入（不建議，錯誤較難發現）
*字號代表全部 as賦予物件名稱

import * as all from './export2.js';
console.log(all.a);
all.b();
console.log(all.c(1,5));

知識點來源:六角課程、008天絕對看不完的vue3.js、網路文章

以上是今天所提供知識點如有誤，再請務必在下面留言~