使用promise封装 原生ajax,$.ajax(),以及fetch

Promise封装aiax

 let request = function (url, type = 'get', data) {
            return new Promise((resolve, reject) => {
                // 创建XMLHttpRequest对象
                let xhr = new XMLHttpRequest()
                // 建立连接
                xhr.open(type,url, true)
                // 发送请求
                xhr.send()
                // 监听状态
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4) {
                        if (xhr.status == 200) {
                            // 状态为4 200 返回数据
                            resolve(JSON.parse(xhr.response))
                        }
                    }
                }
            })
        }
        // 请求接口
        request('https://api.it120.cc/maxinglong/banner/list').then(res => {
            console.log(res);
        })

$.ajax

let request = function (url, type = 'get', data = '') {
        return new Promise((resolve, reject) => {
            // 封装jq ajax
                $.ajax({
                    type,
                    url,
                    async: true,
                    data,
                    success(res) { //成功的回调函数
                        // console.log(res)
                        resolve(res)
                    }
                })
    }
      // 请求接口
        request('https://api.it120.cc/maxinglong/banner/list').then(res => {
            console.log(res);
        })

fetch

与XMLHttpRequest(XHR)类似,fetch()方法允许你发出AJAX请求
讲点通俗的就是fetch是ajax的升级版

let request = function (url, type = 'get', data) {
            return fetch(url, {
                    method: type, // *GET, POST, PUT, DELETE, 等
                    headers: {
                        "Content-Type": "application/json",
                    }, // 请求头
                    body: data,
                }).then(res => {
                    // 判断状态码
                    if (res.status !== 200) {
                        console.log("存在一个问题,状态码为:" + res.status);
                        return;
                    }
                    //检查响应文本
                    res.json().then(function (arr) {
                        console.log(data);
                    });
                })
        }
    // 请求接口
request("https://api.it120.cc/maxinglong/banner/list") 
  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值