国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前后分離模型之封裝 Api 調用

trilever / 1767人閱讀

摘要:和異步處理調用訪問數據采用的方式,這是一個異步過程,異步過程最基本的處理方式是事件或回調,其實這兩種處理方式實現原理差不多,都需要在調用異步過程的時候傳入一個在異步過程結束的時候調用的接口。

Ajax 和異步處理

調用 API 訪問數據采用的 Ajax 方式,這是一個異步過程,異步過程最基本的處理方式是事件或回調,其實這兩種處理方式實現原理差不多,都需要在調用異步過程的時候傳入一個在異步過程結束的時候調用的接口。比如 jQuery Ajax 的 success 就是典型的回調參數。不過使用 jQuery 處理異步推薦使用 Promise 處理方式。

Promise 處理方式也是通過注冊回調函數來完成的。jQuery 的 Promise 和 ES6 的標準 Promise 有點不一樣,但在 then 上可以兼容,通常稱為 thenable。jQuery 的 Promise 沒有提供 .catch() 接口,但它自己定義的 .done().fail().always() 三個注冊回調的方式也很有特色,用起來很方便,它是在事件的方式來注冊的(即,可以注冊多個同類型的處理函數,在該觸發的時候都會觸發)。

當然更直觀的一點的處理方式是使用 ES2017 帶來的 async/await 方式,可以用同步代碼的形式來寫異步代碼,當然也有一些坑在里面。對于前端工程師來說,最大的坑就是有些瀏覽器不支持,需要進行轉譯,所以如果前端代碼沒有構建過程,一般還是就用 ES5 的語法兼容性好一些(jQuery 的 Promise 是支持 ES5 的,但是標準 Promise 要 ES6 以后才可以使用)。

關于 JavaScript 異步處理相關的內容可以參考

從小小題目逐步走進 JavaScript 異步調用

閑談異步調用“扁平”化

從地獄到天堂,Node 回調向 async/await 轉變

理解 JavaScript 的 async/await

從不用 try-catch 實現的 async/await 語法說錯誤處理

自己封裝工具函數

在處理 Ajax 的過程中,雖然有現成的庫(比如 jQuery.ajax,axios 等),它畢竟是為了通用目的設計的,在使用的時候仍然不免繁瑣。而在項目中,對 Api 進行調用的過程幾乎都大同小異。如果設計得當,就連錯誤處理的方式都會是一樣的。因此,在項目內的 Ajax 調用其實可以進行進一步的封裝,使之在項目內使用起來更方便。如果接口方式發生變化,修改起來也更容易。

比如,當前接口要求使用 POST 方法調用(暫不考慮 RESTful),參數必須包括 action,返回的數據以 JSON 方式提供,如果出錯,只要不是服務器異常都會返回特定的 JSON 數據,包括一個不等于 0 的 code 和可選的 message 屬性。

那么用 jQuery 寫這么一個 Ajax 調用,大概是這樣

</>復制代碼

  1. const apiUrl = "http://api.some.com/";
  2. jQuery
  3. .ajax(url, {
  4. type: "post",
  5. dataType: "json",
  6. data: {
  7. action: "login",
  8. username: "uname",
  9. password: "passwd"
  10. }
  11. })
  12. .done(function(data) {
  13. if (data.code) {
  14. alert(data.message || "登錄失敗!");
  15. } else {
  16. window.location.assign("home");
  17. }
  18. })
  19. .fail(function() {
  20. alert("服務器錯誤");
  21. });
初步封裝

同一項目中,這樣的 Ajax 調用,基本上只有 data 部分和 .done 回調中的 else 部分不同,所以進行一次封裝會大大減少代碼量,可以這樣封裝

</>復制代碼

  1. function appAjax(action, params) {
  2. var deffered = $.Deferred();
  3. jQuery
  4. .ajax(apiUrl, {
  5. type: "post",
  6. dataType: "json",
  7. data: $.extend({
  8. action: action
  9. }, params)
  10. })
  11. .done(function(data) {
  12. // 當 code 為 0 或省略時,表示沒有錯誤,
  13. // 其它值表示錯誤代碼
  14. if (data.code) {
  15. if (data.message) {
  16. // 如果服務器返回了消息,那么向用戶呈現消息
  17. // resolve(null),表示不需要后續進行業務處理
  18. alert(data.message);
  19. deffered.resolve();
  20. } else {
  21. // 如果服務器沒返回消息,那么把 data 丟給外面的業務處理
  22. deferred.reject(data);
  23. }
  24. } else {
  25. // 正常返回數據的情況
  26. deffered.resolve(data);
  27. }
  28. })
  29. .fail(function() {
  30. // Ajax 調用失敗,向用戶呈現消息,同時不需要進行后續的業務處理
  31. alert("服務器錯誤");
  32. deffered.resolve();
  33. });
  34. return deferred.promise();
  35. }

