기술나눔

vue는 axios에 대한 요청과 응답을 캡슐화합니다.

2024-07-12

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

1. 이유

예를 들어 일부 비즈니스 로직에서는 요청 전에 로딩 효과를 표시해야 하거나 로그인 시 신원 정보(토큰) 및 기타 정보가 만료되었는지 여부를 확인하고 코드 코드를 기반으로 해당 프롬프트 정보를 제공해야 합니다. 서버에서 반환되었습니다. 요청 전후에 수행되는 일부 로직은 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 등 다양한 언어에 능숙하며, 오픈 소스 분야에 많은 공헌을 했습니다. 나중에 참조할 수 있도록 기술 개발의 일부 문제를 공유하는 개발자 문서 스테이션입니다.

내 연락처 정보

우편