axios和ajax的 用法
Axios和Ajax是我们在前端开发中常使用的两种网络请求工具，这篇文章将从基础概念、用法、优缺点等方面来详细介绍它们。
一、基础概念
1.1 Axios
Axios是一个基于promise的HTTP客户端，用于浏览器和Node.js平台中发送异步HTTP请求。  Axios支持浏览器和Node.js环境，可以在项目中方便地封装HTTP请求，相较于传统的Ajax和Fetch，Axios提供了更多强大的功能。
1.2 Ajax
Ajax全称Asynchronous JavaScript and XML，即异步JavaScript和XML技术。它是一种创建交互式网站的Web开发技术，可以在不刷新网页的情况下对网页进行局部更新。Ajax技术通过XmlHttpRequest对象实现异步请求数据。
二、用法
2.1 Axios
Axios的基础使用非常简单，我们先在项目中引入Axios：
``` import axios from 'axios' ```
Axios支持链式调用，比如：
``` ('/user?id=1')  .then(function (response) {    console.log(response);  })  .catch(function (error) {    console.log(error);  }); ```
以上代码会向服务器发送一个GET请求，并将响应数据打印到控制台。
Axios除了get请求，还可以发送post请求：
``` axios.post('/user', {    firstName: 'John',    lastName: 'Doe'  })  .then(function (response) {    console.log(response);  })  .catch(function (error) {    console.log(error);  }); ```
Axios还支持并发请求，比如：
``` axios.all([('/user/1'), ('/user/2')])  .then(axios.spread(function (user1, user2) {    console.log('User 1', user1);    console.log('User 2', user2);  })); ```
上面的代码会同时向服务器发送两个请求，并使用spread方法将返回的数据进行展开。
2.2 Ajax
使用Ajax首先要实例化一个XmlHttpRequest对象：
``` xhr = new XMLHttpRequest(); ```
然后我们获取到该对象后，可以使用open方法来指定请求的方式和请求的URL：
``` xhr.open('GET', '/user?id=1', true); ```
open方法有三个参数，第一个参数是请求方式，第二个参数是请求的URL，第三个参数表示是否使用异步请求。
为什么要用ajax接着我们可以使用onreadystatechange方法监听状态变化：
``` adystatechange = function() {  if (adyState === XMLHttpRequest.DONE) {    console.sponseText);  } } ```
当readyState等于4时，代表服务器返回的数据已经完全接收，此时我们可以通过responseText属性访问服务器返回的数据。
最后我们调用send方法即可发送请求：
``` xhr.send(); ```
至此，我们已经完成了一次使用Ajax发送异步请求的流程。
三、优缺点分析
3.1 Axios的优缺点
Axios的使用非常简单，尤其是配合ES6的语法，更能发挥出其简洁的特点。在发送网络请求
时，Axios可以自动处理CSRF拦截、错误处理、请求和响应的拦截等问题。此外，Axios还支持Promise API，使得我们可以通过链式调用更加方便的管理网络请求。
但是Axios也存在缺点，比如一些低版本浏览器不支持Promise，需要手动进行兼容处理。另外Axios的体积比较大，需要引入完整的库，如果只是需要发送简单的网络请求，可能会引入过多的代码。
3.2 Ajax的优缺点
Ajax技术是前端开发的经典工具之一，它可以在不刷新页面的情况下实现局部更新，并且兼容性较强。Ajax还支持多种请求方式，比如GET、POST、PUT等，能够满足大多数的网络请求场景。
但是，Ajax的实现方式比较繁琐，需要手动创建XMLHttpRequest对象、监听readyState等属性的变化，同时需要手动处理错误、状态、超时等问题。此外，Ajax不能跨域请求，有一定的安全性问题。
四、总结
Axios和Ajax是我们在前端开发中常用的网络请求工具，各有优缺点。Axios相较于传统的Ajax和Fetch，提供了更多强大的功能，并且使用起来更加简单方便。但是Axios也存在缺点，比如一些低版本浏览器不支持Promise。Ajax相比Axios，实现较为繁琐，但却是前端开发的经典工具之一，也有着较强的兼容性和灵活性，我们可以根据具体的业务场景选择使用不同的工具。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。