而業務層的調用就很簡單了

</>復制代碼

  1. appAjax("login", {
  2. username: "uname",
  3. password: "passwd"
  4. }).done(function(data) {
  5. if (data) {
  6. window.location.assign("home");
  7. }
  8. }).fail(function() {
  9. alert("登錄失敗");
  10. });
更換 API 調用接口

上面的封裝對調用接口和返回數據進行了統一處理,把大部分項目接口約定的內容都處理掉了,剩下在每次調用時需要處理的就是純粹的業務。

現在項目組決定不用 jQuery 的 Ajax,而是采用 axios 來調用 API(axios 不見得就比 jQuery 好,這里只是舉例),那么只需要修改一下 appAjax() 的實現即可。所有業務調用都不需要修改。

假設現在的目標環境仍然是 ES5,那么需要第三方 Promise 提供,這里擬用 Bluebird,兼容原生 Promise 接口(在 HTML 中引入,未直接出現在 JS 代碼中)。

</>復制代碼

  1. function appAjax(action, params) {
  2. var deffered = $.Deferred();
  3. axios
  4. .post(apiUrl, {
  5. data: $.extend({
  6. action: action
  7. }, params)
  8. })
  9. .then(function(data) { ... }, function() { ... });
  10. return deferred.promise();
  11. }

這次的封裝采用了 axios 來實現 Web Api 調用。但是為了保持原來的接口(jQuery Promise 對象有提供 .done().fail().always() 事件處理),appAjax 仍然不得不返回 jQuery Promise。這樣,即使所有地方都不再需要使用 jQuery,這里仍然得用。

</>復制代碼

  1. 項目中應該用還是不用 jQuery?請閱讀為什么要用原生 JavaScript 代替 jQuery?

去除 jQuery

就只在這里使用 jQuery 總讓人感覺如芒在背,想把它去掉。有兩個辦法

修改所有業務中的調用,去掉 .done().fail().always(),改成 .then()。這一步工作量較大,但基本無痛,因為 jQuery Promise 本身支持 .then()。但是有一點需要特別注意,這一點稍后說明

自己寫個適配器,兼容 jQuery Promise 的接口,工作量也不小,但關鍵是要充分測試,避免差錯。

上面提到第 1 種方法中有一點需要特別注意,那就是 .then().done() 系列函數在處理方式上有所不同。.then() 是按 Promise 的特性設計的,它返回的是另一個 Promise 對象;而 .done() 系列函數是按事件機制實現的,返回的是原來的 Promise 對象。所以像下面這樣的代碼在修改時就要注意了

</>復制代碼

  1. appAjax(url, params)
  2. .done(function(data) { console.log("第 1 處處理", data) })
  3. .done(function(data) { console.log("第 2 處處理", data) });
  4. // 第 1 處處理 {}
  5. // 第 2 處處理 {}

