ajax、axios、fetch的区别

最新推荐文章于 2024-01-07 12:14:33 发布

qinyuHTML

最新推荐文章于 2024-01-07 12:14:33 发布

阅读量209

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qinyuhua93/article/details/103799843

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1. ajax

使用步骤

创建 XmlHttpRequest 对象
调用 open 方法设置基本请求信息
设置发送的数据，发送请求
注册监听的回调函数
拿到返回值，对页面进行更新

//1.创建Ajax对象
if (window.XMLHttpRequest) {
  var oAjax = new XMLHttpRequest();
} else {
  var oAjax = new ActiveXObject('Microsoft.XMLHTTP');
}

//2.连接服务器（打开和服务器的连接）
oAjax.open('GET', url, true);

//3.发送
oAjax.send();

//4.接收
oAjax.onreadystatechange = function() {
  if (oAjax.readyState == 4) {
    if (oAjax.status == 200) {
      //alert('成功了：'+oAjax.responseText);
      fnSucc(oAjax.responseText);
    } else {
      //alert('失败了');
      if (fnFaild) {
        fnFaild();
      }
    }
  }
};

优缺点：

本身是针对MVC的编程，不符合现在前端MVVM的浪潮
基于原生的XHR开发，XHR本身的架构不够清晰，已经有了fetch的替代方案

2， axios

Axios 是一个基于 promise 的 HTTP库，可以再浏览器和Node.js中使用。

特性

从浏览器中创建XMLHttpRequests
从Node.js创建 http 请求
支持Promise API
拦截请求和响应
转换请求数据和相应数据
取消请求
自动转换JSON数据
客户端支持防御 XSRF

// 上面的请求也可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .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) {
    // 两个请求现在都执行完成
  }));

优缺点：

从 node.js 创建 http请求
支持Promise API
客户端支持防止CSRF
提供了一些并发请求的接口

3. fetch

Fetch API提供了一个JavaScript 接口，用于访问和操纵HTTP 管道的部分，例如请求和响应。

它提供了一个全局的fetch()方法，该方法提供了一种简单，合理的方式来跨网络以不获取资源。
fetch 是一种 HTTP 数据请求方式，是 XMLHTTPRequest 的一种替代方案。
fetch 不是 ajax 的进一步封装，而是原生 js。
Fetch 函数就是原生 js。

fetch(url, option)
    .then(checkStatus) // 检查错误码
    .then(response => responseJson(response));

当接收到一个代表错误的HTTP状态码时，从fetch()返回的Promise 不会被标记为reject，即使该HTTP相应的状态码是404 或者 500。
相反，它会将Promise状态标记为 resolve,仅当网络故障时或请求被阻止时，才会标记为reject。

// 因此可以多加一个判断，判断状态码
export const checkStatus = response => {
  const { status } = response;
  if (status >= 200 && status < 300) {
    // 调用成功
    return response;
  }
  const errortext = codeMessage[status] || response.statusText;
  const error = new Error();
  error.name = status;
  error.response = response;
  error.errortext = errortext;
  throw error;
};

默认情况加， fetch不会从服务端发送或接受任何cookie，如果站点依赖于用户session，则会导致未经认证的请求。

/**
 * 处理response
 * @param response
 * @param type
 */
function responseJson(response, type) {
  if (response && isEmptyObject(response)) {
    // 初始化
    if (type && type === 'text') {
      return response.text();
    }
    if (type && type === 'blob') {
      return response.blob();
    }
    return response.json();
  }
  if (type && type === 'blob') {
    return response.blob();
  }
  errorCallback(response);
  return null;
}

response 这里的response 只是一个HTTP响应，而不是真的JSON。为了获取JSON的内容我们需要使用对应的 .json() 、.text() 、 .blob()方法。

优缺点：

符合关注分离，没有将输入、输出和用事件来跟踪的状态混在一个对象里。
更加底层，提供了API丰富（request、response）
脱离了XHR，是ES规范里新的实现方式
1. fetch 只对网络请求报错，对400/500 都当成功的请求，需要封装去处理
1. fetch 默认不会带cookie，需要添加配置项
1. fetch不支持abort，不支持超时控制，使用setTimeout 及 Promise.reject 的实现的超时控制并不能阻止请求过程继续在后台运行，造成了量的浪费
1. fetch没有办法原生检测请求的进度，而XHR可以