网络编程-基础

小蚂蚁有力量

于 2019-08-07 22:27:35 发布

阅读量111

点赞数

一、H5新增存储方案

什么是SessionStorage和LocalStorage
和Cookie一样, SessionStorage和LocalStorage也是用于存储网页中的数据的；
Cookie、 SessionStorage、LocalStorage区别
2.1 生命周期(同一浏览器下)
Cookie生命周期: 默认是关闭浏览器后失效, 但是也可以设置过期时间；
SessionStorage生命周期: 仅在当前会话(窗口)下有效，关闭窗口或浏览器后被清除, 不能设置过期时间；
LocalStorage生命周期: 除非被清除，否则永久保存；
2.2 容量
Cookie容量: 有大小(4KB左右)和个数(20~50)限制；
SessionStorage容量: 有大小限制(5M左右) http://dev-test.nemikor.com/web-storage/support-test/
LocalStorage容量: 有大小限制(5M左右) http://dev-test.nemikor.com/web-storage/support-test/
2.3 网络请求
Cookie网络请求: 每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题
SessionStorage网络请求: 仅在浏览器中保存，不参与和服务器的通信
LocalStorage网络请求: 仅在浏览器中保存，不参与和服务器的通信
Cookie、 SessionStorage、LocalStorage应用场景
Cookie: 判断用户是否登录
sessionStorage: 表单数据
LocalStorage: 购物车
注意点: 无论通过以上那种方式存储的数据, 切记不能将敏感数据直接存储到本地；

二、同源策略

1.什么是同源策略?
同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能；你
所谓同源是指: 协议，域名，端口都相同,就是同源, 否则就是跨域；

http://www.it666.com:80/index.html（最后的index.html是资源路径）
协议: http/https/…
一级域名:it666.com/itzb.com
二级域名: www/study/edu/…
端口号: 80/3306/…

// 协议+一级域名+二级域名+端口号都相同, 所以同源

 http://www.it666.com:80/index.html
 http://www.it666.com:80/detail.html

// 协议不同, 所以不同源, 是跨域

 http://www.it666.com:80/index.html
 https://www.it666.com:80/index.html

// 一级域名不同, 所以不同源, 是跨域

 http://www.it666.com:80/index.html
 http://www.itzb.com:80/index.html

// 二级域名不同, 所以不同源, 是跨域

 http://www.it666.com:80/index.html
 http://edu.it666.com:80/index.html

// 端口号不同, 所以不同源, 是跨域

 http://www.it666.com:80/index.html
 http://www.it666.com:8090/index.html

2.同源策略带来的影响
在同源策略下, 浏览器只允许Ajax请求同源的数据, 不允许请求不同源的数据
但在企业开发中, 一般情况下为了提升网页的性能, 网页和数据都是单独存储在不同服务器上的
这时如果再通过Ajax请求数据就会拿不到跨域数据

3.跨域解决方案

jsonp
document.domain+iframe
location.hash + iframe
window.name + iframe
window.postMessage
flash等第三方插件

 当前的网页地址: http://127.0.0.1:80/jQuery/Ajax/19-%E5%90%8C%E6%BA%90%E7%AD%96%E7%95%A5.html
 请求的资源地址: http://127.0.0.1:80/jQuery/Ajax/19-SameOriginPolicy.php

 当前的网页地址: http://127.0.0.1:63342/jQuery/Ajax/19-%E5%90%8C%E6%BA%90%E7%AD%96%E7%95%A5.html
 请求的资源地址: http://127.0.0.1:80/jQuery/Ajax/19-SameOriginPolicy.php

三、fetch基本使用

1.什么是fetch?
和Ajax一样都是用于请求网络数据的
fetch是ES6中新增的, 基于Promise的网络请求方法

2.fetch基本使用

 fetch(url, {options})
 .then()
 .catch();

例1：

fetch("http://127.0.0.1/jQuery/Ajax/41.php?teacher=lnj&age=34", {
        method: "get"  // 设置参数在上面的地址后面处添加，如： ?teacher=lnj&age=34
    }).then(function (res) {
        // console.log(res.text());
        // return res.text();
        return res.json();
    }).then(function (data) {
        console.log(data);
        console.log(typeof data);
    }).catch(function (e) {
        console.log(e);
    });

例2：

fetch("http://127.0.0.1/jQuery/Ajax/41.php", {
        method: "post",  // 设置参数可用下面这种格式
        body: JSON.stringify({teacher:"zq", age:666})
    }).then(function (res) {
        // console.log(res.text());
        // return res.text();
        return res.json();
    }).then(function (data) {
        console.log(data);
        console.log(typeof data);
    }).catch(function (e) {
        console.log(e);
    });

