av激情亚洲男人的天堂国语,日韩欧美精品一中文字幕,无码av一区二区三区无码,国产又色又爽又刺激的a片,国产又色又爽又刺激的a片

項目實踐-Axios進(jìn)階封裝

 axios二次封裝解決了什么問題?(項目常用)

發(fā)展壯大離不開廣大客戶長期以來的信賴與支持，我們將始終秉承“誠信為本、服務(wù)至上”的服務(wù)理念，堅持“二合一”的優(yōu)良服務(wù)模式，真誠服務(wù)每家企業(yè)，認(rèn)真做好每個細(xì)節(jié)，不斷完善自我，成就企業(yè)，實現(xiàn)共贏。行業(yè)涉及酒樓設(shè)計等，在成都網(wǎng)站建設(shè)、全網(wǎng)整合營銷推廣、WAP手機(jī)網(wǎng)站、VI設(shè)計、軟件開發(fā)等項目上具有豐富的設(shè)計經(jīng)驗。

axios二次封裝：就是把大部分接口公共的參數(shù)配置提取出來統(tǒng)一進(jìn)行處理。

1、代碼封裝，重用性高，減少代碼量，減低維護(hù)難度。

2、統(tǒng)一處理一些常規(guī)的問題一勞永逸，如http錯誤。

3、攔截請求和響應(yīng)，提前對數(shù)據(jù)進(jìn)行處理，如獲取token，修改配置項。

Axios基礎(chǔ)配置- 實踐

1) 全局的 axios 默認(rèn)值

 
 
 
 
    
  
  
  
  
  1. axios.defaults.baseURL = 'https://api.cdxwcx.com';
    2. 
  
  
  
  
  2. axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
    3. 
  
  
  
  
  3. axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    4.

2) 自定義實例默認(rèn)值

 
 
 
 
    
  
  
  
  
  1. // 創(chuàng)建實例時設(shè)置配置的默認(rèn)值
    2. 
  
  
  
  
  2. var instance = axios.create({
    3. 
  
  
  
  
  3.   baseURL: 'https://api.cdxwcx.com'
    4. 
  
  
  
  
  4. });
    5. 
  
  
  
  
  5. 
  
  
  
  
  6. // 在實例已創(chuàng)建后修改默認(rèn)值
    7. 
  
  
  
  
  7. instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
    8.

3) 區(qū)分環(huán)境配置

 
 
 
 
    
  
  
  
  
  1. let env = "dev";
    2. 
  
  
  
  
  2. switch (env) {
    3. 
  
  
  
  
  3.     case 'dev':
    4. 
  
  
  
  
  4.         axios.defaults.baseURL = "http://127.0.0.1:8888";
    5. 
  
  
  
  
  5.         break;
    6. 
  
  
  
  
  6.     case 'test':
    7. 
  
  
  
  
  7.         axios.defaults.baseURL = "http://114.27.34.1:8888";
    8. 
  
  
  
  
  8.         break;
    9. 
  
  
  
  
  9.     case 'pro':
    10. 
  
  
  
  
  10.         axios.defaults.baseURL = "http://api.zhufeng.cn";
    11. 
  
  
  
  
  11.         break;
    12. 
  
  
  
  
  12. }
    13.

4) 數(shù)據(jù)格式配置

 
 
 
 
    
  
  
  
  
  1. axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
    2. 
  
  
  
  
  2. // axios.defaults.headers.common['Content-Type'] = 'application/x-www-form-urlencoded';
    3. 
  
  
  
  
  3. // axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    4. 
  
  
  
  
  4. axios.defaults.transformRequest = function (data, headers) {
    5. 
  
  
  
  
  5.     let ContentType = headers['Content-Type'] || headers.common['Content-Type'] || headers.post['Content-Type'] || 'application/json';
    6. 
  
  
  
  
  6. 
  
  
  
  
  7.     if (ContentType === "application/json") {
    8. 
  
  
  
  
  8.         return JSON.stringify(data);
    9. 
  
  
  
  
  9.     }
    10. 
  
  
  
  
  10. 
  
  
  
  
  11.     if (ContentType === "application/x-www-form-urlencoded") {
    12. 
  
  
  
  
  12.         return Qs.stringify(data);
    13. 
  
  
  
  
  13.     }
    14. 
  
  
  
  
  14.     return data;
    15. 
  
  
  
  
  15. };
    16.

