angular中的$q.defer()服務非同步處理

来源:http://www.cnblogs.com/puyongsong/archive/2016/10/28/6009041.html
-Advertisement-
Play Games

jquery和angular都有defer服務，我暫以angular為例談談我的理解，最後並附上jquery的阮一峰總結的defer。 以我目前項目的部分代碼為例說明為什麼要用deferred。 就這段代碼，我想要在位置二處使用base64，然後結果呢？ 兩處位置都列印了，位置一得到base64，o ...


　　jquery和angular都有defer服務，我暫以angular為例談談我的理解，最後並附上jquery的阮一峰總結的defer。

　　以我目前項目的部分代碼為例說明為什麼要用deferred。

function getBase64(img){//傳入圖片路徑，返回base64
           function getBase64Image(img,width,height) {
               var canvas = document.createElement("canvas");
               canvas.width = width ? width : img.width;
               canvas.height = height ? height : img.height;

               var ctx = canvas.getContext("2d");
               ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
               var dataURL = canvas.toDataURL();
               return dataURL;
           }
           var image = new Image();
           image.crossOrigin = '';
           image.src = img;

           var base64='';
           if(img){
               image.onload =function (){
                   base64=getBase64Image(image);
                   console.log(base64);//位置一
               }
               console.log(base64);//位置二
           }
       }

　　就這段代碼，我想要在位置二處使用base64，然後結果呢？

　　兩處位置都列印了，位置一得到base64，ok，沒問題。當我在位置二想使用base64時，問題來了？onload隊列的問題，位置二總是無法正確的獲取到想要的base64，這個時候就可以考慮非同步問題了。

　　我相信大家應該和我一樣，遇到這種情況第一反應應該是deferred讓函數非同步執行。

　　那麼，我講以上代碼使用deferred之後，問題完美解決！

function getBase64(img){//傳入圖片路徑，返回base64
                function getBase64Image(img,width,height) {
                  var canvas = document.createElement("canvas");
                  canvas.width = width ? width : img.width;
                  canvas.height = height ? height : img.height;
                  var ctx = canvas.getContext("2d");
                  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                  var dataURL = canvas.toDataURL();
                  return dataURL;
                }
                var image = new Image();
                image.crossOrigin = '';
                image.src = img;

                var deferred=$q.defer();
                if(img){
                  image.onload =function (){
                    deferred.resolve(getBase64Image(image));
                  }
                  return deferred.promise;
                }
              }

getBase64('https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg')
               .then(function(base64){
                   var binaryblob = function (s, type) {//blob對象
                       var byteString = atob(s);
                       var array = [];
                       for (var i = 0; i < byteString.length; i++) {
                           array.push(byteString.charCodeAt(i));
                       }
                       return  new Blob([new Int8Array(array)], {type: type});
                   };
                   var binaryPictureBlob = function (dataUrl, filterHead) {//上傳base64去頭
                       var s = filterHead ? dataUrl.replace(/^data:image\/(png|jpeg|pjpeg|bmp|gif|x-png);base64,/, "") : dataUrl;
                       return binaryblob(s, "image/jpeg");
                   };
                   var pic=binaryPictureBlob(base64,true);//blob對象
                   //然後調介面將blob對象上傳
               });

這裡有上傳功能我以前的博客有介紹，可以點擊這裡去看看，給點建議！

　　問題解決了，我又想到了分享！那麼我將我的拙見寫出來，請不吝賜教！

　　什麼是defer？

  • $q是Angular的一種內置服務，它可以使你非同步地執行函數，並且當函數執行完成時或異常時它允許你使用函數的返回值或返回執行狀態通知等。
  • defer的意思是延遲，$q.defer() 可以創建一個deferred延遲對象實例，實例旨在暴露派生的Promise 實例，Promise就是一種對執行結果不確定的一種預先定義，如果成功，就xx；如果失敗，就xx，就像事先給出了一些承諾。

　　用法：

一個最完整的寫法：

var defer1 = $q.defer();

       function fun() {
           var deferred = $q.defer();
           $timeout(function () {
               deferred.notify("notify");
               if (iWantResolve) {
                   deferred.resolve("resolved");
               } else {
                   deferred.reject("reject");
               }
           }, 500);
           return deferred.promise;
       }

       $q.when(fun())
               .then(function(success){
                   console.log("success");
                   console.log(success);
               },function(err){
                   console.log("error");
                   console.log(err);
               },function(notify){
                   console.log("notify");
                   console.log(notify);
               })
               .catch(function(reson){
                   console.log("catch");
                   console.log(reson);
               })
               .finally(function(final){
                   console.log('finally');
                   console.log(final);
               });
1、通過$q服務註冊一個延遲對象
var deferred=$q.defer();

  2、成功解決(resolve)了其派生的promise。參數value將來會被用作successCallback(success){}函數的參數value。

 deferred.resolve(success)

 3、未成功解決其派生的promise。參數reason被用來說明未成功的原因。此時deferred實例的promise對象將會捕獲一個任務未成功執行的錯誤，promise.catch(errorCallback(reason){...})。

 deferred.reject(reason)

 4、更新promise的執行狀態通知

deferred.notify("notify");

5、對promise進行處理

 $q.when(fun())
               .then(function(success){
                   console.log("success");
                   console.log(success);
               },function(err){
                   console.log("error");
                   console.log(err);
               },function(notify){
                   console.log("notify");
                   console.log(notify);
               })
               .catch(function(reson){
                   console.log("catch");
                   console.log(reson);
               })
               .finally(function(final){
                   console.log('finally');
                   console.log(final);
               });

