fetch和axios的区别和封装一个功能齐备的axios

axios和fetch区别

• 概念不同
  
  
  
  • Fetch是一种新的获取资源的接口方式，可以直接使用
    
  • Axios是一个基于XMLHttpRequest封装的工具包，必要引入才可以使用
    
  
  
• 传递数据的方式不同
  
  
  
  • Fetch则是必要放在body属性中，以字符串的方式进行传递
    
  • Axios是放到data属性里，以对象的方式进行传递
    
  
  
• 相应超时
  
  
  
  • Fetch必要通过AbortController来设置
    
  • Axios是直接设置timeout就可以
    
  
  
• 对数据的转化
  
  
  
  • Fetch则不同，它必要使用者进行手动转化,arrayBuffer()，blob()，json()，text()，formData()
    
  • Axios另有非常好的一点就是会自动对数据进行转化
    
  
  
• HTTP拦截器
  
  
  
  • Fetch没有拦截器功能，但是要实现该功能并不难，直接重写全局Fetch方法就可以办到
    
  • Axios设置拦截器非常简朴，通过axios.interceptors.request.use(() => {})
    
  
  

封装axios

• 优化配置，设置默认配置项（responseType、跨域携带cookie、token、超时设置），统一设置请求头、 baseURL
  
• 添加请求拦截器、相应拦截器
  
• 不同请求方法，参数格式同等
  
• 全局的loading配置
  
• 支持下载文件
  
• 取消重复请求（取消请求详解）
  
• 可进行二次确认（一样平常删除、重置等方法防止用户误触会进行二次确认）
  
• 统一处理错误，http状态码和贴近业务的一些错误状态）
  