項目實踐-數(shù)據(jù)格式

 
 
 
 
    
  
  
  
  
  1. service.interceptors.request.use(
    2. 
  
  
  
  
  2.   (config) => {
    3. 
  
  
  
  
  3.     // 開發(fā)環(huán)境引入包裝api
    4. 
  
  
  
  
  4.     config.url = `${BASE_URL}${config.url}`;
    5. 
  
  
  
  
  5.     config.headers['Cache-Control'] = 'no-cache,no-store,must-revalidate,max-age=-1,private';
    6. 
  
  
  
  
  6.     // post請求并且需要將data以form data 形式傳給后端 需要傳一個formType為true boolean
    7. 
  
  
  
  
  7.     if (config.method === 'post' && config.formType === true) {
    8. 
  
  
  
  
  8.       config.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
    9. 
  
  
  
  
  9.       config.data = qs.stringify(config.data);
    10. 
  
  
  
  
  10.     }
    11. 
  
  
  
  
  11.     return config;
    12. 
  
  
  
  
  12.   },
    13. 
  
  
  
  
  13.   (error) => {
    14. 
  
  
  
  
  14.     // Do something with request error
    15. 
  
  
  
  
  15.     Promise.reject(error);
    16. 
  
  
  
  
  16.   }
    17. 
  
  
  
  
  17. );
    18.

5) 攔截器

 
 
 
 
    
  
  
  
  
  1. // 添加請求攔截器
    2. 
  
  
  
  
  2. axios.interceptors.request.use(function (config) {
    3. 
  
  
  
  
  3.     // 在發(fā)送請求之前做些什么
    4. 
  
  
  
  
  4.     return config;
    5. 
  
  
  
  
  5. }, function (error) {
    6. 
  
  
  
  
  6.     // 對請求錯誤做些什么
    7. 
  
  
  
  
  7.     return Promise.reject(error);
    8. 
  
  
  
  
  8. });
    9. 
  
  
  
  
  9. 
  
  
  
  
  10. // 添加響應(yīng)攔截器
    11. 
  
  
  
  
  11. axios.interceptors.response.use(function (response) {
    12. 
  
  
  
  
  12.     // 對響應(yīng)數(shù)據(jù)做點什么
    13. 
  
  
  
  
  13.     return response;
    14. 
  
  
  
  
  14. }, function (error) {
    15. 
  
  
  
  
  15.     // 對響應(yīng)錯誤做點什么
    16. 
  
  
  
  
  16.     return Promise.reject(error);
    17. 
  
  
  
  
  17. });
    18.

6) 響應(yīng)的錯誤處理封裝

interceptor作用就是攔截，可以針對請求參數(shù)和響應(yīng)結(jié)果進(jìn)行攔截處理，一般在項目當(dāng)中，主要針對接口常規(guī)報錯、網(wǎng)絡(luò)報錯、系統(tǒng)超時、權(quán)限認(rèn)證等做攔截處理。

 
 
 
 
    
  
  
  
  
  1. axios.interceptors.response.use(function (response) {
    2. 
  
  
  
  
  2.     // 把獲取的響應(yīng)主體信息返回
    3. 
  
  
  
  
  3.     return response.data;
    4. 
  
  
  
  
  4. }, function (reason) {
    5. 
  
  
  
  
  5.     // 失?。壕W(wǎng)絡(luò)、狀態(tài)碼(Axios失敗)
    6. 
  
  
  
  
  6.     let response = reason.response;
    7. 
  
  
  
  
  7.     if (response) {
    8. 
  
  
  
  
  8.         // 狀態(tài)碼不是2開頭的
    9. 
  
  
  
  
  9.         switch (response.status) {
    10. 
  
  
  
  
  10.             //400 參數(shù)
    11. 
  
  
  
  
  11.             //401/403 Token
    12. 
  
  
  
  
  12.             //404 地址
    13. 
  
  
  
  
  13.             //500/503 服務(wù)器
    14. 
  
  
  
  
  14.         }
    15. 
  
  
  
  
  15.     } else {
    16. 
  
  
  
  
  16.         // 網(wǎng)絡(luò) / (超時 / 中斷請求  -> code: "ECONNABORTED") ...
    17. 
  
  
  
  
  17.         if (reason && reason.code === "ECONNABORTED") {}
    18. 
  
  
  
  
  18.         if (!navigator.onLine) {}
    19. 
  
  
  
  
  19.     }
    20. 
  
  
  
  
  20.     return reason;
    21. 
  
  
  
  
  21. });
    22.

