89 lines
3.1 KiB
HTML
89 lines
3.1 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>Document</title>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<script>
|
|||
|
|
// asnyc函数：声明方式在函数前面添加async关键字即可
|
|||
|
|
// async function fn(){
|
|||
|
|
// // 1、只要返回的结果不是一个Promise对象，则返回的结果都是一个成功的Promise对象
|
|||
|
|
// // 返回一个字符串
|
|||
|
|
// // return 'string';
|
|||
|
|
|
|||
|
|
// // 2、如果抛出错误，返回的结果是一个失败状态的Promise
|
|||
|
|
// // throw new Error('error')
|
|||
|
|
|
|||
|
|
// // 3.返回的结果是一个Promise对象，则返回值的Promise对象的状态与其一致
|
|||
|
|
// return new Promise((resolve,reject)=>{
|
|||
|
|
// // resolve('成功的数据');
|
|||
|
|
// reject('失败了！');
|
|||
|
|
// })
|
|||
|
|
// }
|
|||
|
|
// const result = fn()
|
|||
|
|
// console.log(result);
|
|||
|
|
|
|||
|
|
// const p = new Promise((resolve,reject)=>{
|
|||
|
|
// // resolve('successful');
|
|||
|
|
// reject('error');
|
|||
|
|
// });
|
|||
|
|
// //await 要放在asnyc 函数里面
|
|||
|
|
// async function fn(){
|
|||
|
|
// try{
|
|||
|
|
// //await表达式右侧是一个Promise对象，返回值为promise对象的值
|
|||
|
|
// let result = await p;
|
|||
|
|
// console.log(result);
|
|||
|
|
// }catch(e){
|
|||
|
|
// console.log(e)
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
// }
|
|||
|
|
// fn()
|
|||
|
|
|
|||
|
|
//存在跨域问题
|
|||
|
|
// readyState：存有服务器响应的状态信息。
|
|||
|
|
// 0: 请求未初始化
|
|||
|
|
// 1: 服务器连接已建立
|
|||
|
|
// 2: 请求已接收
|
|||
|
|
// 3: 请求处理中
|
|||
|
|
// 4: 请求已完成，且响应已就绪
|
|||
|
|
// responseText：获得字符串形式的响应数据。
|
|||
|
|
function sendAjax(url) {
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
const xhr = new XMLHttpRequest()
|
|||
|
|
xhr.open("GET", url);
|
|||
|
|
xhr.send();
|
|||
|
|
xhr.onreadystatechange = function () {
|
|||
|
|
if (xhr.readyState == 4) {
|
|||
|
|
if (xhr.status >= 200 && xhr.status < 300) {
|
|||
|
|
resolve(xhr.response);
|
|||
|
|
}else{
|
|||
|
|
// xhr.statusText是浏览器的错误信息，因为跨浏览器的时候，可能不太一致，不建议直接使用它
|
|||
|
|
reject("数据返回失败！状态码" + xhr.status + "状态信息：" + xhr.statusText);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
// 使用 promise的then方法
|
|||
|
|
// sendAjax('./data/test.geojson').then(value=>{
|
|||
|
|
// console.log(value);
|
|||
|
|
// },reason=>{
|
|||
|
|
// console.log(reason);
|
|||
|
|
// })
|
|||
|
|
|
|||
|
|
// 使用async和await表达式
|
|||
|
|
async function main(){
|
|||
|
|
let result = await sendAjax('./data/jsonString.txt');
|
|||
|
|
console.log(result)
|
|||
|
|
}
|
|||
|
|
main()
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|