fetch、axios和ajax三种网络请求方式详解

fetch、axios 和 ajax 是三种常用的在前端发送网络请求的方法。它们各有特点和适用场景：

1. Fetch API

fetch 是一个现代的 JavaScript API，用于在浏览器中发起网络请求。它返回一个 Promise 对象，使得异步请求更加简洁和易于管理。

基本用法：

javascript 复制代码

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
  });

参数

参数名	描述	必填	示例/选项
resource	请求的URL，可以是相对路径或绝对路径。	是	`/path/to/resource`
init	一个对象，包含了请求的配置选项，如方法、头部、模式、凭据等。	否	`{ <配置选项> }`

init对象的配置选项示例：

配置选项	描述	默认值/示例
method	请求使用的方法，如`GET`、`POST`等。	`GET`
headers	请求的头信息，是一个对象，例如`{ "Content-Type": "application/json" }`。	`{}`
mode	请求的模式，如`cors`、`no-cors`、`same-origin`等。	`cors`
credentials	请求是否携带凭据，如`omit`、`same-origin`、`include`等。	`same-origin`
body	请求的body信息，可以是`Blob`、`BufferSource`、`FormData`、`URLSearchParams`、`USVString`中的一个。
cache	请求的缓存模式，如`default`、`no-store`、`reload`等。	`default`

示例

GET 请求示例：

javascript 复制代码

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

POST 请求示例：

javascript 复制代码

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    key1: 'value1',
    key2: 'value2'
  })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

错误处理：

fetch 不会在响应状态码为 4xx 或 5xx 时拒绝 Promise，它只会在网络错误或请求无法完成时拒绝。因此，你需要手动检查响应状态：

javascript 复制代码

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

注意事项

fetch 不支持上传文件的进度事件，如果你需要这些功能，可以考虑使用 XMLHttpRequest 或第三方库。
fetch 默认不允许跨域请求，除非你在服务器端设置了适当的 CORS 头部。
fetch 返回的 Response 对象包含了 json()、text()、blob() 等方法，用于处理不同类型的响应数据。

特点：

基于 Promise 实现，支持异步操作。
支持现代的网络功能，如 AbortController 用于取消请求。
原生支持流式处理，可以处理大文件。
需要手动处理错误和状态码（例如，需要检查 response.ok）。
浏览器原生支持，不需要额外的库。

2. Axios

axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 node.js。它提供了更丰富的功能和更简单的 API 来处理 HTTP 请求。

基本用法：

javascript 复制代码