一般項目，這樣就沒問題了，一套公共的參數(shù)配置。剩下都是請求的時候單獨再配置即可。

Axios配置- 原理與源碼

1) HTTP 攔截器的設(shè)計與實現(xiàn)

對于大多數(shù) SPA 應(yīng)用程序來說， 通常會使用 token 進(jìn)行用戶的身份認(rèn)證。這就要求在認(rèn)證通過后，我們需要在每個請求上都攜帶認(rèn)證信息。如果在考慮對響應(yīng)進(jìn)行統(tǒng)一處理的話，我們的 request 函數(shù)將變得越來越龐大，也越來越難維護(hù)。那么對于這個問題，Axios 為我們提供了解決方案 —— 攔截器。

Axios 是一個基于 Promise 的 HTTP 客戶端，而 HTTP 協(xié)議是基于請求和響應(yīng)：

所以 Axios 提供了請求攔截器和響應(yīng)攔截器來分別處理請求和響應(yīng)。

1) 請求攔截器：該類攔截器的作用是在請求發(fā)送前統(tǒng)一執(zhí)行某些操作，比如在請求頭中添加 token 字段。

2) 響應(yīng)攔截器：該類攔截器的作用是在接收到服務(wù)器響應(yīng)后統(tǒng)一執(zhí)行某些操作，比如發(fā)現(xiàn)響應(yīng)狀態(tài)碼為 401 時，自動跳轉(zhuǎn)到登錄頁。

