Promise基本使用

Promise是異步編程的一種解決方案，用于一個異步操作的最終完成(或失敗)及其結果值的表示，比傳統的回呼函式方案更加合理，

var promise = new Promise((resolve, reject) => {/* executor函式 */
    // ... some code
    if (/* 異步操作成功 */){
        resolve(value);
    } else {
        reject(error);
    }
});
promise.then((value) => {
    //success
}, (error) => {
    //failure
})

簡單實用

function timeout(ms) {
    return new Promise((resolve, reject) => {
        setTimeout(resolve, ms, 'done');
    });
}

timeout(2000).then((value) => {
    console.log(value); //done
});

var timeoutID = scope.setTimeout(function, [delay, arg1, arg2, ...]);

arg1, ..., argN 可選

附加引數，一旦定時器到期，它們會作為引數傳遞給function

1. Promise物件在創建后立即執行，then方法指定的回呼函式，將在當前腳本所有同步任務執行完才會執行，
2. 如果呼叫resolve函式和reject函式時帶有引數，那么它們的引數會被傳遞給回呼函式，reject函式的引數通常是Error物件的實體，表示拋出的錯誤；resolve函式的引數除了正常的值以外，還可能是另一個Promise 實體，

const p = new Promise((resolve,reject) => {
    return reject(new Error('err')); //reject方法的作用，等同于拋出錯誤
    //throw new Error('err');
});

p.then(null, (err) => {
    console.log(err);  //Err: err
});

//--------等價寫法---------
p.catch(err => {
    console.log(err); //Err: err
})

一般總是建議，Promise 物件后面要跟catch方法，這樣可以處理 Promise內部發生的錯誤，catch方法回傳的還是一個 Promise 物件，因此后面還可以接著呼叫then方法，

new Promise(() => {
    throw new Error('err1');
})
    .then(() => {console.log(1);})
    .then(() => {console.log(2);})
    .catch((err) => {
        console.log(err); //Err: err1
        throw  new Error('err2');
    })
    .catch((err) => {console.log(err);})//Err: err2

Promise物件的錯誤具有“冒泡”性質，會一直向后傳遞，直到被捕獲為止，也就是說，錯誤總是會被下一個catch陳述句捕獲， 即：當前catch方法可以捕獲上一個catch方法(包括上一個catch)到當前catch(不包括當前catch)方法之間所有的錯誤，如果沒有錯誤，則當前catch方法不執行，

// bad
new Promise()
    .then((data) => {/* success */ }, (err) => {/* error */ });

// good
new Promise()
    .then((data) => { /* success */ })
    .catch((err) => {/* error */ });

一般來說，不要在then方法里面定義Reject狀態的回呼函式（即then的第二個引數），總是使用catch方法，第二種寫法要好于第一種寫法，理由是第二種寫法可以捕獲前面then方法執行中的錯誤，也更接近同步的寫法，

vue里的export default

export命令用于規定模塊的對外介面，

一個模塊就是一個獨立的檔案，該檔案內部的所有變數，外部無法獲取，如果你希望外部能夠讀取模塊內部的某個變數，就必須使用export關鍵字輸出該變數，

// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

export {firstName, lastName, year};

export命令對外輸出了指定名字的變數（變數也可以是函式或類）

與export default命令的區別：import命令接受一對大括號，里面指定要從其他模塊匯入的變數名，大括號里面的變數名，必須與被匯入模塊（profile.js）對外介面的名稱相同，

export default命令，為模塊指定默認輸出，

與export命令的區別：其他模塊加載該模塊時，import命令可以為該匿名函式指定任意名字，

// export-default.js
export default function () {
  console.log('foo');
}

// import-default.js
import customName from './export-default';
customName(); // 'foo'

new VUE()

• 【Vue.config】 各種全域配置項

• 【Vue.util】 各種工具函式，還有一些兼容性的標志位

• 【Vue.set/delete】

• 【Vue.nextTick】

• 【Vue.options】 這個options和用來構造實體的options不一樣，這個是Vue默認提供的資源（組件指令過濾器），

• 【Vue.use】 通過initUse方法定義

• 【Vue.mixin】 通過initMixin方法定義

• 【Vue.extend】通過initExtend方法定義

  ?

new Vue({
  render: h => h(App),
}).$mount("#app")

render函式是vue通過js渲染dom結構的函式createElement，約定可以簡寫為h

實際縮寫前為：

render:function(createElement){
   return createElement(App);
}

實際渲染

import App from './App'
import Vue from 'vue'
new Vue({
  el:'#root',
  template:'<App></App>',
  components:{
    App
  }
})

在Vue建構式時，需要配置一個el屬性，如果沒有沒有el屬性時，可以使用.$mount('#app')進行掛載，

// 配置了el屬性：
new Vue({
    el:"#app",
    router
});

// 如果沒有配置el屬性，可以使用手動掛載$mount("#app")
new Vue({
    router
}).$mount('#app');

// 該方法是直接掛載到入口檔案index.html 的 id=app 的dom 元素上的

render:h=>h(App)

1、ES6的寫法，表示Vue實體選項物件的render方法作為一個函式，接受傳入的引數h函式，回傳h(App)的函式呼叫結果
2、Vue在創建Vue實體時，通過呼叫render方法來渲染實體的DOM樹
3、Vue在呼叫render方法時，會傳入一個createElement函式作為引數，也就是這里的h的實參是createElement函式，然后createElement會以App為引數進行呼叫，

Vue.use()的作用及原理

