Angular服務(wù)Request異步請求的實(shí)例講解

首先這里我簡單寫個例子來方便您的理解

創(chuàng)新互聯(lián)專注于前鋒網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供前鋒營銷型網(wǎng)站建設(shè)，前鋒網(wǎng)站制作、前鋒網(wǎng)頁設(shè)計(jì)、前鋒網(wǎng)站官網(wǎng)定制、微信小程序定制開發(fā)服務(wù)，打造前鋒網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供前鋒網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

var request = {
  post: function() {
    var errorCallback = {
      error: function(f) {
        this.fun = f;
      },
      fun: function(data) {}
    };
    successCallback = {
      success: function(f) {
        return this.fun = f, console.log(this.fun), errorCallback;
      },
      fun: function(data) {
        console.log(data)
      }
    };
    returnData = {
      wsscat: "hello"
    };
    //成功
    //var a = successCallback.fun(returnData);
    a = successCallback.fun;
    setTimeout('a(returnData)', 1000)
    return successCallback;
    }
    }
    request.post().success(function(data) {
      console.log("123");
      console.log(data);
    })
    console.log("wscat's test");

這里首先要理解一點(diǎn)很重要的就是異步回調(diào)，Javascript的異步回調(diào)其實(shí)就兩個常用方法，

setTimeout定時這類和ajax請求這類

上面代碼跟angular的request服務(wù)類似，首先是這個request對象，就相當(dāng)于angular注入request服務(wù)之后返回的request對象

這個對象寫了一個post方法，而post方法里面這有兩個回調(diào)對象分別是

errorCallback和successCallback

還有一個模擬ajax請求返回的returnData對象

returnData = {
      wsscat: "hello"
    };

這個在angular里面則是ajax請求服務(wù)器返回給你的json對象

我們看看這段代碼執(zhí)行之后會log出什么的信息，如下圖

Angular服務(wù)Request異步請求的實(shí)例講解

如果熟悉Javascript的話這里不難理解，首先是輸出的函數(shù)信息是因?yàn)閟uccess()函數(shù)里面的console.log(this.fun)這句

request.post().success()

success()里面首先this.fun = f這句是，把匿名的回調(diào)函數(shù)賦給successCallback對象里面的fun方法，保存起來讓后面setTimeout進(jìn)行回調(diào)

所以我們可以看到首先執(zhí)行出來的是打印出來的回調(diào)函數(shù)，然后就是代碼最后一句的

console.log("wscat's test");

明白了上述這個流程之后就可以很好的理解angular封裝的request服務(wù)這一塊

只不過angular里面的回調(diào)不是setTimeout回調(diào)，而是換成了$http回調(diào)而已

$http.get(url).success(function(data, status, headers, config) {
//code
})

而$http請求又因?yàn)楦鶕?jù)返回的成功或者失敗把數(shù)據(jù)

用相應(yīng)的方法帶到我們放到了被匿名回調(diào)函數(shù)覆蓋，對象successCallback的fun里面

而帶數(shù)據(jù)到fun里面就是下面這兩句

successCallback.fun(returnData); 
errorCallback.fun(returnData);

后面我再深入說一下

$http.get(url).success(function(data, status, headers, config) {
//code
})

data：這個不用再多敘述了，我們上面做了這么多其實(shí)就是想拿服務(wù)器返回給我們的data

status：http響應(yīng)狀態(tài)碼，這個是很基礎(chǔ)的東西，但我還是簡單說說

200：不用懷疑就是請求成功的意思

304：就是你請求已經(jīng)被允許的情況下，服務(wù)器發(fā)現(xiàn)你需要的東西還是跟之前一樣沒變，則返回給你304

404：請求失敗了，請求的資源再服務(wù)器沒有發(fā)現(xiàn)

500：看到5一般就是服務(wù)器出錯了

?？吹降木瓦@幾個吧

header：頭信息

config：生成原始請求的設(shè)置對象，如下圖

Angular服務(wù)Request異步請求的實(shí)例講解

再往下看，其實(shí)post請求和get請求區(qū)別是不大的

只是這里get更簡單明了，你直接傳url過來就行了，相比post請求接口還要帶上各種需要請求的參數(shù)

但再仔細(xì)了解的話，其實(shí)post跟get在這里其實(shí)都走get請求

Angular服務(wù)Request異步請求的實(shí)例講解

Request服務(wù)源碼

