美文网首页
获取数据的方式JQ,fetch,ajax,axios比较

获取数据的方式JQ,fetch,ajax,axios比较

作者: 芥末的糖 | 来源:发表于2018-11-16 21:48 被阅读0次

1 JQuery ajax

$.ajax({
   type: 'POST',
   url: url,
   data: data,
   dataType: dataType,
   success: function () {},
   error: function () {}
});

1.这东西很少用了,但是对于原生的XHR的复杂封装来讲,还是蛮好用的
2.不符合现在的MVVM框架的思想,要用就得引入JQ

2. Fetch

try {
  let response = await fetch(url);
  let data = response.json();
  console.log(data);
} catch(e) {
  console.log("Oops, error", e);
}

1.fetch是一个promise 的封装,不支持低版本
2.fetch没有办法原生监测请求的进度

3.axios

axios({
    method: 'get',
    url: '/user',
    data: {
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

Vue2.0之后,尤雨溪推荐大家用axios替换JQuery ajax,

1.从 node.js 创建 http 请求
2.支持 Promise API
3.客户端支持防止CSRF
4.提供了一些并发请求的接口(重要,方便了很多的操作)

vue全家桶里的Vue-resource

The plugin for Vue.js provides services for making web requests and handle responses using a XMLHttpRequest or JSONP.

Vue-resource

{
  // GET /someUrl
  this.$http.get('/someUrl').then(response => {
 
    // get body data
    this.someData = response.body;
 
  }, response => {
    // error callback
  });
}

相关文章

  • 获取数据的方式JQ,fetch,ajax,axios比较

    1 JQuery ajax 1.这东西很少用了,但是对于原生的XHR的复杂封装来讲,还是蛮好用的2.不符合现在的M...

  • vue学习4

    接口调用方式 原生ajax 基于jQuery的ajax fetch axios 异步 JavaScript的执行环...

  • Vue接口调用方式

    接口调用方式 原生ajax 基于jQuery的ajax fetch axios 异步 JavaScript的执行环...

  • React第五天 (偷懒了一天)

    React与后台数据交互 axios: fetch: 传统 Ajax 已死,Fetch 永生:https://se...

  • 前端网络请求

    前端网络请求的方式主要有 Ajax ,jQuery封装的 Ajax,fetch,axios、request 等开源...

  • 前后端交互

    1 前后端交互模式 1.1接口调用方式: 原生AJAX 基于JQuery的AJAX fetch axios 原生的...

  • 前端学习笔记二十六-Vue之前后端交互

    一、前后端交互模式 接口调用方式 原生ajax 基于jQuery的ajax fetch axios 异步 Java...

  • Vue数据请求

    1 - 前端接口调用方式 原生ajax 基于jQuery的ajax fetch axios 2 - 接口调用-fe...

  • 【vue学习】axios

    Ajax、fetch、axios的区别与优缺点 axios的github地址 原生ajax jqueryAjax ...

  • vue ajax请求

    应用fetch或axios 获取数据axios:http://blog.csdn.net/liaoxiaojuan...

网友评论

      本文标题:获取数据的方式JQ,fetch,ajax,axios比较

      本文链接:https://www.haomeiwen.com/subject/tkevfqtx.html