官方對 Vue.use() 方法的說明：通過全域方法 Vue.use() 使用插件，Vue.use 會自動阻止多次注冊相同插件，它需要在你呼叫 new Vue() 啟動應用之前完成，Vue.use() 方法至少傳入一個引數，該引數型別必須是 Object 或 Function，如果是 Object 那么這個 Object 需要定義一個 install 方法，如果是 Function 那么這個函式就被當做 install 方法，在 Vue.use() 執行時 install 會默認執行，當 install 執行時第一個引數就是 Vue，其他引數是 Vue.use() 執行時傳入的其他引數，就是說使用它之后呼叫的是該組件的install 方法，

Vue.use是用來安裝插件的，

它在使用時實際是呼叫了該插件的install方法，所以引入的當前插件如果含有install方法我們就需要使用Vue.use()，例如在Vue中參考Element如下：

import Vue from 'vue'
import Element from 'element-ui'
Vue.use(Element)

因為在Element原始碼中會暴露除install方法，所以才需要用Vue.use()引入，

例如：

vueRouter需要在install方法，對Vue實體做一些自定義化的操作：比如在vue.prototype中添加$router、$route屬性、注冊組件

而axios是基于Promise封裝的庫，是完全獨立于Vue的，根本不需要掛載在Vue上也能實作發送請求，

vue-router 為什么需要放到 new Vue({router}) options 里

插件通常用來為 Vue 添加全域功能，插件的功能范圍沒有嚴格的限制——一般有下面幾種：

添加全域方法或者屬性，如: vue-custom-element
添加全域資源：指令/過濾器/過渡等，如 vue-touch
通過全域混入來添加一些組件選項，如 vue-router
添加 Vue 實體方法，通過把它們添加到 Vue.prototype 上實作，
一個庫，提供自己的 API，同時提供上面提到的一個或多個功能，如 vue-router

使用插件也很簡單，通過全域方法 Vue.use() 使用插件，注意它的呼叫需要在 new Vue() 之前，

但是在使用 vue-router 插件時還需要增加一個 options ：

// 呼叫 `router.install(Vue)`
Vue.use(router)

new Vue({
  // ...組件選項
  router
})

hash 路由和 history 路由

1. hash 路由：監聽 url 中 hash 的變化，然后渲染不同的內容，這種路由不向服務器發送請求，不需要服務端的支持；
2. history 路由：監聽 url 中的路徑變化，需要客戶端和服務端共同的支持；

hash

—— 即地址欄 URL 中的 # 符號

比如這個 URL：http://www.aaa.com/#/hello，hash 的值為 #/hello，它的特點在于：hash 雖然出現在 URL 中，但不會被包括在 HTTP 請求中，對后端完全沒有影響，因此改變 hash 不會重新加載頁面，

history

—— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法，（需要特定瀏覽器支持）
這兩個方法應用于瀏覽器的歷史記錄堆疊，在當前已有的 back、forward、go 的基礎之上，它們提供了對歷史記錄進行修改的功能，只是當它們執行修改時，雖然改變了當前的 URL，但瀏覽器不會立即向后端發送請求，

Hash 模式是使用 URL 的 Hash 來模擬一個完整的 URL，因此當 URL 改變的時候頁面并不會多載，History 模式則會直接改變 URL，所以在路由跳轉的時候會丟失一些地址資訊，在重繪或直接訪問路由地址的時候會匹配不到靜態資源，因此需要在服務器上配置一些資訊，讓服務器增加一個覆寫所有情況的候選資源，比如跳轉 index.html 什么的

hash路由 優缺點

• 優點
  • 實作簡單，兼容性好（兼容到ie8）
  • 絕大多數前端框架均提供了給予hash的路由實作
  • 不需要服務器端進行任何設定和開發
  • 除了資源加載和ajax請求以外，不會發起其他請求
• 缺點
  • 對于部分需要重定向的操作，后端無法獲取hash部分內容，導致后臺無法取得url中的資料，
  • 服務器端無法準確跟蹤前端路由資訊
  • 對于需要錨點功能的需求會與目前路由機制沖突

History(browser)路由 優缺點

• 優點
  • 對于重定向程序中不會丟失url中的引數，后端可以拿到這部分資料
  • 絕大多數前段框架均提供了browser的路由實作
  • 后端可以準確跟蹤路由資訊
  • 可以使用history.state來獲取當前url對應的狀態資訊
• 缺點
  • 兼容性不如hash路由(只兼容到IE10)
  • 需要后端支持，每次回傳html檔案

$route和$router的區別

1.$router是VueRouter的一個物件，通過Vue.use(VueRouter)和Vue建構式得到一個router的實體物件，這個物件中是一個全域的物件，他包含了所有的路由，包含了許多關鍵的物件和屬性，

2.$route是一個跳轉的路由物件，每一個路由都會有一個$route物件，是一個區域的物件，可以獲取對應的name，path，params，query等

全域事件總線

全域事件總線說到底就是個物件，我們通常就是用vm物件作為全域事件總線使用
把vm物件添加到Vue原型物件 就形成全域事件總線（vm）

1、所有的組件物件必須都能看得到這個總線物件，因此我們把這個物件放在了Vue原型
2、這個事件總線物件必須能呼叫$on和$emit方法（總線物件必須是Vue的實體化物件或者是組件物件）

1、vm.$on( event, callback )

監聽當前實體上的自定義事件，事件可以由vm.$emit觸發，回呼函式會接收所有傳入事件觸發函式的額外引數，

2、vm.$emit( event, […args] )

觸發當前實體上的事件，附加引數都會傳給監聽器回呼，如果沒有引數，形式為vm.$emit(event)

3、vm.$off( [event, callback] )

移除自定義事件監聽器，

標籤：其他

上一篇：坐標系映射之(點擊圖片哪里去哪里)

下一篇：【JavaScript】JS引擎中執行背景關系如何順序執行代碼