日常积累三人行必有我师焉网络(socket、websocket、http、https)

说说axios、ajax、fetch的关系

2019-03-06  本文已影响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();
            })
        },
    }
上一篇下一篇

猜你喜欢

热点阅读