原生js简单实现ajax请求

前言

作为前端开发，向服务端发起请求这是必不可少的一个步骤，通过请求，服务端端返回给我们相应的数据，根据数据我们做出相应的操作。一般来说，现在很多前端开发者发起请求时都是采用第三方库来实现，比如axios、jQuery库等等。

利用原生JavaScript实现ajax请求

XMLHttpRequest对象

原利用一个XMLHttpRequest的对象进行后台与服务端数据的交换，目前所有浏览器都支持XMLHttpRequest，具体代码可参考如下：

function initOption(options) {
    options.type = options.type.toUpperCase() || 'GET';
    options.async = options.async || true;
    options.data = options.data || {};
    options.dataType = options.dataType || 'JSON';
    options.timeout = options.timeout || 10000;
    options.complete = options.complete || function(){};
    options.success = options.success || function(){};
    options.error = options.error || function(){};
    return options
}
function formatParams(data) {
    if (typeof data === 'object') {
        const arr = [];
        for (var key in data) {
            arr.push(key + "=" + data[key]);
        }
        return arr.join("&");
    }
    return data;
}
function ajaxXhr(url, options = {}) {
    // 初始化参数, 添加默认值
    options = initOption(options)
    // 初始化异步对象
    const xhr = new XMLHttpRequest();
    // 参数处理
    const data = formatParams(options.data);
    // 需要判断get和post
    if (options.type === 'GET') {
        // 打开请求，如果url已经有参数了，直接追加，没有从问号开始拼接
        if (url.indexOf('?') !== -1) {
            xhr.open(options.type, url + '&' + data);
        } else {
            xhr.open(options.type, url + '?' + data);
        }
        xhr.send();
    }
    if (options.type === 'POST') {
        xhr.open(options.type, url);
        // 设置请求头
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        xhr.send(data);
    }
    xhr.onreadystatechange = function() {
        // readyState五个状态 
        // 0:未初始化(Uninitialized)。尚未调用 open()方法。
        // 1:已打开(Open)。已调用 open()方法，尚未调用 send()方法。
        // 2:已发送(Sent)。已调用 send()方法，尚未收到响应。
        // 3:接收中(Receiving)。已经收到部分响应。
        // 4:完成(Complete)。已经收到所有响应，可以使用了。
        if (xhr.readyState === 4) {
            options.complete();
            if (xhr.status === 200) {
                options.success(xhr.responseText);
            } else {
                options.error(xhr, xhr.status, xhr.statusText);
            }
        }
    }
}
              
复制代码

fetch

Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应。它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。

function initOption(options) {
    options.type = options.type.toUpperCase() || 'GET';
    options.headers = options.headers || {};
    options.data = options.data || {};
    options.mode = options.mode || 'cors';
    options.credentials = options.credentials || 'manual';
    options.cache = options.cache || 'default';
    return options
}
 function formatParams(data) {
    if (typeof data === 'object') {
        const arr = [];
        for (var key in data) {
            arr.push(key + "=" + data[key]);
        }
        return arr.join("&");
    }
    return data;
}  
function ajaxFetch(url, options) {
        // 初始化参数, 添加默认值
        options = initOption(options)  
        // 参数处理
        const data = formatParams(options.data);
        let fetchBody = null
        if (options.type === 'GET') {
            if (url.indexOf('?') !== -1) {
                url = `${url}&${data}`
            } else {
                url = `${url}?${data}`
            }
        }
        if (options.type === 'POST') {
            fetchBody = data
        }
        fetch(url, Object.assign({ body: fetchBody }, options)).then((res) => {
            console.log('res', res)
        }).catch((err) => {
            console.log('err', err)
        })
    } 
复制代码

参考文档

《JavaScript高级程序设计（第4版）》

使用 Fetch()