.service('Request', [
  '$http',
  '$cookies',
  '$rootScope',
  '$window',
  '$cookieStore',
  '$location',
  function($http, $cookies, $rootScope, $window, $cookieStore, $location) {
    var request = {
      post: function(api, map, successCallback) {
        $rootScope.dataLoadCount++;
        $rootScope.isLoading = $rootScope.dataLoadCount != 0;
        var url = '../test.php?api=' + encodeURIComponent(api);
        //console.log('[http requestURL]:' + api);
        //~ alert(api);
        var json = '{}';
        if (angular.isDefined(map)) {
          json = angular.toJson(map);
        }

        //console.log('[http requestJson]:' + json);
        url += '&data=' + encodeURIComponent(json);
        var errorCallback = {
          error: function(f) {
            this.fun = f;
          },
          fun: function(data) {}
        };
        var successCallback = {
          success: function(f) {
            return this.fun = f, errorCallback;
          },
          fun: function(data) {}
        };
        $http.get(url).success(function(data, status, headers, config) {
          console.log(config);
          // this callback will be called asynchronously
          // when the response is available
          $rootScope.dataLoadCount--;
          $rootScope.isLoading = $rootScope.dataLoadCount != 0;

          //console.log('[http success responseData]:' + angular.toJson(data));
          //~ alert('[http success responseData]:'+angular.toJson(data));
          var returnData = {
            code: data.state.code,
            msg: data.state.msg,
            data: data.data
          };
          if (returnData.code == 1) {
            successCallback.fun(returnData);
          } else {
            if (returnData.code == 99) {
              alert(returnData.msg);
              $cookieStore.remove('token');
              $cookieStore.remove('userid');
              delete $cookies.token;
              delete $cookies.userid;
              $rootScope.isLogined = false;
              $rootScope.$broadcast('refreshFooter');
              switch ($rootScope.isWeiXinLogin()) {
                case true:
                  $location.path('login');
                  break;
                case false:
                  $location.path('loginWebapp');
                  break;
              }

              return;
            }
            errorCallback.fun(returnData);
          }
        }).
        error(function(data, status, headers, config) {
          // called asynchronously if an error occurs
          // or server returns response with an error status.
          $rootScope.dataLoadCount--;
          $rootScope.isLoading = $rootScope.dataLoadCount != 0;

          //console.log('[http error responseData]:' + angular.toJson(data));
          //~ alert('[http error responseData]:status:'+status);
          var returnData = {
            code: 0,
            msg: '網(wǎng)絡(luò)請求失敗',
            data: {}
          };
          errorCallback.fun(returnData);
        });

        return successCallback;
      },
      get: function(url, successCallback) {
        $rootScope.dataLoadCount++;
        $rootScope.isLoading = $rootScope.dataLoadCount != 0;
        var errorCallback = {
          error: function(f) {
            this.fun = f;
          },
          fun: function(data) {}
        };
        var successCallback = {
          success: function(f) {
            return this.fun = f, errorCallback;
          },
          fun: function(data) {}
        };
        $http({
          method: 'GET',
          url: url
        }).success(function(data, status, headers, config) {
          // this callback will be called asynchronously
          // when the response is available
          $rootScope.dataLoadCount--;
          $rootScope.isLoading = $rootScope.dataLoadCount != 0;

          //console.log('[http success responseData]:' + data);
          var returnData = {
            code: 1,
            msg: '請求成功',
            data: data
          };
          successCallback.fun(data);
        }).
        error(function(data, status, headers, config) {
          // called asynchronously if an error occurs
          // or server returns response with an error status.
          $rootScope.dataLoadCount--;
          $rootScope.isLoading = $rootScope.dataLoadCount != 0;
          //console.log('[http error responseData]:' + angular.toJson(data));
          var returnData = {
            code: 0,
            msg: '網(wǎng)絡(luò)請求失敗',
            data: ""
          };
          errorCallback.fun(returnData);
        });
        return successCallback;
      }
    }
    return request;
  }
])

以上這篇Angular服務(wù)Request異步請求的實(shí)例講解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持創(chuàng)新互聯(lián)。

分享文章：Angular服務(wù)Request異步請求的實(shí)例講解
分享網(wǎng)址：http://muchs.cn/article4/iiojie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、建站公司、品牌網(wǎng)站設(shè)計(jì)、外貿(mào)建站、網(wǎng)站內(nèi)鏈、云服務(wù)器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

微信小程序開發(fā)