异步传输放弃jQuery使用新的fetch()方法发送AJAX吧

网站技术 ayflying 2605℃ 评论

jQuery让AJAX变得更加的简单,但是一直使用的早期的XMLHttpRequest (XHR)提供的ajax方式进行异步操作。

Fetch API 使用了 Promises,它让接口更简单、简洁,避免了回调的复杂性,省去了使用复杂的 XMLHttpRequest API。

如果需要抛弃那些古董浏览器,就赶紧换上Fetch()方法把,不用为了单独一个异步功能引用整个jQuery库了。

下面提供一个简单的例子:

fetch("http://blog.7cuu.com/").then(function(data){
    console.log(data);
});

看看浏览器console调试页面是不是出现了想要的数据,虽然是新特新,但是也是有跨域限制的改成自己需要访问的地址就好了。

如果要获取json数据呢,就看下面的代码:

fetch("http://blog.7cuu.com/").then(function(data){
    data.json().then(function(json){
        console.log(data);
    });
});


来一个get和post的获取方法吧

function getJson(url, callback) {
    fetch(url, {}).then((res) => {
        res.json().then((res) => {
            if(callback != null){
            callback(res);
          }
        });
    })
}

function postJson(url, body, callback) {
    fetch(url, {
        method: "POST",
        mode: 'cors',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(body)
    }).then((res) => {
        res.json().then((res) => {
          if(callback != null){
            callback(res);
          }
        })
    })
}


使用同步方法请求

/**
 * 网络请求,支持同步返回
 * @param data [url,method,header,data,@success,@fail]
 */
async function requset(data) {
    //格式化body字段
    let body = data.data ? data.data : [];
    body = Object.keys(body).map(key => {
        return key + "=" + body[key];
    }).join('&');

    //异步
    return new Promise((resolve, reject) => {
        fetch(data.url, {
            method: data.method ? data.method : "GET",
            //mode: 'cors',
            headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
            body: body,
        }).then(res => {
            res.json().then(res => {
                //成功抛出
                if (data.success != null) {
                    data.success(res);
                }
                return resolve(res);
            })
        }).catch(res => {
            //异常抛出
            if (data.fail != null) {
                data.fail(res);
            }
            return reject(res);
        });
    });
}



至于post或者更多高级方法下次再写吧。



转载请注明:七彩悠悠博客 | 心悠悠 情悠悠 » 异步传输放弃jQuery使用新的fetch()方法发送AJAX吧

高效,专业,悠悠博客

联系我们