前端同步发送HTTP请求 Ajax、Fetch和Axios实现HTTP同步请求

同步发送HTTP请求

同步发送HTTP请求,是指在发送请求后,程序会等待服务器响应并接收完整的响应数据后才会继续执行后续代码。

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>同步请求</title>
    <style>
        .container{
            margin: 0 auto;
            width: 400px;
            height: 300px;
            display:flex;
            flex-direction: column;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <div class="container">
        <div style="flex:1;background-color:coral">
            <button onclick="asyncAjax1()">Ajax同步请求1,用于判断资源是否存在~</button><br/>
            <button onclick="asyncAjax2()">Ajax同步请求2,直接返回内容~</button><br/>
            <button onclick="asyncFetch()">Fetch同步请求,直接返回内容~</button><br/>
            <button onclick="asyncAxios()">Axios同步请求,直接返回内容~</button>
        </div>
        <div id="output" style="flex:1;background-color: aqua;">
        </div>
    </div>
    <script type="text/javascript">
        function asyncAjax1(){
            console.log('asyncAjax1()');
            const url = '/index.html';
            try{
                var request = new XMLHttpRequest();
                // false表示同步
                request.open('GET', url, false);
                request.send(null);
                if (request.status === 200) {
                    // return true;
                    document.getElementById('output').innerHTML='success!';
                } else {
                    // return false;
                }
            }catch (e){
                console.log('错误:',e);
                // return false;
            }
        }
        asyncAjax2 = () => {
            console.log('asyncAjax2()');
            const url = '/api/demo/demo01';
            let content = '';
            try{
                var xhRequest = new XMLHttpRequest();
                xhRequest.open('POST', url, false);
                xhRequest.setRequestHeader("Content-Type", "application/json");
                var data = JSON.stringify({
                    key: "value"
                });
                xhRequest.send(data);
                if (xhRequest.readyState === 4 && xhRequest.status === 200) {
                    content = xhRequest.responseText;
                } 
            }catch (e){
                console.log('错误:',e);
            }
            document.getElementById('output').innerHTML=content;
        }
        asyncFetch = async ()=>{
            console.log('asyncFetch()');
            const url = '/api/demo/demo01';
            let content = '';
            try{
                const response = await fetch(url, {
                        method: 'POST', // 或 'GET'
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({
                            key: 'value'
                        }),
                    });
                if (!response.ok) {
                    throw new Error(`HTTP error! Status: ${response.status}`);
                }
                // console.log(await response.text());
                content = JSON.stringify(await response.json());
                
            }catch(e){
                console.log('错误:',e);
            }
            document.getElementById('output').innerHTML=content;
        }
        asyncAxios = async ()=>{
            console.log('asyncAxios()');
            const url = '/api/demo/demo01';
            let content = '';
            try {
                const response = await axios.post(url, {key: 'value'});
                content = JSON.stringify(response.data);
            } catch (e) {
                console.log('错误:',e);
            }
            document.getElementById('output').innerHTML=content;
        }
    </script>
</body>
</html>
相关推荐
90后的晨仔16 分钟前
深入浅出 Vue 的 computed:不仅仅是“计算属性”那么简单!
前端·vue.js
Nan_Shu_61431 分钟前
学习:入门uniapp Vue3组合式API版本(17)
前端·vue.js·学习·uni-app
止观止1 小时前
Remix框架:高性能React全栈开发实战
前端·react.js·前端框架·remix
萌萌哒草头将军1 小时前
🚀🚀🚀 深入探索 Node.js v22.18.0 新特性;默认支持运行 ts 文件了!
前端·typescript·node.js
安心不心安2 小时前
React ahooks——副作用类hooks之useThrottleFn
前端·javascript·react.js
秋田君2 小时前
Vue3 + WebSocket网页接入弹窗客服功能的完整实现
前端·javascript·websocket·网络协议·学习
浪里行舟2 小时前
一网打尽 Promise 组合技:race vs any, all vs allSettled,再也不迷糊!
前端·javascript·vue.js
Antonio9152 小时前
【网络编程】WebSocket 实现简易Web多人聊天室
前端·网络·c++·websocket
tianzhiyi1989sq4 小时前
Vue3 Composition API
前端·javascript·vue.js