美文网首页
用promise手写Ajax请求

用promise手写Ajax请求

作者: alokka | 来源:发表于2020-03-18 18:23 被阅读0次

js:

function lajax(options) {
    options = Object.assign({
        url: '',
        method: 'post', // 默认 post 请求 这个自定义 也可以是 get 也可以在调用的时候传
        async: true, // 请求同步还是异步,默认异步
        data: null,
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        progress: Function.prototype
    }, options);

    return new Promise((resolve, reject) => {
        // 1. 初始化一个XMLHttpRequest对象
        let xhr = new XMLHttpRequest;
        // 监听文件进度
        xhr.upload.onprogress = options.progress;
        // 2. 初始化一个请求
        xhr.open(options.method, options.url, options.async);
        if(options.method == 'post') {
            // post 需要加请求头
            Object.keys(options.headers).forEach(key => {
                xhr.setRequestHeader(key, options.headers[key]);
            })
        }
        xhr.onreadystatechange = () => {
            if(xhr.readyState == 4) {
                if(xhr.status == 200 || xhr.status == 304) {
                    resolve(JSON.parse(xhr.responseText));
                }else {
                    reject(xhr);
                }
            }
        }
        xhr.send(options.data);
    }).catch((e) => {});
}

涉及到的方法可以去MDN上查看

调用 lajax:

lajax({
url: 'XXXXXXXXXXXXXXX',
method: 'get',
success: data => {
    console.log(data)
}
})

相关文章

  • 用promise手写Ajax请求

    首先祭上两篇参考文献XHR对象实例所有的配置、属性、方法、回调和不可变值 使用promise手动封装ajax函数...

  • 用promise手写Ajax请求

    js: 涉及到的方法可以去MDN上查看 调用 lajax:

  • 异步编程笔记

    环境:chrome 80演习:用Promise async/await封装$.ajax Promise 第一次请求...

  • 第六天

    1、手写promise封装ajax请求 2、在地址栏输入网址敲回车发生了什么? 1.输入url地址后,首先...

  • Promise解析

    Promise使用场景 回调地狱:当你发送一个ajax请求,继而又需要请求一个ajax请求,并且此ajax请求参数...

  • ES6

    AJAX 异步网络请求 Promise 使用了Promise对象之后可以链式调用的方式组织代码 Promise.a...

  • 异步编程解决方案Promise

    使用方法 状态(不可逆,暂不举例) 使用Promise优雅ajax请求 ajax请求 回调地狱 cllback h...

  • 自己动手封装AJAX

    一、手写AJAX 首先我们先用原生JS手写一个AJAX: 这是一个POST请求的AJAX,可以通过修改 open ...

  • 手写ajax请求

    1.XMLHttpRequest的发展 Level 1 受同源策略限制,不能发送跨域请求 不能发送二进制文件,只能...

  • promise封装原生ajax、jqueryAjax、axios

    原生js的ajax封装+promise 将原生js的ajax请求单独封装成一个数据请求的模块, 需要的时候直接调用...

网友评论

      本文标题:用promise手写Ajax请求

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