详解ajax、fetch、axios的区别

众所周知它们都用来发送哀求，实在它们区别还蛮大的。这也是口试中的高频题，本文将详细进行讲解。
1. ajax

英译过来是Aysnchronous JavaScript And XML，直译是异步JS和XML（XML雷同HTML，但是设计宗旨就为了传输数据，现已被JSON取代），表明一下就是说以XML作为数据传输格式发送JS异步哀求。但实际上ajax是一个一类技能的统称的术语，包罗XMLHttpRequest、JS、CSS、DOM等，它重要实现网页拿到哀求数据后不用革新整个页面也能呈现最新的数据。
下面我们简单封装一个ajax哀求【口试高频题】：

1. const ajaxGet = function (url) {
2.     const xhr = new XMLHttpRequest()
3.     xhr.open('get', url)
4.     xhr.onreadystatechange = () => {
5.         if (xhr.readyState == 4) {
6.             if (xhr.status >= 200 && xhr.status < 400) {
7.                 console.log(xhr.response);  // 响应结果
8.             }
9.         }
10.     }
11.     xhr.onerror = (error) => {
12.         console.log(error, xhr.status)
13.     }
14.     xhr.send()
15. }

复制代码

2. fetch

它实在就是一个JS自带的发送哀求的一个api，拿来跟ajax对比是完全不公道的，它们完全不是一个概念的东西，适合拿来和fetch对比的实在是xhr，也就是上面封装ajax哀求的代码里的XMLHttpRequest，这两都是JS自带的发哀求的方法，而fetch是ES6出现的，自然功能比xhr更强，重要原因就是它是基于Promise的，它返回一个Promise，因此可以使用.then(res => )的方式链式处置惩罚哀求效果，这不但进步了代码的可读性，还克制了回调地狱(xhr通过xhr.onreadystatechange= () => {}如许回调的方式监控哀求状态，要是想在哀求后再发送哀求就要在回调函数内再发送哀求，如许容易出现回调地狱)的题目。而且JS自带，语法也非常简洁，几行代码就能发起一个哀求，用起来很方便，据说大佬都爱用。
它的特点是：

• 使用 promise，不使用回调函数。
  
• 采用模块化设计，好比 rep、res 等对象分散开来，比较友好。
  
• 通过数据流对象处置惩罚数据，可以进步网站性能。
  

下面我们简单写个fetch哀求的示例：

1. // get请求
2. fetch('http://127.0.0.1:8000/get')
3.     .then(res => {
4.     if (!res.ok) {
5.         throw new Error('请求错误！状态码为：', res.status)
6.     }
7.     return res.text()
8. }).then(data => {
9.     console.log(data);
10. })
11. // post请求
12. fetch('http://127.0.0.1:8000/post', {
13.     method: 'post',
14.     headers: {
15.         'Content-Type': 'application/json'
16.     },
17.     mode: 'no-cors',  // 设置cors表示只能发送跨域的请求，no-cors表示跨不跨域都能发
18.     body: JSON.stringify({
19.         name: 'zhangsan',
20.         age: 18
21.     })
22. }).then(res => {
23.     return res.json()
24. }).then(data => {
25.     console.log(data);
26. })

复制代码

3. axios

axios是用于网络哀求的第三方库，它是一个库。axios利用xhr进行了二次封装的哀求库，xhr只是axios中的此中一个哀求适配器，axios在nodejs端还有个http的哀求适配器；axios = xhr + http；它返回一个Promise。【项目中经常必要封装的axios】
它的特点：

• 在欣赏器环境中创建 XMLHttpRequests；在node.js环境创建 http 哀求
  
• 返回Promise
  
• 拦截哀求和响应
  
• 自动转换 JSON 数据
  
• 转换哀求数据和响应数据
  
• 取消哀求
  

它的基础语法是：

1. // 发送 Get 请求
2. axios({
3.     method: 'get',
4.     url: '',
5.     params: {}  // 查询query使用params
6. })
7. // 发送 Post 请求
8. axios({
9.     method: 'post',
10.     url: '',
11.     data: {}  // 请求体body用data
12. })

复制代码

下面我们在vue项目中封装一个使用axios实现的哀求。
libs/config.js：设置文件

