Promise基本使用

Promise是異步編程的一種解決方案，用于一個異步操作的最終完成(或失敗)及其結(jié)果值的表示，比傳統(tǒng)的回調(diào)函數(shù)方案更加合理。

var promise = new Promise((resolve, reject) => {/* executor函數(shù) */

    // ... 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 可選

附加參數(shù)，一旦定時器到期，它們會作為參數(shù)傳遞給function

1. Promise對象在創(chuàng)建后立即執(zhí)行，then方法指定的回調(diào)函數(shù)，將在當前腳本所有同步任務(wù)執(zhí)行完才會執(zhí)行。
2. 如果調(diào)用resolve函數(shù)和reject函數(shù)時帶有參數(shù)，那么它們的參數(shù)會被傳遞給回調(diào)函數(shù)。reject函數(shù)的參數(shù)通常是Error對象的實例，表示拋出的錯誤；resolve函數(shù)的參數(shù)除了正常的值以外，還可能是另一個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內(nèi)部發(fā)生的錯誤。catch方法返回的還是一個 Promise 對象，因此后面還可以接著調(diào)用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對象的錯誤具有“冒泡”性質(zhì)，會一直向后傳遞，直到被捕獲為止。也就是說，錯誤總是會被下一個catch語句捕獲。 即：當前catch方法可以捕獲上一個catch方法(包括上一個catch)到當前catch(不包括當前catch)方法之間所有的錯誤，如果沒有錯誤，則當前catch方法不執(zhí)行。

// bad

new Promise()

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

// good

new Promise()

    .then((data) => { /* success */ })

    .catch((err) => {/* error */ });

一般來說，不要在then方法里面定義Reject狀態(tài)的回調(diào)函數(shù)（即then的第二個參數(shù)），總是使用catch方法。第二種寫法要好于第一種寫法，理由是第二種寫法可以捕獲前面then方法執(zhí)行中的錯誤，也更接近同步的寫法。

vue里的export default

export命令用于規(guī)定模塊的對外接口。

一個模塊就是一個獨立的文件。該文件內(nèi)部的所有變量，外部無法獲取。如果你希望外部能夠讀取模塊內(nèi)部的某個變量，就必須使用export關(guān)鍵字輸出該變量。

// profile.js

var firstName = 'Michael';

var lastName = 'Jackson';

var year = 1958;

export {firstName, lastName, year};

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

與export default命令的區(qū)別：import命令接受一對大括號，里面指定要從其他模塊導入的變量名。大括號里面的變量名，必須與被導入模塊（profile.js）對外接口的名稱相同。

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

與export命令的區(qū)別：其他模塊加載該模塊時，import命令可以為該匿名函數(shù)指定任意名字。

// 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】 各種工具函數(shù)，還有一些兼容性的標志位

• 【Vue.set/delete】

• 【Vue.nextTick】

• 【Vue.options】 這個options和用來構(gòu)造實例的options不一樣。這個是Vue默認提供的資源（組件指令過濾器）。

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

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

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

  ?

new Vue({

  render: h => h(App),

}).$mount("#app")

render函數(shù)是vue通過js渲染dom結(jié)構(gòu)的函數(shù)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構(gòu)造函數(shù)時，需要配置一個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方法作為一個函數(shù)，接受傳入的參數(shù)h函數(shù)，返回h(App)的函數(shù)調(diào)用結(jié)果

2、Vue在創(chuàng)建Vue實例時，通過調(diào)用render方法來渲染實例的DOM樹

3、Vue在調(diào)用render方法時，會傳入一個createElement函數(shù)作為參數(shù)，也就是這里的h的實參是createElement函數(shù)，然后createElement會以App為參數(shù)進行調(diào)用。

Vue.use()的作用及原理

官方對 Vue.use() 方法的說明：通過全局方法 Vue.use() 使用插件，Vue.use 會自動阻止多次注冊相同插件，它需要在你調(diào)用 new Vue() 啟動應(yīng)用之前完成，Vue.use() 方法至少傳入一個參數(shù)，該參數(shù)類型必須是 Object 或 Function，如果是 Object 那么這個 Object 需要定義一個 install 方法，如果是 Function 那么這個函數(shù)就被當做 install 方法。在 Vue.use() 執(zhí)行時 install 會默認執(zhí)行，當 install 執(zhí)行時第一個參數(shù)就是 Vue，其他參數(shù)是 Vue.use() 執(zhí)行時傳入的其他參數(shù)。就是說使用它之后調(diào)用的是該組件的install 方法。

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

它在使用時實際是調(diào)用了該插件的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上也能實現(xiàn)發(fā)送請求。

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

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

添加全局方法或者屬性。如: vue-custom-element

添加全局資源：指令/過濾器/過渡等。如 vue-touch

通過全局混入來添加一些組件選項。如 vue-router

添加 Vue 實例方法，通過把它們添加到 Vue.prototype 上實現(xiàn)。

一個庫，提供自己的 API，同時提供上面提到的一個或多個功能。如 vue-router

使用插件也很簡單，通過全局方法 Vue.use() 使用插件，注意它的調(diào)用需要在 new Vue() 之前。

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

// 調(diào)用 `router.install(Vue)`

Vue.use(router)

new Vue({

  // ...組件選項

  router

})

hash 路由和 history 路由

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

hash

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

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

history

—— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定瀏覽器支持）

這兩個方法應(yīng)用于瀏覽器的歷史記錄棧，在當前已有的 back、forward、go 的基礎(chǔ)之上，它們提供了對歷史記錄進行修改的功能。只是當它們執(zhí)行修改時，雖然改變了當前的 URL，但瀏覽器不會立即向后端發(fā)送請求。

Hash 模式是使用 URL 的 Hash 來模擬一個完整的 URL，因此當 URL 改變的時候頁面并不會重載。History 模式則會直接改變 URL，所以在路由跳轉(zhuǎn)的時候會丟失一些地址信息，在刷新或直接訪問路由地址的時候會匹配不到靜態(tài)資源。因此需要在服務(wù)器上配置一些信息，讓服務(wù)器增加一個覆蓋所有情況的候選資源，比如跳轉(zhuǎn) index.html 什么的

hash路由 優(yōu)缺點

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

History(browser)路由 優(yōu)缺點

• 優(yōu)點
  • 對于重定向過程中不會丟失url中的參數(shù)。后端可以拿到這部分數(shù)據(jù)
  • 絕大多數(shù)前段框架均提供了browser的路由實現(xiàn)
  • 后端可以準確跟蹤路由信息
  • 可以使用history.state來獲取當前url對應(yīng)的狀態(tài)信息
• 缺點
  • 兼容性不如hash路由(只兼容到IE10)
  • 需要后端支持，每次返回html文檔

$route和$router的區(qū)別

1.$router是VueRouter的一個對象，通過Vue.use(VueRouter)和Vue構(gòu)造函數(shù)得到一個router的實例對象，這個對象中是一個全局的對象，他包含了所有的路由，包含了許多關(guān)鍵的對象和屬性。

2.$route是一個跳轉(zhuǎn)的路由對象，每一個路由都會有一個$route對象，是一個局部的對象，可以獲取對應(yīng)的name，path，params，query等

全局事件總線

全局事件總線說到底就是個對象，我們通常就是用vm對象作為全局事件總線使用

把vm對象添加到Vue原型對象 就形成全局事件總線（vm）

1、所有的組件對象必須都能看得到這個總線對象，因此我們把這個對象放在了Vue原型

2、這個事件總線對象必須能調(diào)用$on和$emit方法（總線對象必須是Vue的實例化對象或者是組件對象）

1、vm.$on( event, callback )

監(jiān)聽當前實例上的自定義事件。事件可以由vm.$emit觸發(fā)。回調(diào)函數(shù)會接收所有傳入事件觸發(fā)函數(shù)的額外參數(shù)。

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

觸發(fā)當前實例上的事件。附加參數(shù)都會傳給監(jiān)聽器回調(diào)，如果沒有參數(shù)，形式為vm.$emit(event)

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

移除自定義事件監(jiān)聽器。

總結(jié)

以上是生活随笔為你收集整理的Vue相关笔记的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。