簡單的把 .done() 改成 .then() 之后(注意不需要使用 Bluebird,因為 jQuery Promise 支持 .then()

</>復制代碼

  1. appAjax(url, params)
  2. .then(function(data) { console.log("第 1 處處理", data); })
  3. .then(function(data) { console.log("第 2 處處理", data); });
  4. // 第 1 處處理 {}
  5. //2 處處理 undefined

原因上面已經講了,這里正確的處理方式是合并多個 done 的代碼,或者在 .then() 處理函數中返回 data

</>復制代碼

  1. appAjax(url, params)
  2. .then(function(data) {
  3. console.log("第 1 處處理", data);
  4. return data;
  5. })
  6. .then(function(data) {
  7. console.log("第 2 處處理", data);
  8. });
使用 Promise 接口改善設計

我們的 appAjax() 接口部分也可以設計成 Promise 實現,這是一個更通用的接口。既使用不用 ES2015+ 特性,也可以使用像 jQuery Promise 或 Bluebird 這樣的三方庫提供的 Promise。

</>復制代碼

  1. function appAjax(action, params) {
  2. // axios 依賴于 Promise,ES5 中可以使用 Bluebird 提供的 Promise
  3. return axios
  4. .post(apiUrl, {
  5. data: $.extend({
  6. action: action
  7. }, params)
  8. })
  9. .then(function(data) {
  10. // 這里調整了判斷順序,會讓代碼看起來更簡潔
  11. if (!data.code) { return data; }
  12. if (!data.message) { throw data; }
  13. alert(data.message);
  14. }, function() {
  15. alert("服務器錯誤");
  16. });
  17. }

不過現在前端有構建工具,可以使用 ES2015+ 配置 Babel,也可以使用 TypeScript …… 總之,選擇很多,寫起來也很方便。那么在設計的時候就不用局限于 ES5 所支持的內容了。所以可以考慮用 Promise + async/await 來實現

</>復制代碼

  1. async function appAjax(action, params) {
  2. // axios 依賴于 Promise,ES5 中可以使用 Bluebird 提供的 Promise
  3. const data = await axios
  4. .post(apiUrl, {
  5. data: $.extend({
  6. action: action
  7. }, params)
  8. })
  9. // 這里模擬一個包含錯誤消息的結果,以便后面統一處理錯誤
  10. // 這樣就不需要用 try ... catch
  11. .catch(() => ({ code: -1, message: "服務器錯誤" }));
  12. if (!data.code) { return data; }
  13. if (!data.message) { throw data; }
  14. alert(data.message);
  15. }

</>復制代碼

  1. 上面代碼中使用 .catch() 來避免 try ... catch ... 的技巧在從不用 try-catch 實現的 async/await 語法說錯誤處理中提到過。

當然業務層調用也可以使用 async/await(記得寫在 async 函數中):

</>復制代碼

  1. const data = await appAjax("login", {
  2. username: "uname",
  3. password: "passwd"
  4. }).catch(() => {
  5. alert("登錄失敗");
  6. });
  7. if (data) {
  8. window.location.assign("home");
  9. }

對于多次 .done() 的改造:

</>復制代碼

  1. const data = await appAjax(url, params);
  2. console.log("第 1 處處理", data);
  3. console.log("第 2 處處理", data);
小結

本文以封裝 Ajax 調用為例,看似在講述異步調用。但實際想告訴大家的東西是:如何將一個常用的功能封裝起來,實現代碼重用和更簡潔的調用;以及在封裝的過程中需要考慮的問題——向前和向后的兼容性,在做工具函數封裝的時候,應該盡量避免和某個特定的工具特性綁定,向公共標準靠攏——不知大家是否有所體會。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/89850.html

相關文章

  • 兩年了,我寫了這些干貨!

    摘要:開公眾號差不多兩年了,有不少原創教程,當原創越來越多時,大家搜索起來就很不方便,因此做了一個索引幫助大家快速找到需要的文章系列處理登錄請求前后端分離一使用完美處理權限問題前后端分離二使用完美處理權限問題前后端分離三中密碼加鹽與中異常統一處理 開公眾號差不多兩年了,有不少原創教程,當原創越來越多時,大家搜索起來就很不方便,因此做了一個索引幫助大家快速找到需要的文章! Spring Boo...

    huayeluoliuhen 評論0 收藏0
  • Django前后分離實踐

    摘要:更新嘗試了一下實現前后端分離,新的文章如下前后端分離之初試更新可另外用實現前后端分離,這篇文章可能局限性太大,只是個人的入門實踐剛剛學習前端快一年,后臺方面了解甚少,于是決定踩踩坑,學習一下。 2018.9.6更新:嘗試了一下REST framework實現前后端分離,新的文章如下Django前后端分離之REST framework初試 2018.8.27更新:可另外用 restful...

    Mike617 評論0 收藏0
  • 前后端完全分離 API 設計

    摘要:刪除后指定產品不存在獲取商品列表未分頁獲取全部商品成功系列的表殼材料為輕巧的銀色及深空灰色陽極氧化鋁金屬,強化玻璃材質為顯示屏提供保護。外觀設計不再棱角分明,表層玻璃邊有一個弧度向下延伸,與陽極氧化鋁金屬機身邊框銜接。 背景 API 就是開發者使用的界面。我的目標不僅是能用,而且好用,跨平臺(PC, Android, IOS, etc...)使用。本文將詳細介紹 API 的設計及異常處...

    gitmilk 評論0 收藏0

發表評論

0條評論

trilever

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<