axios 和 ajax 的区别点总结

简介

在进行 AJAX（Asynchronous JavaScript and XML） 请求时，我们通常会使用 jQuery 或者原生的 XMLHttpRequest 对象进行请求。而 axios 是一个基于 Promise 的 HTTP 请求库，可以用于浏览器和 node.js 端。本文将会对比 axios 和 ajax 的区别点。

axios 和 ajax 的使用方法

在使用 axios 时，我们需要引入 axios 模块并创建 axios 对象进行请求。例如在浏览器端我们可以这样创建：

import axios from 'axios'

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response)
  })
  .catch(function (error) {
    console.log(error)
  })

而在使用 ajax 时，通常会使用 jQuery 的 ajax 方法进行请求：

$.ajax({
  url: '/user',
  type: 'GET',
  data: { ID: 12345 },
  success: function(response) {
    console.log(response)
  },
  error: function(error) {
    console.log(error)
  }
})

axios 和 ajax 的区别点总结

1. 底层实现不同

axios 是基于 Promise 封装的一个 HTTP 请求库，可以在浏览器和 node.js 环境下使用。axios 可以将 HTTP 请求的返回值封装到 Promise 对象中，使得我们可以方便地使用 async/await 进行网络请求。而 ajax 是基于原生的 XMLHttpRequest 对象封装的方法，只适用于浏览器环境。

1. 跨域请求方式不同

由于浏览器的同源策略限制，我们在进行跨域请求时，需要进行一系列的处理。在使用 axios 时，我们可以方便地通过设置 withCredentials 属性来开启跨域请求。而在使用 ajax 时，我们需要在服务器端设置响应头 Access-Control-Allow-Origin: * 或者设置代理，才能进行跨域请求。

示例说明

示例一

我们通过 axios 进行一个简单的 GET 请求来获取数据：

axios.get('/api/test')
  .then(function (response) {
    console.log(response.data)
  })
  .catch(function (error) {
    console.log(error)
  })

我们通过 ajax 进行一个简单的 GET 请求来获取数据：

$.ajax({
  url: '/api/test',
  type: 'GET',
  success: function(response) {
    console.log(response)
  },
  error: function(error) {
    console.log(error)
  }
})

可以看到，在使用 axios 时，我们可以直接从 response 中获取到请求的数据；而在使用 ajax 时，需要从 response.responseText 中获取到请求的数据。

示例二

我们通过 axios 进行一个简单的 POST 请求来提交表单数据：

axios.post('/api/test', {
  name: 'test',
  age: 20
})
.then(function (response) {
  console.log(response.data)
})
.catch(function (error) {
  console.log(error)
})

我们通过 ajax 进行一个简单的 POST 请求来提交表单数据：

$.ajax({
  url: '/api/test',
  type: 'POST',
  data: {
    name: 'test',
    age: 20
  },
  success: function(response) {
    console.log(response)
  },
  error: function(error) {
    console.log(error)
  }
})

可以看到，在提交表单数据时，使用 axios 可以直接将数据传递给 post 方法进行提交；而在使用 ajax 时，需要在 data 属性中进行设置。