Fetch数据请求

2019-12-30  本文已影响0人  1CC4

fetch:是一种HTTP数据请求的方式,是XMLHttpRequest的一种替代方案。
fetch:不是ajax的进一步封装,而是原生js
fetch函数:就是原生js使用promise进行的封装,没有使用XMLHttpRequest对象。

Fetch中文文档地址...

语法:

fetch(url,options).then(res => {        
          return res.json();          
        }).then(data =>{
            console.log(data);  
        }).catch( err => {
            console.log(err);
        })

示例:

    <div>
        <h2>fetch-es6异步通讯</h2>
        <p id="message"></p>
    </div>
    <script>
        const pElemnt = document.getElementById('message');
        const url = 'http://www.warmtel.com:8089/api/list';
        const options = {
            method: 'GET',
            headers: {
                'content-type':'application/x-www-form-urlencoded'
            }
        } 
        fetch(url,options).then(res => {
            if(res.ok){
                console.log(res);
                return res.json();
            }else{
                return Promise.reject('请求出错!');
            }
        }).then(data =>{
            console.log(typeof(data));
            pElemnt.innerHTML = JSON.stringify(data);
        }).catch( err => {
            console.log(err);
        })

    </script>
上一篇下一篇

猜你喜欢

热点阅读