這裡一般簡寫為：

fun().then(successCallback, errorCallback, notifyCallback);

註：

　　deferred的方法中的參數都返回給了promise與callback的參數都是一一對應的，如：

　　deferred.resolve(success)的success對應successCallback(success)的success。

這裡在探討下暫時很少用的$q.all().

　　$q.all()在多個promise必須執行成功後才能執行成功回調，傳遞值為數組或哈希值，數組中每個值為與Index對應的promise對象。

　　這個方法可以將每個promise里的某些重覆代碼或者判斷，只需要在$q.all()的回調處理一次即可，簡化了代碼與工作量。

　　寫法為：

var iWantResolve = true;//沒有實際意思，測試運行resolve或reject

       function promise1() {
           return $q(function (resolve, reject) {
               $timeout(function () {
                   if (iWantResolve) {
                       resolve("promise1 resolved");
                   } else {
                       reject("promise1 reject");
                   }
               }, 1000)
           })
       }
       promise1()
               .then(function (s1) {//success callback
                   console.log(s1);
               })
               .catch(function (err1) {//error callback
                   console.log(err1);
               });

       function promise2() {
           var deferred = $q.defer();
           $timeout(function () {
               deferred.notify("promise2 notify");
               if (iWantResolve) {
                   deferred.resolve("promise2 resolved");
               } else {
                   deferred.reject("promise2 reject");
               }
           }, 500);
           return deferred.promise;
       }

       promise2()
               .then(function (s2) {
                   console.log(s2);
               }, function (err2) {
                   console.log(err2);
               });

       $q.all([promise1(), promise2()])
               .then(function (dataArr) {
                   //promise都成功執行後的回調函數
                   console.log("$q.all: ", dataArr);
               }, function (err) {
                   console.log("$q.all: ", err)
               });

　　像這個例子，每個promise回調都列印了返回值，那麼可以用$q.all()處理在其回調列印dataArr，則包含了所有promise返回值！

最後附上所有代碼：

View Code

　　結語：

   jquery和angular的deferred用法大致相同，但有兩處要註意的地方：

　　jquery:

defer=$.Deferred();
defer.promise();

　　angular:

var deferred=$q.defer();
deferred.promise;

　　以上便是我對angular的$q、deferred、promise的一些淺顯的理解，望各位大神多多評論、指教……

最後附上:

jquery中文網的deferred介紹：

http://www.jquery123.com/category/deferred-object/

一位大神對jquery的deferred的總結！

阮一峰：http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Struts2入門(三)——數據類型轉換
    一、前言 筆者一直覺得，學習一個知識點，你首先要明白，這東西是什麼？有什麼用？這樣你才能瞭解。好了，不說廢話。 1.1、類型轉換為何存在？什麼是類型轉換？ 在MVC框架中，都是屬於表示層解決方案，都需要負責收集用戶請求的參數，並且將請求參數傳給應用的控制器組件，但是，這裡有一個問題，客戶端提交的請求 ...
  • Sublime插件支持Sass編譯和Babel解析ES6 & .sublime-build文件初探
    用Sublime Text蠻久了，配置配來配去的，每次換電腦都得重頭再配過，奈何人老了腦子不中用了，得好好整理一些，下次換電腦就有得參考了.. 同事說，他的WebStorm簡直太方便，自身集成了很多方便的工具，不用配置太多 哈哈哈哈但我還是更喜歡用ST 如果要將Sass編譯成css文件，安裝相應的編 ...
  • 用C#從資料庫動態生成AdminLTE菜單的一種方法
    當前的應用設計風格趨於Flat扁平化，很多基於BootStrap實現了很多UI非常漂亮的管理界面(Bootstrap admin template)。 此核心文件開源在Github:https://github.com/JackWangCUMT/AdminLTE-Menu-Generate。首先看一 ...
  • AngularJS 簡易物件修改入門
    各位好，今天要來介紹如何簡單的修改網站上AngularJS相關Application的內容 進而做到某些效果。(警告！所有的Web Application都應該在後端加上相關驗證) 透過本篇你可以簡單的瞭解到以下 1.如何查找相關的ng物件 2.如何利用ng.element與ng.injector來 ...
  • 用JS實現，圖片放大和縮小
    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> img { margin: 100px 0px 0px 500px; } #div2 { margin-left: ...
  • 自定義右鍵菜單
    自定義右鍵菜單 技術一般水平有限，有什麼錯的地方，望大家指正。 自定義右鍵菜單，對於一些ERP系統，功能操作比較多，所以我們通常把常用的幾個功能放在自定義的右鍵菜單里方便用戶使用。 實現自定義菜單很簡單，首先我們要屏蔽原始的右鍵菜單，自定義菜單出現在滑鼠的位置，點擊隱藏自定義菜單，過程就是這樣的。 ...
  • javascript常用代碼(不完整版)
    Javascript嵌入式 <script typt:javascript>代碼</script> 註釋 //或者/*內容*/ 變數名賦值 Var 變數名 = 值 輸出方式 Document.write(變數名) window.alert(變數名) 算數運算符 a++;a-- 賦值運算符 字元串運算 ...
  • javascript對象
    1、什麼是表單對象 表單（<form>）是Web頁面中的基本元素。表單對象最主要的功能就是能夠直接訪問頁面中的表單。利用表單對象，可以實現與用戶的交互；不需要伺服器的介入，就可以實現動態改變Web頁面的行為。對於Web頁面表單，通常使用document對象的forms數組可以很方便地訪問不同的表單。 ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類