四、axios网络请求库

1.什么是axios?
Axios 是一个基于 promise 的 HTTP 库网络请求插件

2.axios特点
2.1可以用在浏览器和 node.js 中
2.2支持 Promise API
2.3自动转换 JSON 数据
2.4客户端支持防御 XSRF

3.全局的 axios 默认值
在企业开发中项目分为 :开发阶段和部署阶段, 这两个阶段项目存储的位置是不同的；
项目上线前存储在企业内部测试服务器上, 项目上线后存储在企业正式服务器上；
所以如果每次请求都将请求的地址写在请求中, 那么项目上线时需要大量修改请求地址；
为了解决这个问题, 我们可以配置一个全局URL根地址, 项目上线时只需要修改根地址即可；
例如: 上线前地址是: http://127.0.0.1/jQuery/Ajax/41.php
上线后地址是: http://192.199.13.14/jQuery/Ajax/41.php

axios.defaults.timeout = 2000;
    axios.defaults.baseURL = "http://127.0.0.1";
    axios.post("/jQuery/Ajax/41.php", {
        teacher: "lnj",
        age: 666
    })
        .then(function (res) {
            console.log(res.data);
        })
        .catch(function (e) {
            console.log(e);
        });

五、Symbol基本概念

1.什么Symbol?
Symbol是ES6中新增的一种数据类型, 被划分到了基本数据类型中；
基本数据类型: 字符串、数值、布尔、undefined、null、Symbol
引用数据类型: Object
2.Symbol 的作用
用来表示一个独一无二的值

3.如何生成一个独一无二的值?
let xxx = Symbol();

4.为什么需要Symbol?
在企业开发中如果需要对一些第三方的插件、框架进行自定义的时候, 可能会因为添加了同名的属性或者方法, 将框架中原有的属性或者方法覆盖掉, 为了避免这种情况的发生, 框架的作者或者我们就可以使用Symbol作为属性或者方法的名称。

5.如何区分Symbol?
在通过Symbol生成独一无二的值时可以设置一个标记，这个标记仅仅用于区分, 没有其它任何含义；

let name = Symbol("name");  // 括号里的name仅仅起一个标记作用
    let say = Symbol("say");
    let obj = {
        // 注意点: 如果想使用变量作为对象属性的名称, 那么必须加上[]
        [name]: "lnj",
        [say]: function () {
            console.log("say");
        }
    }
    // obj.name = "it666";  // 这里添加的name不会覆盖掉上面的name取值；
   obj[Symbol("name")] = "it666"; 
    console.log(obj);

Symbol注意点

1.通过Symbol生成独一无二值时需要在后面加上(), 但是前面不能加new, 因为它不是引用类型;

let xxx = Symbol(); // 正确
let xxx = new Symbol(); // 错误

2.通过Symbol生成独一无二值时传入的字符串仅仅是一个标记, 方便我们阅读代码, 没有其它任何意义
let xxx = Symbol("name");

3.做类型转换的时候不能转换成数值，能转换成字符串和布尔类型

 let xxx = Symbol("name");
  console.log(String(xxx));
  console.log(Boolean(xxx));
 console.log(Number(xxx));

4.不能做任何运算

  let xxx = Symbol("name");
  console.log(xxx + "abc");
 console.log(xxx + 123);

5.Symbol生成的值作为属性或方法名称时, 一定更要保存下来, 否则后续无法使用
let name = Symbol("name");

6.for循环无法遍历出Symbol 的属性和方法

六、Iterator基本概念

1.什么是Iterator?
Iterator又叫做迭代器, 是一种接口；
这里的接口和现实中接口一样, 是一种标准一种规范；
例如: 电脑的USB接口有电脑USB接口的标准和规范, 正式因为有了标准和规范，
所以A厂商生成的USB线可以插到B厂商电脑的USB接口上；
它规定了不同数据类型统一访问的机制, 这里的访问机制主要指数据的遍历，
在ES6中Iterator接口主要供 for…of 消费；

2.默认情况下以下数据类型都实现的Iterator接口
Array/Map/Set/String/TypedArray/函数的 arguments 对象/NodeList 对象

1.只要一个数据已经实现了Iterator接口, 那么这个数据就有一个叫做[Symbol.iterator]的属性
2.[Symbol.iterator]的属性会返回一个函数
3.[Symbol.iterator]返回的函数执行之后会返回一个对象
4.[Symbol.iterator]函数返回的对象中又一个名称叫做 next 的方法
5.next 方法每次执行都会返回一个对象{value: 1, done: false}
6.这个对象中存储了当前取出的数据和是否取完了的标记

 // let arr = [1, 3, 5];
 // console.log(arr[Symbol.iterator]);
 // let it = arr[Symbol.iterator]();
 // console.log(it);
 // console.log(it.next());
 // console.log(it.next());
 // console.log(it.next());
 // console.log(it.next());