2) 二次封裝配置代碼：(參考)

 
 
 
 
    
  
  
  
  
  1. import axios from 'axios';
    2. 
  
  
  
  
  2. import qs from 'qs';
    3. 
  
  
  
  
  3. /*
    4. 
  
  
  
  
  4.  * 根據(jù)環(huán)境變量區(qū)分接口的默認(rèn)地址 
    5. 
  
  
  
  
  5. */
    6. 
  
  
  
  
  6. switch (process.env.NODE_ENV) {
    7. 
  
  
  
  
  7.     case "production":
    8. 
  
  
  
  
  8.         axios.defaults.baseURL = "http://api.zhufengpeixun.cn";
    9. 
  
  
  
  
  9.         break;
    10. 
  
  
  
  
  10.     case "test":
    11. 
  
  
  
  
  11.         axios.defaults.baseURL = "http://192.168.20.12:8080";
    12. 
  
  
  
  
  12.         break;
    13. 
  
  
  
  
  13.     default:
    14. 
  
  
  
  
  14.         axios.defaults.baseURL = "http://127.0.0.1:3000";
    15. 
  
  
  
  
  15. }
    16. 
  
  
  
  
  16. 
  
  
  
  
  17. /*
    18. 
  
  
  
  
  18.  * 設(shè)置超時時間和跨域是否允許攜帶憑證 
    19. 
  
  
  
  
  19. */
    20. 
  
  
  
  
  20. axios.defaults.timeout = 10000;
    21. 
  
  
  
  
  21. axios.defaults.withCredentials = true;
    22. 
  
  
  
  
  22. 
  
  
  
  
  23. /*
    24. 
  
  
  
  
  24.  * 設(shè)置請求傳遞數(shù)據(jù)的格式（看服務(wù)器要求什么格式）
    25. 
  
  
  
  
  25.  * x-www-form-urlencoded
    26. 
  
  
  
  
  26. */
    27. 
  
  
  
  
  27. axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
    28. 
  
  
  
  
  28. axios.defaults.transformRequest = data => qs.stringify(data);
    29. 
  
  
  
  
  29. 
  
  
  
  
  30. /*
    31. 
  
  
  
  
  31.  * 設(shè)置請求攔截器 
    32. 
  
  
  
  
  32.  * 客戶端發(fā)送請求 - > [請求攔截器] - > 服務(wù)器
    33. 
  
  
  
  
  33. * TOKEN校驗（JWT）：接收服務(wù)器返回的token，存儲到vuex/本地存儲中，每一次向服務(wù)器發(fā)請求，我們應(yīng)該把token帶上
    34. 
  
  
  
  
  34. */
    35. 
  
  
  
  
  35. axios.interceptors.request.use(config => {
    36. 
  
  
  
  
  36.     // 攜帶上token
    37. 
  
  
  
  
  37.     let token = localStorage.getItem('token');
    38. 
  
  
  
  
  38.     token && (config.headers.Authorization = token);
    39. 
  
  
  
  
  39.     return config;
    40. 
  
  
  
  
  40. }, error => {
    41. 
  
  
  
  
  41.    return Promise.reject(error);
    42. 
  
  
  
  
  42. });
    43. 
  
  
  
  
  43. 
  
  
  
  
  44. /*
    45. 
  
  
  
  
  45.  * 響應(yīng)攔截器 
    46. 
  
  
  
  
  46.  * 服務(wù)器返回信息  -> [攔截的統(tǒng)一處理] -> 客戶端JS獲取到信息
    47. 
  
  
  
  
  47. */
    48. 
  
  
  
  
  48. axios.defaults.validateStatus = status => {
    49. 
  
  
  
  
  49.     // 自定義響應(yīng)成功的HTTP狀態(tài)碼
    50. 
  
  
  
  
  50.     return /^(2|3)\d{2}$/.test(status);
    51. 
  
  
  
  
  51. };
    52. 
  
  
  
  
  52. axios.interceptors.response.use(response => {
    53. 
  
  
  
  
  53.     return response.data;
    54. 
  
  
  
  
  54. }, error => {
    55. 
  
  
  
  
  55.     let {
    56. 
  
  
  
  
  56.         response
    57. 
  
  
  
  
  57.     } = error;
    58. 
  
  
  
  
  58.     if (response) {
    59. 
  
  
  
  
  59.         //=>服務(wù)器最起碼返回結(jié)果了
    60. 
  
  
  
  
  60.         switch (response.status) {
    61. 
  
  
  
  
  61.             case 401: //=>權(quán)限
    62. 
  
  
  
  
  62.                 break;
    63. 
  
  
  
  
  63.             case 403: //=>服務(wù)器拒絕執(zhí)行（token過期）
    64. 
  
  
  
  
  64.                 break;
    65. 
  
  
  
  
  65.             case 404: //=>找不到頁面 
    66. 
  
  
  
  
  66.                 break;
    67. 
  
  
  
  
  67.         }
    68. 
  
  
  
  
  68.     } else {
    69. 
  
  
  
  
  69.         //=>服務(wù)器連結(jié)果都沒有返回
    70. 
  
  
  
  
  70.         if (!window.navigator.onLine) {
    71. 
  
  
  
  
  71.             // 斷網(wǎng)處理：可以跳轉(zhuǎn)到斷網(wǎng)頁面
    72. 
  
  
  
  
  72.             return;
    73. 
  
  
  
  
  73.         }
    74. 
  
  
  
  
  74.         return Promise.reject(error);
    75. 
  
  
  
  
  75.     }
    76. 
  
  
  
  
  76. });
    77. 
  
  
  
  
  77. export default axios;
    78.

當(dāng)前文章：項目實踐-Axios進(jìn)階封裝
轉(zhuǎn)載來源：http://uogjgqi.cn/article/coehchj.html
掃二維碼與項目經(jīng)理溝通

我們在微信上24小時期待你的聲音

解答本文疑問/技術(shù)咨詢/運營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流