axios与fetch-526互联

axios

　　axios是什么

　　　　axios是一个基于PRominse的HTTP库，可以用在浏览器和node.js中

　　　　第三方Ajax库
　　　　http://www.axios-js.com/zh-cn/docs/

　　axios的基本用法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>axios</title>
    </head>
    <body>
        <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
        <script src="https://unpkg.com/axios@1.3.4/dist/axios.min.js"></script>
        <script>
            //1.axios是什么
            //axios是一个基于PRominse的HTTP库，可以用在浏览器和node.js中
            //第三方Ajax库

            //http://www.axios-js.com/zh-cn/docs/

            //2.axios的基本用法
            //引入axios
            //console.log(axios);

            const url = 'https://www.imooc.com/api/http/search/suggest?words=js'
            // axios(url,{
            //     method:'post',
            //     //请求时的头信息
            //     headers:{
            //         'Content-Type':'application/x-www-form-urlencoded'
            //         /* 'Content-Type':application/JSON */
            //     },
            //     //通过请求头携带的数据
            //     params:{
            //         username:'lyw'
            //     },
            //     //通过请求体携带的数据
            //     // data:{
            //     //     age:18,
            //     //     sex:'male' 
            //     // }

            //     data:'age=18&sex=male',

            //     //timeout:10

            //     //withCredentials:true

            //     }).then(Response =>{
            //         console.log(Response);
            //         console.log(Response.data.data);
            //     }).catch(err => {
            //         console.log(err);
            //     });
            // axios.get(url,{
            //     params:{
            //         username='lyw'
            //     }
            // })
            // .then(Response => {
            //     console.log(Response);
            // });
            
            axios.post('https://www.imooc.com/api/http/search/suggest?words=js',{
                username:'alex'
            }).then(Response => {
                console.log(Response);
            }).catch(err =>{
                console.log(err);
            });
            
            // axios.put()
            // axios.delete()
        </script>
    </body>
</html>

fetch

1.Fetch是什么
Fetch也是前后端通信的一种方式
Fetch是ajax(xmlhttprequest)的一种替代方案，它是基于promise的
Ajax的兼容性比Fetch好，同时Fetch原生没有提供abort和timeout

2.Fetch的基本用法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Fetch</title>
    </head>
    <body>
        <script>
                // Fetch
                // 1.Fetch是什么
                // Fetch也是前后端通信的一种方式
                // Fetch是ajax(xmlhttprequest)的一种替代方案，它是基于promise的
        
                // Ajax的兼容性比Fetch好，同时Fetch原生没有提供abort和timeout
        
                // 2.Fetch的基本用法
                // fetch调用后返回的是promise对象，因为它是基于promise
                const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
        
                // body: (...)  body数据流 只能读取一次
                // bodyUsed: false   是否读取的标志，读取后为false
                // ok: true
                // status: 200  状态码
                // statusText: "OK"  状态文本
                // type: "cors"
                // url: "https://www.im
        
        
                // 第二个参数用来设置fetch
                // 还可以传formdata数据  body:fd
                const fd=new FormData();
                fetch(url, {
                        method: 'post',
                        body: 'username=alex&age=18',
                        // 如果想传json格式要设置stringify
                        // body:JSON.stringify({username:'alex'}),
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                            //    'Content-Type': 'application/json'
                        },
                        // 如果要跨域资源共享要设置cors，但是默认都是cors
                        mode:'cors',
                        // 跨域是否携带cookie 不是布尔值要携带需要设置成字符串的include
                        credentials:'include'
                    })
                    .then(response => {
                        console.log(response);
                        // body/bodyUsed  body请求体  
                        // body 只能读一次，读过之后就不让再读了，bodyUsed变成true
        
                        // ok
                        // 如果为 true，表示可以读取数据，不用再去判断 HTTP 状态码了
                        if (response.ok) {
                            // response.json是读取body的数据，那么返回后是一个promise对象，需要在then中输出
                            return response.json(); //返回的是json数据
                            // return response.text(); 返回的是文本类型
                        } else {
                            throw new Error(`HTTP CODE异常${response.status}`);
                        }
                    }).then((data => {
                        console.log(data);
                    }))
                    .catch(err => {
                        console.log(err);
                    })
            </script>

    </body>
</html>