• Map&Promise


    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>ES6</title>
        <script type="text/javascript" src="js/jquery.min.js"></script>
    	<script type="text/javascript" src="promise.js"></script>
      </head>
      <body>
      <button>click</button>
      <script type="text/javascript">
          //Map   键值对 类似对象 传统对象只能用字符串当作键名,Map的键可以是其它的类型
    	  var m = new Map();
    		m.set('a','a').set('b','b');
    		var a={name:'hello'};
    		m.set(a,'name');
    		m//
    		.get()
    		.has()
    		.delete()
    		.clear()
    		.size
    		
    		var m1 = new Map([['a','1'],['b','2'],['c','3']]);
    		for(let key of m1.keys()){
    			console.log(key);
    		}
    		
    		var m1 = new Map([['a','1'],['b','2'],['c','3']]);
    		for(let key of m1.values()){
    			console.log(key);
    		}
    		
    		var m1 = new Map([['a','1'],['b','2'],['c','3']]);
    		for(let [k,v] of m1){
    			console.log(k,v);
    		}
    		
    		//扩展运算符
    		var m1 = new Map([['a','1'],['b','2'],['c','3']]);
    		var s = [...m1.keys()];  //a,b,c	
    
    		var m1 = new Map([['a','1'],['b','2'],['c','3']]);
    		var s = [...m1.values()];  //123
    		
    		//与其它结构转换
    		//1MAP转为数组
    		var m1 = new Map([['a','1'],['b','2'],['c','3']]);
    		//[...m1.keys()];   
    		//[...m1.values()]; 
    		//[...m1];
    		//2、数组转为map
    		var m1 = new Map([['a','1'],['b','2'],['c','3']]);
    		var s = [...m1];
    		//var m2 = new Map([...m1]);
    		var m2 = new Map(s);
    		m2.size
    		//3、转为对象
    		var m1 = new Map([['a','1'],['b','2'],['c','3']]);
    		var o ={};
    		for (let [k,v] of m1){
    			o[k] =v;
    		};
    		console.log(o);
    		
    		
    		//promise   优化AJAX  三种状态(进行中,已完成,已失败)  </script>
      </body>
    </html>
    
    const getJSON = function(url,type,data) {
      const promise = new Promise(function(resolve, reject){
        const handler = function() {
          if (this.readyState !== 4) {
            return;
          };
          if (this.status === 200) {
            resolve(this.response);
          } else {
            reject(new Error(this.statusText));
          }
        };
        const client = new XMLHttpRequest();
        client.open(type, url);
        client.onreadystatechange = handler;
        client.responseType = "json";
        if(type=='get'){
          client.send();
        }else {
          client.setRequestHeader("Content-Type","application/json");//data只能是JSON字符串
          client.send(JSON.stringify(data))  //post请求传入string
        }
      
      });
      return promise;
    };
    
    $(function() {
    	$("button").click(function() {	
    		getJSON('http://localhost:3000/info','get')
        .then(function(json) {
    		//success
    		console.log('ok');
        })
        .catch(function(error) {
    		  console.error('出错了', error);
    		});
    	});
      //JQUERY 1.5.0返回的是xhr对象  高于1.5.0返回的deferred对象
    })
    
    <!DOCTYPE>
     <html lang="zh-en">
     <head>
         <title>js实现简单留言板</title>
         <meta http-equiv="content-type" content="text/html;charset=utf-8">
         <script src="js/jquery-1.11.0.min.js"></script>
         <script type="text/javascript" src="js/ajax_then.js"></script>
         <link href="css/bootstrap.min.css" rel="stylesheet"/>
         <link href="css/demo.css" rel="stylesheet"/> 
     </head> 
     <body>
         <div class="container">
            <div class="form-horizontal">
                <div class="form-group">
                    <label class="col-sm-1 control-label">昵称:</label>
                    <div class="col-sm-11">
                        <input type="email" class="form-control name" id="inputEmail3" placeholder="请输入昵称">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-1 control-label">留言:</label>
                    <div class="col-sm-11">
                        <textarea class="form-control message" rows="5" placeholder="请输入内容"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-1 col-sm-11">
                        <button type="submit" class="btn btn-success submit">添加留言</button>
                        <button class="btn btn-success queryThen">串行</button>
                        <button class="btn btn-success queryWhen">并行</button>
                    </div>
                </div>
            </div>
    
            <div class="panel panel-primary">
                <div class="panel-heading">留言列表</div>
                    <div class="panel-body">
                        <ul class="list-group messageList">
                            <!-- <li class="list-group-item">张三
                                <span>说:</span>大家好!
                            </li> -->
                        </ul>
                    </div>
            </div>
        </div>
    </body>
    </html>
    
    /**
    Simple Server for web api test.
    */
    /**Connect是一个node中间件(middleware)框架。
    如果把一个http处理过程比作是污水处理,中间件就像是一层层的过滤网。
    每个中间件在http处理过程中通过改写request或(和)response的数据、状态,实现了特定的功能。
    中间件就是类似于一个过滤器的东西,在客户端和应用程序之间的一个处理请求和响应的的方法。*/
    
    var connect = require('connect');  //创建连接
    var bodyParser = require('body-parser');   //body解析
    
    var app = connect()
        .use(bodyParser.json())   //JSON解析
        .use(bodyParser.urlencoded({extended: true}))
    	//use()方法还有一个可选的路径字符串,对传入请求的URL的开始匹配。
    	//use方法来维护一个中间件队列
    	.use(function (req, res, next) {
    		//跨域处理
    		// Website you wish to allow to connect
            res.setHeader('Access-Control-Allow-Origin', '*');  //允许任何源
            // Request methods you wish to allow
            res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');  //允许任何方法
            // Request headers you wish to allow
            res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type,X-Session-Token');   //允许任何类型
    		res.writeHead(200, {"Content-Type": "text/plain;charset=utf-8"});    //utf-8转码
    		next();  //next 方法就是一个递归调用
    	})
    	.use('/add', function(req, res, next) {
    		console.log(req.body);
    		var data = [];
    		data.push(req.body);
    		console.log(data);
    		res.end(JSON.stringify(data));
    		next();
    	})
    	.use('/map/add1', function(req, res, next) {
    		var data={
    			"code": "200",
    			"msg": "success",
    			"result": {
    				"id":1,
    			}
    		};
    		res.end(JSON.stringify(data));
    		next();      //
    	})
    	.use('/map/add2', function(req, res, next) {
    		var data={
    			"code": "200",
    			"msg": "success",
    			"result": {
    				"name": "sonia",
    				"content": "广告投放1"
    			}
    		};
    		res.end(JSON.stringify(data));
    		next();      //
    	})
        .listen(3000);
    console.log('Server started on port 3000.');
    
    const getJSON = function(url,type, data) {
      const promise = new Promise(function(resolve, reject){
        const handler = function() {
          if (this.readyState !== 4) {
            return;
          };
          if (this.status === 200) {
            resolve(this.response);
          } else {
            reject(new Error(this.statusText));
          }
        };
        const client = new XMLHttpRequest();
        client.open(type, url);
        client.onreadystatechange = handler;
        client.responseType = "json";
        if(type =='get'){
        	client.send();
        }else {
        	client.setRequestHeader("Content-Type", "application/json");
        	client.send(JSON.stringify(data));
        }
      });
      return promise;
    };
    
    $(function() {
    	//添加数据
    	$(".submit").click(() => {
    		let _name = $(".name").val(),
    			_message = $(".message").val();
    		if(_name =='' || _message =='') {
    			alert('请输入信息!');
    			return false;
    		}
    		$(".name,.message").val("");
    		add(_name,_message);
    	});
    	let add = (name, message) => {
    		getJSON("http:localhost:3000/add",'post', {name: name, message: message})
    		.then(function(json) {
    			for (let i=0; i<json.length; i++) {
    				$(".messageList").append(`<li class="list-group-item"><span class="key">${json[i].name}</span><span>说:</span><span class="value">${json[i].message}</span>
    			    </li>`);
    			}
    		}, function(error) {
    		  console.error('出错了', error);
    		});
    	};
    
    	//列表显示
    	let  listShow = () => {
    		//原生promise
    		/*getJSON("/map/get",'get').then(function(d) {
    			_showList(d);
    		}, function(error) {
    		  console.error('出错了', error);
    		});*/
    
    		//$.ajax() 低于1.5.0版本的jQuery,返回的是XHR对象,高于1.5.0版本,返回的是deferred对象,可以进行链式操作。
    		// 链式写法
    		let list = $(".messageList"),str = "";
    		$.ajax({url:"http:localhost:3000/map/get",dataType:"json",type:"get"})
    	  .done(function(d){
    			
    			})
    	  .fail(function(){ alert("出错啦!"); });
    	};
    
    	//查询数据
    	//链式写法  串行
    	$(".queryThen").click(()=> queryThen());
    	let queryThen = ()=> {
    		$.ajax({url:"http:localhost:3000/map/add1",dataType:"json",type:"get"})
    	  .then(data => {
    				return $.ajax({url:"http:localhost:3000/map/add2",dataType:"json",type:"post",data:{id:data.result.id}})
    			 //return $.get("http:localhost:3000/map/add2", data.result.id);
    			})
    	    .then(data => {
    				alert(data);
    			})
    			.catch(error=>{
    				console.log(error);
    			})
    	};
    
    	let addPromise1 = new Promise((resolve,reject) => {
    		getJSON("http:localhost:3000/map/add1",'get').then(function(d) {
    			resolve(d);
    		}, function(error) {
    		  console.error('出错了', error);
    		});
    	});
    	let addPromise2 = new Promise((resolve,reject) => {
    		getJSON("http:localhost:3000/map/add2",'get').then(function(d) {
    			resolve(d);
    		}, function(error) {
    		  console.error('出错了', error);
    		});
    	});
    	// 并行  when 多个请求完成后返回
    	$(".queryWhen").click(()=> queryWhen());
    	let queryWhen = ()=> {
    		/*$.when($.ajax({url:"/map/add1",dataType:"json",type:"get"}), $.ajax({url:"/map/add2",dataType:"json",type:"get"}))
    		.then((data1,data2) => {
    			console.log(data1[0]);
    			console.log(data2[0]);
    		}, () => { alert("出错啦!"); });*/
    
    		Promise.all([
    		  addPromise1,
    		  addPromise2
    		]).then(([add1,add2])=>{
    			console.log(add1);
    			console.log(add2);
    		}, function(error) {
    		  console.error('出错了', error);
    		});
    	};
    })
    

    本博客所有文章仅用于学习、研究和交流目的,欢迎非商业性质转载。

    博主的文章没有高度、深度和广度,只是凑字数。由于博主的水平不高,不足和错误之处在所难免,希望大家能够批评指出。

    博主是利用读书、参考、引用、抄袭、复制和粘贴等多种方式打造成自己的文章,请原谅博主成为一个无耻的文档搬运工!

  • 相关阅读:
    目标检测算法的进展
    基础 | batchnorm原理及代码详解
    MTCNN人脸及特征点检测---代码应用详解(基于ncnn架构)
    Android.mk文件c++头文件包含问题
    linux下的find文件查找命令与grep文件内容查找命令
    TensorFlow基础笔记(15) 编译TensorFlow.so,提供给C++平台调用
    TensorFlow基础笔记(0) tensorflow的基本数据类型操作
    tensorflow函数解析:Session.run和Tensor.eval的区别
    TensorFlow基础笔记(14) 网络模型的保存与恢复_mnist数据实例
    SQL Server 2005/2008遍历所有表更新统计信息
  • 原文地址:https://www.cnblogs.com/Dewumu/p/14484835.html
Copyright © 2020-2023  润新知