前端同步发送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>
相关推荐
小蜜蜂嗡嗡25 分钟前
【flutter对屏幕底部有手势区域(如:一条横杠)导致出现重叠遮挡】
前端·javascript·flutter
伍哥的传说1 小时前
Vue 3 useModel vs defineModel:选择正确的双向绑定方案
前端·javascript·vue.js·definemodel对比·usemodel教程·vue3.4新特性·vue双向绑定
胡gh6 小时前
页面卡成PPT?重排重绘惹的祸!依旧性能优化
前端·javascript·面试
言兴7 小时前
# 深度解析 ECharts:从零到一构建企业级数据可视化看板
前端·javascript·面试
山有木兮木有枝_7 小时前
TailWind CSS
前端·css·postcss
烛阴8 小时前
TypeScript 的“读心术”:让类型在代码中“流动”起来
前端·javascript·typescript
杨荧8 小时前
基于Python的农作物病虫害防治网站 Python+Django+Vue.js
大数据·前端·vue.js·爬虫·python
Moment9 小时前
毕业一年了,分享一下我的四个开源项目!😊😊😊
前端·后端·开源
程序视点9 小时前
Escrcpy 3.0投屏控制软件使用教程:无线/有线连接+虚拟显示功能详解
前端·后端
silent_missile10 小时前
element-plus穿梭框transfer的调整
前端·javascript·vue.js