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

1. Fetch API

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

基本用法：

1
2
3
4
5
6
7
8
9
10
11
12
13
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 请求示例：

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

POST 请求示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
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，它只会在网络错误或请求无法完成时拒绝。因此，你需要手动检查响应状态：

1
2
3
4
5
6
7
8
9
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 请求。

基本用法：

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

设置全局的 axios 默认值

1
2
3
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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// 第一种写法
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种写法完全等价

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// 第一种写法
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);
});

执行多个并发请求

1
2
3
4
5
6
7
8
9
10
11
12
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])

1
2
3
4
5
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 参数

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

拦截器

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

1
2
3
4
5
6
7
8
9
10
11
12
13
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
  }, function (error) {
    // 对请求错误做些什么
  });
 
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
  }, function (error) {
    // 对响应错误做点什么
  });

可以在稍后移除拦截器：

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

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

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

1
2
3
4
5
6
7
8
9
10
$.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 执行成功时调用的函数，返回的数据可以作为该函数的参数。 否

基本用法：

1
2
3
4
5
6
7
8
9
10
$.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 - 知乎