在浏览器执行js脚本的两种方式

简介: 【10月更文挑战第20天】本文介绍了在浏览器中执行HTTP请求的两种方式:`fetch`和`XMLHttpRequest`。`fetch`支持GET和POST请求,返回Promise对象,可以方便地处理异步操作。`XMLHttpRequest`则通过回调函数处理请求结果,适用于需要兼容旧浏览器的场景。文中还提供了具体的代码示例。

在浏览器执行js脚本的两种方式
15/100
发布文章
weixin_42551921
未选择文件

fetch请求get

在浏览器执行http请求,可以使用fetch函数;

fetch("url").then(response => response.text())
.then(data => console.log(JSON.parse(data)['status']))
.catch(error => console.error(error))

在这里插入图片描述
直接返回json数据:

fetch("url").then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))

执行两次:

fetch("https://1.com").then(response = >response.json()).then(data = >{
   
    let items = data.data.doc_list;
    items.forEach(item = >{
   
        if (item.doc_status == '4') {
   
            fetch("https://1.com").then(response = >console.log(response)).
            catch(error = >console.error(error))
        }
    })
}).
catch(error = >console.error(error))

定义这个技术,模拟手动删除数据:

for (let index = 1; index < 100; index++) {
   
 for(var t = Date.now();Date.now() - t <= 3000;);
    fetch("https://1.com/nshop/doc/getlist?sub_tab=2&pn=" + index + "&rn=10&query=&main_status=2&time_range=&buyout_show_type=1").then(response = >response.json()).then(data = >{
   
        let items = data.data.doc_list;
        console.log(items);
        if ( !! items) {
   
            items.forEach(item = >{
   
                if (item.doc_status == '4') {
   
                    fetch("https:/1.com/user/submit/newdocdelete?doc_id_str=" + item.doc_id + "&skip_fold_validate=1").then(response = >console.log(response)).
                    catch(error = >console.error(error))
                }
            })
        }
    }).
    catch(error = >console.error(error))
}

fetch请求post

// jsonplaceholder.typicode.com是一个测试网站
fetch('https://jsonplaceholder.typicode.com/users', {
   
  method: 'POST',
  headers: {
   
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
   
    name: 'John Doe',
    email: 'johndoe@example.com',
  })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

使用XMLHttpRequest

发起GET请求:

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/users');
xhr.onload = () => {
   
  if (xhr.status === 200) {
   
    console.log(xhr.responseText);
  } else {
   
    console.error(`Error: ${
     xhr.status}`);
  }
};
xhr.send();

发送POST请求:

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://jsonplaceholder.typicode.com/users');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = () => {
   
  if (xhr.status === 201) {
   
    console.log(xhr.responseText);
  } else {
   
    console.error(`Error: ${
     xhr.status}`);
  }
};
xhr.send(JSON.stringify({
   
  name: 'John Doe',
  email: 'johndoe@example.com',
}));

fetch请求get
在浏览器执行http请求,可以使用fetch函数;

fetch(“url”).then(response => response.text())
.then(data => console.log(JSON.parse(data)[‘status’]))
.catch(error => console.error(error))

在这里插入图片描述
直接返回json数据:

fetch(“url”).then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))

执行两次:

fetch("https://1.com").then(response = >response.json()).then(data = >{
let items = data.data.doc_list;
items.forEach(item = >{
if (item.doc_status == '4') {
fetch("https://1.com").then(response = >console.log(response)).
catch(error = >console.error(error))
}
})
}).
catch(error = >console.error(error))
定义这个技术,模拟手动删除数据:

for (let index = 1; index < 100; index++) {
for(var t = Date.now();Date.now() - t <= 3000;);
fetch("https://1.com/nshop/doc/getlist?sub_tab=2&pn=" + index + "&rn=10&query=&main_status=2&time_range=&buyout_show_type=1").then(response = >response.json()).then(data = >{
let items = data.data.doc_list;
console.log(items);
if ( !! items) {
items.forEach(item = >{
if (item.doc_status == '4') {
fetch("https:/1.com/user/submit/newdocdelete?doc_id_str=" + item.doc_id + "&skip_fold_validate=1").then(response = >console.log(response)).
catch(error = >console.error(error))
}
})
}
}).
catch(error = >console.error(error))
}
fetch请求post
// jsonplaceholder.typicode.com是一个测试网站
fetch('https://jsonplaceholder.typicode.com/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
name: 'John Doe',
email: 'johndoe@example.com',
})
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
使用XMLHttpRequest
发起GET请求:

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/users');
xhr.onload = () => {
if (xhr.status === 200) {
console.log(xhr.responseText);
} else {
console.error(Error: ${xhr.status});
}
};
xhr.send();
发送POST请求:

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://jsonplaceholder.typicode.com/users');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = () => {
if (xhr.status === 201) {
console.log(xhr.responseText);
} else {
console.error(Error: ${xhr.status});
}
};
xhr.send(JSON.stringify({
name: 'John Doe',
email: 'johndoe@example.com',
}));

相关文章
|
10天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
16天前
|
Web App开发 JavaScript 前端开发
使用 Chrome 浏览器的内存分析工具来检测 JavaScript 中的内存泄漏
【10月更文挑战第25天】利用 Chrome 浏览器的内存分析工具,可以较为准确地检测 JavaScript 中的内存泄漏问题,并帮助我们找出潜在的泄漏点,以便采取相应的解决措施。
113 9
|
1月前
|
机器学习/深度学习 自然语言处理 前端开发
前端大模型入门:Transformer.js 和 Xenova-引领浏览器端的机器学习变革
除了调用API接口使用Transformer技术,你是否想过在浏览器中运行大模型?Xenova团队推出的Transformer.js,基于JavaScript,让开发者能在浏览器中本地加载和执行预训练模型,无需依赖服务器。该库利用WebAssembly和WebGPU技术,大幅提升性能,尤其适合隐私保护、离线应用和低延迟交互场景。无论是NLP任务还是实时文本生成,Transformer.js都提供了强大支持,成为构建浏览器AI应用的核心工具。
412 1
|
30天前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
85 0
|
1月前
|
JavaScript 前端开发 开发者
JavaScript 浏览器控制台的使用
JavaScript 浏览器控制台的使用
18 0
|
1月前
|
存储 JavaScript 前端开发
JavaScript 与浏览器存储
JavaScript 与浏览器存储
32 0
|
1月前
|
Web App开发 JavaScript 前端开发
JavaScript Window - 浏览器对象模型
JavaScript Window - 浏览器对象模型
22 2
|
2月前
|
JavaScript 前端开发
js之浏览器对象|28
js之浏览器对象|28
|
3月前
|
JavaScript 前端开发
JavaScript BOM 的概念(浏览器对象模型)
JavaScript BOM 的概念(浏览器对象模型)
47 1
|
3月前
|
JavaScript UED
js之探索浏览器对象模型
js之探索浏览器对象模型
53 0