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，然后結(jié)果呢？

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

我相信大家應(yīng)該和我一樣，遇到這種情況第一反應(yīng)應(yīng)該是deferred讓函數(shù)異步執(zhí)行。

那么，我講以上代碼使用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對象
     //然后調(diào)接口將blob對象上傳
    });

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

什么是defer？

$q是Angular的一種內(nèi)置服務(wù)，它可以使你異步地執(zhí)行函數(shù)，并且當(dāng)函數(shù)執(zhí)行完成時或異常時它允許你使用函數(shù)的返回值或返回執(zhí)行狀態(tài)通知等。

defer的意思是延遲，$q.defer() 可以創(chuàng)建一個deferred延遲對象實例，實例旨在暴露派生的Promise 實例，Promise就是一種對執(zhí)行結(jié)果不確定的一種預(yù)先定義，如果成功，就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服務(wù)注冊一個延遲對象

var deferred=$q.defer();

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

 deferred.resolve(success)

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

 deferred.reject(reason)

4、更新promise的執(zhí)行狀態(tài)通知

deferred.notify("notify");

5、對promise進(jìn)行處理

 $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的方法中的參數(shù)都返回給了promise與callback的參數(shù)都是一一對應(yīng)的，如：

　　deferred.resolve(success)的success對應(yīng)successCallback(success)的success。

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

$q.all()在多個promise必須執(zhí)行成功后才能執(zhí)行成功回調(diào)，傳遞值為數(shù)組或哈希值，數(shù)組中每個值為與Index對應(yīng)的promise對象。

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

寫法為：

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都成功執(zhí)行后的回調(diào)函數(shù)
     console.log("$q.all: ", dataArr);
    }, function (err) {
     console.log("$q.all: ", err)
    });

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

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

jquery:

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

angular:

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

總結(jié)

以上便是我對angular的$q、deferred、promise的一些淺顯的理解，希望對大家的學(xué)習(xí)或者能有所幫助，如果有疑問大家可以留言交流。望各位大神多多評論、指教……

最后附上:

jquery中文網(wǎng)的deferred介紹：

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

一位大神對jquery的deferred的總結(jié)！

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

您可能感興趣的文章:

相關(guān)文章

AngularJS實現(xiàn)的自定義過濾器簡單示例
這篇文章主要介紹了AngularJS實現(xiàn)的自定義過濾器,結(jié)合實例形式分析了AngularJS自定義過濾器的簡單定義與使用操作技巧,需要的朋友可以參考下
2019-02-02
本文通過實例給大家介紹了angular排序的相關(guān)知識，非常不錯，具有參考借鑒價值，需要的朋友參考下吧
2017-06-06

AngularJS實現(xiàn)動態(tài)切換樣式的方法分析

這篇文章主要介紹了AngularJS實現(xiàn)動態(tài)切換樣式的方法,結(jié)合實例形式分析了AngularJS事件響應(yīng)與樣式動態(tài)控制相關(guān)操作技巧,需要的朋友可以參考下

2018-06-06

簡單實現(xiàn)AngularJS輪播圖效果

這篇文章主要教大家如何簡單實現(xiàn)AngularJS輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

2017-02-02

AngularJS中的DOM操作用法分析

這篇文章主要介紹了AngularJS中的DOM操作,較為詳細(xì)的分析了AngularJS針對DOM操作的原理、實現(xiàn)技巧與相關(guān)注意事項,需要的朋友可以參考下

2016-11-11

淺談Angular 的變化檢測的方法

這篇文章主要介紹了淺談Angular 的變化檢測的方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

2018-03-03

使用AngularJS制作一個簡單的RSS閱讀器的教程

這篇文章主要介紹了使用Angular.js制作一個簡單的RSS閱讀器的教程,AngularJS是一個非常有人氣的JavaScript庫,文中介紹的制作方法主要使用到了FreedReadR模版,需要的朋友可以參考下

2015-06-06

淺談angularJS 作用域

這篇文章主要介紹了淺談angularJS 作用域的相關(guān)資料,需要的朋友可以參考下

2015-07-07

AngularJS實現(xiàn)在ng-Options加上index的解決方法

這篇文章主要介紹了AngularJS實現(xiàn)在ng-Options加上index的解決方法,結(jié)合實例形式分析了AngularJS在ngOptions添加索引的操作步驟與相關(guān)實現(xiàn)技巧,需要的朋友可以參考下

2016-11-11

AngularJS控制器繼承自另一控制器

本文給大家介紹AngularJS控制器繼承自另一控制器的相關(guān)內(nèi)容，小編認(rèn)為介紹的非常不錯，具有參考借鑒價值，感興趣的朋友參考下吧

2016-05-05

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線工具

數(shù)據(jù)庫

CMS

常用工具

詳解Angular.js的$q.defer()服務(wù)異步處理

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具