1. // http.js
2. import axios from 'axios';
3. import { MessageBox, Toast } from 'element-ui'
4. import qs from qs;
6. // 环境的切换，也可以写到.env文件中
7. if (process.env.NODE_ENV == 'development') {   
8.         axios.defaults.baseURL = 'https://www.baidu.com';}
9. else if (process.env.NODE_ENV == 'debug') {   
10.         axios.defaults.baseURL = 'https://www.ceshi.com';
11. }
12. else if (process.env.NODE_ENV == 'production') {   
13.         axios.defaults.baseURL = 'https://www.production.com';
14. }
15. let http = axios.create({
16.   withCredentials: true, // 允许把cookie传递到后台,
17.   timeout: 1000 * 12
18. });
19. http.defaults.timeout = 10000;
20. // 设置post请求头
21. http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
22. // 请求拦截器
23. http.interceptors.request.use(
24.   config => {
25.     // 设置 token
26.     const token = localStorage.getItem('token')
27.     token && (config.headers.Authorization = token)  
28.     // 记录请求，为后续在响应拦截器中取消做准备
29.     addPendingRequest(config)  
30.                 return config;
31.   },
32.   error => {
33.     // 对请求错误做些什么
34.     return Promise.reject(error);
35.   }
36. );
38. // 响应拦截器
39. http.interceptors.response.use(
40.   response => {
41.     // 取消重复请求
42.     removePendingRequest(response.config);
43.     if (response.data instanceof Blob) {
44.       // 处理二进制文件
45.       return downloadFile(response);
46.     }
47.     if (response.status === 200) {            
48.                         return Promise.resolve(response);        
49.                 } else {            
50.                         return Promise.reject(response);        
51.                 }
52.   },
53.   error => { // 服务器状态码不是2开头的的情况
54.     const { response } = error;
55.                 if (response) {
56.                         // 请求已发出，但是不在2xx的范围
57.                         errorHandle(response.status, response.data.message);
58.                         return Promise.reject(response);
59.                 } else {
60.                         // 处理断网的情况
61.                         if (!window.navigator.onLine) {
62.         return Promise.reject(new Error('请检查网络连接'))
63.                         } else {
64.                                 return Promise.reject(error);
65.                         }
66.                 }
67.   }
68. );
70. // 错误处理
71. const errorHandle = (status, other) => {
72.         // 状态码判断
73.         switch (status) {
74.                 // 401: 未登录状态，跳转登录页
75.                 case 401:
76.                         toLogin();
77.                         break;
78.                 // 403 token过期
79.                 // 清除token并跳转登录页
80.                 case 403:
81.                         Toast('登录过期，请重新登录');
82.                         localStorage.removeItem('token');
83.                         store.commit('loginSuccess', null);
84.                         setTimeout(() => {
85.                                 toLogin();
86.                         }, 1000);
87.                         break;
88.                 // 404请求不存在
89.                 case 404:
90.                         Toast('请求的资源不存在');
91.                         break;
92.                 default:
93.                         console.log(other);   
94.         }
95. }
97. // 在接口中传递参数，指定是否需要二次确认
98. export const post = (url, params, confirm = false) => {
99.   return new Promise((resolve, reject) => {
100.     if (confirm || confirm.confirm) {
101.       MessageBox.confirm(confirm.confirm || '确认操作吗', '提示', {
102.         confirmButtonText: '确定',
103.         cancelButtonText: '取消',
104.         type: 'warning',
105.       })
106.         .then(() => {
107.           resolve(http.post(url, params))
108.         })
109.         .catch(_ => {
110.           console.log('取消请求')
111.         })
112.     } else {
113.       resolve(http.post(url, params))
114.     }
115.   })
116. }
118. // 取消重复请求
119. let repeatRequests = {}
120. function generateRequestKey(config) {
121.   const { method, url, params, data } = config
122.   const split = '---'
123.   const array = [`url:`, url, `${split}method:`, method]
124.   params && array.push(`${split}params:`, qs.stringify(params))
125.   data && array.push(`${split}data:`, typeof data === 'object' ? JSON.stringify(data) : data)
126.   return array.join('')
127. }
128. function addPendingRequest(config) {
129.   const requestKey = generateRequestKey(config)
130.   config.cancelToken = new axios.CancelToken(cancel => {
131.     !repeatRequests[requestKey] && (repeatRequests[requestKey] = [])
132.     repeatRequests[requestKey].push(cancel)
133.   })
134.   return config
135. }
136. function removePendingRequest(config) {
137.   const requestKey = generateRequestKey(config)
138.   const needCancel = repeatRequests[requestKey]?.length > 1
139.   if (needCancel) {
140.     // 不重复，不取消
141.     repeatRequests[requestKey].forEach(cancel => {
142.       cancel(requestKey)
143.     })
144.   }
145.   needCancel ? (repeatRequests[requestKey] = []) : (repeatRequests = {})
146. }
148. // 文件下载
149. const downloadFile = (response) => {
150.   console.log("response.data.type:", response.data.type);
151.   return new Promise((resolve, reject) => {
152.     const fileReader = new FileReader();
153.     fileReader.onload = function () {
154.       try {
155.         console.log("result:", this.result);
156.         const jsonData = JSON.parse(this.result); // 成功 说明是普通对象数据
157.         if (jsonData?.code !== 200) {
158.           Message.error(jsonData?.message ?? "请求失败");
159.           reject(jsonData);
160.         }
161.       } catch (err) {
162.         // 解析成对象失败，说明是正常的文件流
163.         const blob = new Blob([response.data]);
164.         // 本地保存文件
165.         const url = window.URL.createObjectURL(blob);
166.         const link = document.createElement("a");
167.         link.href = url;
168.         const filename = response?.headers?.["content-disposition"]
169.           ?.split("filename*=")?.[1]
170.           ?.substr(7);
171.         link.setAttribute("download", decodeURI(filename));
172.         document.body.appendChild(link);
173.         link.click();
174.         resolve(response.data);
175.       }
176.     };
177.     fileReader.readAsText(response.data);
178.   });
179. };
180. export default http;

复制代码

1. // api.js
2. import request from "./http.js";
4. // 文件下载
5. export const exportFile = (data) =>
6.   request.post("/exportfile", data, {
7.     responseType: "blob",
8.   });

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。