1. const serverConfig = {
2.   baseUrl: "http://127.0.0.1:8000", // 请求基础地址，可根据环境自定义
3.   useTokenAuthentication: false, // 是否开启token认证
4. };
5. export default serverConfig;

复制代码

libs/request.js：封装哀求

1. import axios from "axios";  // 第三方库 需要安装
2. import serverConfig from "./config";
3. // 创建axios实例
4. const apiClient = axios.create({
5.   baseURL: serverConfig.baseUrl, // 基础请求地址
6.   withCredentials: false, // 跨域请求是否需要携带cookie
7.   headers: {
8.     Accept: "application/json",
9.     "Content-Type": "application/json",
10.   },
11.   timeout: 10000, // 请求超时时间
12. });
14. // 请求拦截
15. apiClient.interceptors.request.use(
16.   (config) => {
17.     // 请求发送前的处理逻辑 比如token认证，设置各种请求头啥的
18.     // 如果开启token认证
19.     if (serverConfig.useTokenAuthentication) {
20.       // 请求头携带token
21.       config.headers.Authorization = localStorage.getItem("token");
22.     }
23.     return config;
24.   },
25.   (error) => {
26.     // 请求发送失败的处理逻辑
27.     return Promise.reject(error);
28.   }
29. );
31. // 响应拦截
32. apiClient.interceptors.response.use(
33.   (response) => {
34.     // 响应数据处理逻辑，比如判断token是否过期等等
35.     // 代码块
36.     return response;
37.   },
38.   (error) => {
39.     // 响应数据失败的处理逻辑
40.     let message = "";
41.     if (error && error.response) {
42.       switch (error.response.status) {
43.         case 302:
44.           message = "接口重定向了！";
45.           break;
46.         case 400:
47.           message = "参数不正确！";
48.           break;
49.         case 401:
50.           message = "您未登录，或者登录已经超时，请先登录！";
51.           break;
52.         case 403:
53.           message = "您没有权限操作！";
54.           break;
55.         case 404:
56.           message = `请求地址出错: ${error.response.config.url}`;
57.           break;
58.         case 408:
59.           message = "请求超时！";
60.           break;
61.         case 409:
62.           message = "系统已存在相同数据！";
63.           break;
64.         case 500:
65.           message = "服务器内部错误！";
66.           break;
67.         case 501:
68.           message = "服务未实现！";
69.           break;
70.         case 502:
71.           message = "网关错误！";
72.           break;
73.         case 503:
74.           message = "服务不可用！";
75.           break;
76.         case 504:
77.           message = "服务暂时无法访问，请稍后再试！";
78.           break;
79.         case 505:
80.           message = "HTTP 版本不受支持！";
81.           break;
82.         default:
83.           message = "异常问题，请联系管理员！";
84.           break;
85.       }
86.     }
87.     return Promise.reject(message);
88.   }
89. );
91. export default apiClient;

复制代码

/api/index.js：设置哀求接口，这里一个get一个post

1. import apiClient from "@/libs/request";
3. let getInfo = (params) => {
4.   return apiClient({
5.     url: "/get",
6.     method: "get",
7.     params,  // axios的get请求query用params
8.   });
9. };
10. let postInfo = (params) => {
11.   return apiClient({
12.     url: "/post",
13.     method: "post",
14.     data: params,  // axios的post请求body用data
15.   });
16. };
17. export default {
18.   getInfo,
19.   postInfo,
20. };

复制代码

App.vue：用于测试哀求效果

1. <script>
2. import api from './api/index.js'
3. export default {
4.     data() {
5.         return {
6.             isH5: true
7.         }
8.     },
9.     created() {
10.         this.init()
11.     },
12.     methods: {
13.         init() {
14.             api.getInfo().then(res => {
15.                 console.log(res.data);
16.             })
17.             api.postInfo({
18.                 name: 'zhangsan',
19.                 age: '18'
20.             }).then(res => {
21.                 console.log(res.data);
22.             })
23.         }
24.     },
25. }
26. </script>

复制代码

效果如下：

4. 总结

总结一部门区别如下：【这三个东西差异真的很大】
Ajaxfetchaxios范例术语，技能的统称js内置的api第三方库是否使用xhr二次封装是否是是否返回Promise否是是
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。