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

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

1. Fetch API

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

基本用法：

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);
  });

参数

init对象的配置选项示例：

示例

GET 请求示例：

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

POST 请求示例：

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，它只会在网络错误或请求无法完成时拒绝。因此，你需要手动检查响应状态：

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 请求。

基本用法：

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

设置全局的 axios 默认值

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

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

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

// 第一种写法
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种写法完全等价

// 第一种写法
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);
});

执行多个并发请求

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])

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

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

1. 在 node_modules/axios/lib/defaults.js 找到的库的默认值

2. 实例的 defaults 属性

3. 请求的 config 参数

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

拦截器

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

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

可以在稍后移除拦截器：

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

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

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对象。当然这种方法太原始了，应该不会有人用了吧???

参数：

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

基本用法：

$.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 - 知乎