说说axios、ajax、fetch的关系

作者: 沐雨芝录 | 来源:发表于2019-03-06 18:49 被阅读66次

axiosajax 都是对XMLHttpRequest这个对象的封装;而 fetch 则是window下的一个方法,是一个更底层的方法。

ajax

 其实重点就是首先实例一个XMLHttpRequest对象,用其中的 open 方法建立连接; send 方法传输数据(前端传到后台);然后再利用 onreadystatechange 监听readyState的变化,当其为 4 时,代表请求完成;

实现ajax的get请求

function ajax(url,suc,fail) {
        var xhr = new XMLHttpRequest();
        xhr.open('GET',url, true);
        xhr.onreadystatechange = function () {
            if(xhr.readyState == 4){
                if(xhr.status == 200){
                    suc(xhr.responseText)
                } else {
                    console.log(err);
                    fail(xhr.responseText);
                }
            }
        };
        xhr.send(null);
    }

fetch

fetch 是全局量 window 的一个方法,它的主要特点有:
1、第一个参数是URL:
2、第二个是可选参数,可以控制不同配置的 init 对象
3、使用了 JavaScript Promises 来处理结果/回调

封装Ajax,实现Fetch

function fetch(url) {
    return new Promise(function (resolve,reject) {
        ajax(url,function (res) {
            resolve(res);
        },function (err) {
            console.log(err);
            reject(err);
        })
    })
}

axios

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

封装Ajax,实现Axios进行回调

var Axios = {
        get: function(url) {
            return new Promise((resolve, reject) => {
                var xhr = new XMLHttpRequest();
                xhr.open('GET', url, true);
                xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        // 从服务器获得数据
                        resolve(xhr.responseText)
                    }
                };
                xhr.send();
            })
        },
    }

相关文章

  • 说说axios、ajax、fetch的关系

    axios 和 ajax 都是对XMLHttpRequest这个对象的封装;而 fetch 则是window下的一...

  • 【vue学习】axios

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

  • React中的“ajax”

    React没有ajax模块 集成其他的js库(如axios/fetch/jquery),发送ajax请求axios...

  • 2019-03-08

    ajax和axios、fetch的区别 xhr状态和事件触发

  • 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 等开源...

  • Ajax, Axios, Fetch区别

    本文将会根据自己的理解,来阐述Ajax, Axios, Fetch他们之间的区别 1 、JQuery ajax A...

  • 前后端交互

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

网友评论

    本文标题:说说axios、ajax、fetch的关系

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