（六）JavaScript关于浏览器-promise和canvas

最新推荐文章于 2022-12-09 19:35:52 发布

朝屯暮蒙vi

最新推荐文章于 2022-12-09 19:35:52 发布

阅读量922

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_35418250/article/details/77945940

版权

JavaScript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

（六）JavaScript关于浏览器-promise和canvas

补充上章：

实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信

1. 对于简单请求，浏览器直接发出CORS请求。具体来说，就是在头信息之中，增加一个Origin字段。

2. 如果Origin指定的源，不在许可范围内，服务器会返回一个正常的HTTP回应。浏览器发现，这个回应的头信息没有包含Access-Control-Allow-Origin字段（详见下文），就知道出错了，从而抛出一个错误，被XMLHttpRequest的onerror回调函数捕获。

3. 如果Origin指定的域名在许可范围内，服务器返回的响应，会多出几个头信息字段。

非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。

浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。

六、promise

因为回调地狱的产生：执行一个ajax请求时用onreadystatechange事件，而现在要执行另一个ajax请求(但是要从上一个ajax请求中或去参数)，在第二个ajax请求还没完时又要进行第三个ajax请求….一直往下

而promise将数据请求和数据处理区分开来。

Promise对象的三种状态：

pending: 等待中，或者进行中，表示还没有得到结果

resolved(Fulfilled): 已经完成，表示得到了我们想要的结果，可以继续往下执行

rejected: 也表示得到结果，但是由于结果并非我们所愿，因此拒绝执行

new Promise(function(resolve, reject) {
    if(true) { resolve() };
    if(false) { reject() };
})

先由本来函数确定resolve还是reject；resolve执行then部分，否则执行catch部分（then的第二个参数部分）

function fn(num) { 
  return new Promise(function(resolve, reject){ 
            if (typeof num == 'number') { 
                resolve(); 
            } 
            else 
            { 
            reject();
            }
    }) .then(function(){ 
             alert('参数是一个number值');
        }) 
       .then(null, function() { 
                   alert('参数不是一个number值'); 
                    }) 
}
fn('hehe');
fn(1234);

上下两个是相同的效果：

function fn(num) { 
  return new Promise(function(resolve, reject){ 
            if (typeof num == 'number') { 
                resolve(); 
            } 
            else 
            { 
            reject();
            }
    }) 
}
fn('hehe').then(function(){ 
             alert('参数是一个number值')}).then(null,function() { 
                   alert('参数不是一个number值'); 
                    });

其实在前期学习时把，resolve和reject看成return理解：

function want() { 
  alert('这是你想要执行的代码'); 
} 

function fn(want) { 
  alert('这里表示执行了一大堆各种代码'); 
  // 返回Promise对象 
  return new Promise(function(resolve, reject) { 
    if (typeof want == 'function') { 
        resolve(want); 
    } else { 
        reject('TypeError: '+ want +'不是一个函数') 
    } 
  }) 
} 
fn(want).then(function(want) { want(); })
fn('1234').catch(function(err) { 
  alert(err); 
})

一个简单的封装，正确的返回结果，就resolve一下，错误的返回结果，就reject一下。

var url = ''; 
// 封装一个get请求的方法
function getJSON(url) { 
return new Promise(function(resolve, reject) { 
var XHR = new XMLHttpRequest(); 
XHR.open('GET', url, true); 
XHR.send();
XHR.onreadystatechange = function() {
 if (XHR.readyState == 4) { 
if (XHR.status == 200) { 
try { var response = JSON.parse(XHR.responseText); 
resolve(response); 
} 
catch (e) { 
reject(e); 
} 
} else {
reject(new Error(XHR.statusText)); 
} } } }) } 
getJSON(url).then(resp => console.log(resp));

Promise.all接收一个Promise对象组成的数组作为参数，当这个数组所有的Promise对象状态都变成resolved或者rejected的时候，它才会去调用then方法。

Function renderAll() { 
return Promise.all([getJSON(url), getJSON(url1)]);
 } 
renderAll().then(function(value) { 
alert (value); //首先两个都resolve后调用then方法，value是两个promise对象
})

与Promise.all相似的是，Promise.race都是以一个Promise对象组成的数组作为参数，不同的是，只要当数组中的其中一个Promsie状态变成resolved或者rejected时，就可以调用.then方法了。

Function renderAll() { 
return Promise.race([getJSON(url), getJSON(url1)]);
 } 
renderAll().then(function(value) { 
alert (value); 
})

七、canvas

<canvas> 标签定义图形，比如图表和其他图像。

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

画个笑脸和绘制文本：

<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas">your browser does not support the canvas tag </canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');//返回一个用于在画布上绘图的环境。
ctx.fillStyle='#FFF000';
ctx.fillRect(0,0,150,150);// 把(0,0)位置大小为150x150的矩形涂色
//利用Path绘制复杂路径:
var path=new Path2D();
path.arc(75, 75, 50, 0, Math.PI*2, true);
path.moveTo(110,75);
path.arc(75, 75, 35, 0, Math.PI, false);
path.moveTo(65, 65);
path.arc(60, 65, 5, 0, Math.PI*2, true);
path.moveTo(95, 65);
path.arc(90, 65, 5, 0, Math.PI*2, true); 
ctx.strokeStyle = '#000000';
ctx.stroke(path); 
/* ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = '#666666';
ctx.font = '24px Arial';
ctx.fillStyle = '#333333';
ctx.fillText('带阴影的文字', 20, 40); */
</script>
</body>
</html>

朝屯暮蒙vi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（六）JavaScript关于浏览器-promise和canvas

（六）JavaScript关于浏览器-promise和canvas补充上章：实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信 1. 对于简单请求，浏览器直接发出CORS请求。具体来说，就是在头信息之中，增加一个Origin字段。 2. 如果Origin指定的源，不在许可范围内，服务器会返回一个正常的HTTP回应
复制链接

扫一扫