技術共有

vue は axios へのリクエストとレスポンスをカプセル化します

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

1. 理由

たとえば、一部のビジネス ロジックでは、リクエストの前に読み込み効果を表示したり、ログイン時に ID 情報 (トークン) やその他の情報の有効期限が切れているかどうかを判断し、コード コードに基づいて対応するプロンプト情報を提供したりする必要があります。サーバーによって返されました。リクエストの前後に実行されるロジックの一部は、axios リクエストの二次カプセル化によって実装できます。

2. 特定の包装

これは axios パッケージ化の形式であり、特定のビジネス ニーズに応じて決定する必要がある形式が多数あります。特定のコードには特定のコメントがあります。早速、参照用に特定のコードに直接進みましょう。

  1. // axios的封装
  2. import axios, { HttpStatusCode } from "axios";
  3. import { useRouter } from "vue-router";
  4.  
  5. // 生产环境
  6. const baseURLProd = "https://mall.quanrui.cc/api/v1/backend/";
  7. // 测试环境
  8. const baseURLDev = "http://139.9.197.13:8088/api/v1/backend/";
  9. const baseURL = baseURLDev;   //更改baseurl
  10.  
  11. // 使用路由
  12. const router = useRouter();
  13.  
  14. // 设置请求头
  15. axios.defaults.headers.post["Content-Type"] =
  16. "application/x-www-form-urlencoded;charset=UTF-8";
  17.  
  18. // 创建axios示实例
  19. let instance = axios.create({
  20.   baseURL: baseURL,   //设置baseurl
  21.   timeout: 5000, //超时时间
  22. });
  23.  
  24. // 跳转到登录页面,如果没有登录,或者登录信息过期的话
  25. // 携带当前页面路由，以期在登录页面完成登录后返回当前页面
  26. const toLogin = () => {
  27.   router.replace({
  28.     path: "/login",
  29.     query: {
  30.       redirect: router.currentRoute.fullPath,
  31.     },
  32.   });
  33. };
  34.  
  35. // 提示信息,Toast这个是第三方组件,根据使用的UI组件库不同进行更换
  36. const tip = msg => {    
  37. 	Toast({        
  38. 		message: msg,        
  39. 		duration: 1000,        
  40. 		forbidClick: true    
  41. 	});
  42. }
  43.  
  44. // 请求拦截器
  45. // (主要是在请求的时候携带请求token,以协助后端进行判断身份信息是否过期等),或者还可以在此增加业务操作,比如请求之前展示loading效果,具体可以拿个第三方UI库的一个效果过来使用
  46. axios.interceptors.request.use(
  47.   config => {
  48.     // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
  49.     // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
  50.     const token = store.state.token;
  51.     token && (config.headers.Authorization = token);
  52.     return config;
  53.   },
  54.   error => {
  55.     return Promise.error(error);
  56.   }
  57. );
  58.  
  59. // 响应拦截器(主要对code进行判断,提示用户进行操作)
  60. axios.interceptors.response.use(
  61.   response => {
  62.     if (response.status === 200) {
  63.       return Promise.resolve(response);
  64.     } else {
  65.       return Promise.reject(response);
  66.     }
  67.   },
  68.   // 服务器状态码不是200的情况
  69.   error => {
  70.     if (error.response.status) {
  71.       switch (error.response.status) {
  72.         // 401: 未登录
  73.         // 未登录则跳转登录页面，并携带当前页面的路径
  74.         // 在登录成功后返回当前页面，这一步需要在登录页操作。
  75.         case 401:
  76.           tip("未登录，请先登录");
  77.           setTimeout(()=> {
  78.             toLogin();
  79.           },1000)
  80.           break;
  81.         // 403 token过期
  82.         // 登录过期对用户进行提示
  83.         // 清除本地token和清空vuex中token对象
  84.         // 跳转登录页面
  85.         case 403:
  86.           tip("登录过期，请重新登录");
  87.           // 清除token
  88.           localStorage.removeItem("token"); //如果存在了浏览器的localStorage
  89.           // store.commit("loginSuccess", null);    //如果存在store里的登录状态，获取其它相关信息
  90.           // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
  91.           setTimeout(() => {
  92.             toLogin();
  93.           }, 1000);
  94.           break;
  95.         // 404请求不存在
  96.         case 404:
  97.           tip("网络请求不存在");
  98.           break;
  99.         // 其他错误，直接抛出错误提示
  100.         default:
  101.           tip(error.response.data.message);
  102.           break;
  103.       }
  104.       return Promise.reject(error.response);
  105.     }
  106.   }
  107. );
  108.  
  109. //get方法
  110. export function get(url, params){    
  111. 	return new Promise((resolve, reject) =>{        
  112. 		axios.get(url, {            
  113. 			params: params        
  114. 		})        
  115. 		.then(res => {            
  116. 			resolve(res.data);        
  117. 		})        
  118. 		.catch(err => {            
  119. 			reject(err.data)        
  120. 		})    
  121. 	});
  122. }
  123.  
  124. //post方法
  125. export function post(url, params) {    
  126. 	return new Promise((resolve, reject) => {         
  127. 		axios.post(url, JSON.stringify(params))        
  128. 		.then(res => {            
  129. 			resolve(res.data);        
  130. 		})        
  131. 		.catch(err => {            
  132. 			reject(err.data)        
  133. 		})    
  134. 	});
  135. }
  136.  
  137. // put方法
  138. export function put(url, params){    
  139. 	return new Promise((resolve, reject) =>{        
  140. 		axios.put(url, {            
  141. 			params: params        
  142. 		})        
  143. 		.then(res => {            
  144. 			resolve(res.data);        
  145. 		})        
  146. 		.catch(err => {            
  147. 			reject(err.data)        
  148. 		})    
  149. 	});
  150. }
  151.  
  152. // delete方法
  153. export function del(url, params){    
  154. 	return new Promise((resolve, reject) =>{        
  155. 		axios.delete(url, {            
  156. 			params: params        
  157. 		})        
  158. 		.then(res => {            
  159. 			resolve(res.data);        
  160. 		})        
  161. 		.catch(err => {            
  162. 			reject(err.data)        
  163. 		})    
  164. 	});
  165. }
  166.  
  167. // 导出实例
  168. export default instance;

3. リクエストの一元管理

使用する際は、インターフェースのリクエストを格納するフォルダーを作成し、リクエストメソッドをエクスポートして一元管理するだけで済みます。そうしないと、すべてのコードがページ上に山積みになり、大量のコードが少し見苦しくなってしまいます。

まず、カプセル化された axios から特定のリクエスト メソッドをエクスポートします。

以下の例:

4. ページ内での使用

まずリクエストインターフェイスの特定のメソッドをエクスポートします。

import { pwlogin } from "../api/login";

使用：

  1. getloginres() {
  2.     pwlogin(data)
  3.     .then((res) => {
  4.       //数据处理
  5.     })
  6.     .catch((err) => console.log(err));
  7.   }

バグは大歓迎です。

個人プロフィール

彼は 30 年以上テクノロジーの研究に専念しており、java、linux、javascript、php、css などのさまざまな言語に堪能であり、オープンソース分野で多くの貢献を行っています。将来の参考のために技術開発におけるいくつかの問題を共有する開発者ドキュメント ステーション。

私の連絡先情報

郵便