axios.get('https://example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

设置全局的 axios 默认值

text 复制代码

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

注：axios 的 headers的 content-type 默认是 "application/json "

默认情况下，axios将JavaScript对象序列化为JSON，如果是get请求，对请求参数不用做任何处理，但是如果是post请求，并且Content-Type 为application/x-www-form-urlencoded，需要使用URLSearchParams API格式化请求参数, 否则Content-Type依然是application/json

javascript 复制代码

var params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');

get请求，以下3中写法完全等价

javascript 复制代码

// 第一种写法
axios.get('/user?id=12345&name=xiaoming')
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

// 第二种写法
axios.get('/user', {
    params: {
      id: '12345'，
      name: 'xiaoming'
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

// 第三种写法
axios({
    url: '/user',
    method: 'get',
    params: {
      id: '12345'，
      name: 'xiaoming'
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

post请求，以下2种写法完全等价

javascript 复制代码

// 第一种写法
axios({
    url: '/user',
    method: 'post',
    headers: {
        'Content-Type': 'application/json'
    },
    data: {
      id: '12345'，
      name: 'xiaoming'
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

// 第二种写法
var url = '/user';
var data = {
      id: '12345'，
      name: 'xiaoming'
    };
axios.post(url, data, {
       headers: {
        'Content-Type': 'application/json'
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

执行多个并发请求

javascript 复制代码

function getUserAccount() {
  return axios.get('/user/12345');
}
 
function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}
 
axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
}));

创建实例

可以使用自定义配置新建一个 axios 实例

axios.create([config])

javascript 复制代码

var instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

配置会以一个优先顺序进行合并，顺序由低到高为

在 node_modules/axios/lib/defaults.js 找到的库的默认值
实例的 defaults 属性
请求的 config 参数

javascript 复制代码

// 使用由库提供的配置的默认值来创建实例
// 此时超时配置的默认值是 `0`
var instance = axios.create();
 
// 覆写库的超时默认值
// 现在，所有请求都会等待 2.5 秒
instance.defaults.timeout = 2500;
 
// 为已知需要花费很长时间的请求覆写超时设置
instance.get('/longRequest', {
  timeout: 5000
});

拦截器

在请求发出之前或响应被 then 或 catch 处理前拦截它们做预处理。

javascript 复制代码

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
  }, function (error) {
    // 对请求错误做些什么
  });
 
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
  }, function (error) {
    // 对响应错误做点什么
  });

可以在稍后移除拦截器：

javascript 复制代码

var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

可以为自定义 axios 实例添加拦截器

javascript 复制代码

var instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

特点：

基于 Promise 实现，支持异步操作。
支持请求和响应的拦截。
转换请求和响应数据（例如，自动转换 JSON）。
客户端支持防御 XSRF。
支持请求取消。
需要安装额外的库（通过 npm 或 yarn）。

3. jQuery Ajax

ajax 是 jQuery 库提供的一个方法，用于发送异步 HTTP 请求。它是一个较为传统的解决方案，依赖于 jQuery。

其实有两种Ajax，另外一种是使用 XMLHttpRequest 对象来异步地发送和接收数据。这是 Ajax 最初的含义，对于IE7+和其他浏览器，可以直接使用XMLHttpRequest对象，对于IE6及以前的浏览器，使用ActiveXObject对象。当然这种方法太原始了，应该不会有人用了吧???

参数：

javascript 复制代码

$.ajax({
        url:"",
        type:"GET",
        contentType: '',
        async:true,
        data:{},
        dataType:"",
        success: function(){
        }
});

参数名	描述	必填	默认值/示例
url	规定把请求发送到哪个URL。	是
type	以什么样的方式获取数据，可以是`get`或`post`。	否	`get`/`post`
contentType	发送`POST`请求的格式。	否	`application/x-www-form-urlencoded; charset=UTF-8`
async	是否异步执行`AJAX`请求。	否	`true`
data	发送的数据，可以是字符串、数组或对象（object）。如果是`GET`请求，data将被转换成query附加到URL上；如果是`POST`请求，根据contentType把data序列化成合适的格式。	否
dataType	接收的数据格式，可以指定为`html`、`xml`、`json`、`text`等。	否	根据响应的Content-Type猜测
success	执行成功时调用的函数，返回的数据可以作为该函数的参数。	否

基本用法：

javascript 复制代码

$.ajax({
  url: 'https://example.com/data',
  method: 'GET',
  success: function(data) {
    console.log(data);
  },
  error: function(error) {
    console.error('Error:', error);
  }
});

特点：

基于回调函数实现，不支持 Promise。
需要依赖 jQuery 库。
提供了丰富的配置选项，如 dataType、contentType 等。
支持多种类型的请求和响应处理。
由于是基于回调，可能不如 Promise 那样易于管理异步操作。
默认不带cookie，使用时需要设置。
没有办法检测请求的进度，无法取消或超时处理。
针对 mvc 编程，由于近来vue和React的兴起，不符合mvvm前端开发流程

适用场景:

1. Fetch API

fetch 是一个原生的 JavaScript API，适用于如果你想要使用现代的、简洁的 API 进行网络请求时或者处理流式数据或二进制数据时

2. Axios

适用于需要一个易于配置和扩展的 HTTP 客户端时以及拦截请求或响应以处理身份验证、日志记录等任务时。

3. jQuery $.ajax()

适用于使用 jQuery 的旧项目，并且需要进行网络请求时或者在旧的浏览器环境中。

参考文章：

前后端数据交互(六)------ajax 、fetch 和 axios 优缺点及比较-腾讯云开发者社区-腾讯云

javascript - Fetch还是Axios------哪个更适合HTTP请求？ - 程序员张张 - SegmentFault 思否

一文秒懂 ajax, fetch, axios - 知乎