<script src="https://cdn.xgqfrms.xyz/jsonp/users.json?callback=jsonpGlobalCallback"></script>
bug ❌
Fetch API OK ✅
Text !== JSON
/*
err = TypeError: Failed to execute 'json' on 'Response': body stream already read at jsonp.html:40:16
Uncaught (in promise) SyntaxError: Unexpected token 'j', "jsonpGloba"... is not valid JSON
*/
const log = console.log;
const app = document.querySelector(`#app`);
log(`app =`, app);
function jsonpGlobalCallback (arr) {
log(`json =`, arr);
}
const url = `https://cdn.xgqfrms.xyz/jsonp/users.json?callback=jsonpGlobalCallback`;
// const url = `https://cdn.xgqfrms.xyz/jsonp/users.json`;
fetch(url, {
// cors
})
.then(res => {
log(`res =`, res);
// read stream
// log(`res =`, res, res.json());
return res.text();
// return res.json();
})
.then(jsonpText => {
log(`jsonp text =`, jsonpText);
app.innerHTML = ``;
app.insertAdjacentHTML(`beforeend`, jsonpText);
})
.catch(err => {
log(`err =`, err);
});
JSONP demo
https://codepen.io/xgqfrms/pen/poVxXBr?editors=1010
JSONP 原理
https://www.zhihu.com/question/19966531
https://juejin.cn/post/6844904024924225544