3.Iterator应用场景

解构赋值
扩展运算符

七、Generator函数基本概念

什么是Generator函数?
Generator 函数是 ES6 提供的一种异步编程解决方案；
Generator 函数内部可以封装多个状态, 因此又可以理解为是一个状态机；
如何定义Generator函数
只需要在普通函数的function后面加上 * 即可；
Generator函数和普通函数区别
3.1调用Generator函数后, 无论函数有没有返回值, 都会返回一个迭代器对象,
3.2调用Generator函数后, 函数中封装的代码不会立即被执行；
真正让Generator具有价值的是 yield 关键字
4.1在Generator函数内部使用yield关键字定义状态
4.2并且yield关键字可以让 Generator内部的逻辑能够切割成多个部分。
4.3通过调用迭代器对象的next方法执行一个部分代码, 执行哪个部分就会返回哪个部分定义的状态
在调用next方法的时候可以传递一个参数, 这个参数会传递给上一个yield;

注意点: yield关键字只能在Generator函数中使用, 不能在普通函数中使用

 function* gen() {
     console.log("123");
     let res = yield "aaa";

     console.log(res);
     console.log("567");
     yield 1 + 1;

     console.log("789");
     yield true;
 }
 let it = gen();
 // console.log(it);
 console.log(it.next());
 console.log(it.next("it666"));  // 在调用next方法的时候可以传递一个参数, 这个参数会传递给上一个yield
 // console.log(it.next());
 // console.log(it.next());

Generator函数应用场景1

应用场景, 让函数返回多个值

function* calculate(a, b) {
        yield a + b;
        yield a - b;
    }
    let it = calculate(10, 5);
    console.log(it.next().value);
    console.log(it.next().value);

Generator函数应用场景2
1.应用场景: 利用 Generator 函数，可以在任意对象上快速部署 Iterator 接口;

Generator 函数特点
1.Generator 函数也是一个函数
2.Generator 函数会返回一个迭代器对象
3.迭代器对象有next方法
4.next方法每次执行都会返回一个对象{value: xxx, done: false}

1.必须有一个叫做[Symbol.iterator]的属性
2.[Symbol.iterator]的属性会返回一个函数
3.[Symbol.iterator]返回的函数执行之后会返回一个可迭代对象
4.[Symbol.iterator]函数返回的对象中又一个名称叫做next的方法
5.next方法每次执行都会返回一个对象{value: xxx, done: false}

let obj = {
        name: "lnj",
        age: 34,
        gender: "man"
    }
    function* gen(){
        let keys = Object.keys(obj);
        for(let i = 0; i < keys.length; i++){
            yield obj[keys[i]];
        }
    }
    obj[Symbol.iterator] = gen;
    // console.log(obj[Symbol.iterator]);
    let it = obj[Symbol.iterator]();
    // console.log(it);
    console.log(it.next());
    console.log(it.next());
    console.log(it.next());
    console.log(it.next());

Generator函数应用场景3
应用场景: 用同步的流程来表示异步的操作

function request() {
        return new Promise(function (resolve, reject) {
            setTimeout(function () {
                resolve("拿到的数据");
            }, 1000);
        });
    }

function* gen() {
        yield request();
        yield request();
        yield request();
    }
    let it = gen();
    // console.log(it.next().value);
    it.next().value.then(function (data) {
        console.log(data, 1);
        return it.next().value;
    }).then(function (data) {
        console.log(data, 2);
        return it.next().value;
    }).then(function (data) {
        console.log(data, 3);
    });

八、async函数

1.async函数
async函数是ES6中新增的一个函数, 用于定义一个异步函数；
async函数函数中的代码会自动从上至下的执行代码；

2.await 操作符
await操作符只能在异步函数 async function 中使用
await表达式会暂停当前 async function 的执行，等待 Promise 处理完成。
若 Promise 正常处理(fulfilled)，其回调的resolve函数参数作为 await 表达式的值，然后继续执行 async function。

function request() {
        return new Promise(function (resolve, reject) {
            setTimeout(function () {
                resolve("拿到的数据");
            }, 1000);
        });
    }

async function gen() {
        let res1 = await request();
        console.log(res1, 1);
        let res2 = await request();
        console.log(res2, 2);
        let res3 = await request();
        console.log(res3, 3);
    }
    gen();

-End