22.6.17学习笔记---axios网络请求&&Generator和async函数(异步编程解决方案)

---

一、fetch

1.简介

fetch是ES6中新增的基于Promise的网络请求方法

2.使用规范

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

 fetch("http://127.0.0.1/jsTest/41.php", {
        method: "post",
        body: JSON.stringify({teacher:"zq", age:666})//post请求添加数据 要转化为json字符串
    }).then(function (res) {
        // console.log(res.text());
        // return res.text();//（返回一个promise对象）让then方法拿到字符串
        console.log(res.json());
        return res.json();//（返回一个promise对象）让then方法拿到对象
        // console.log(res);
        // return res;
    }).then(function (data) {
        console.log(data);
        console.log(typeof data);
    }).catch(function (e) {
        console.log(e);
    });

get请求只需将方法改为get，传入数据通过url写入即可
http://127.0.0.1/jsTest/41.php?teacher=lnj&age=34

二、axios

1.简介

Axios 是一个基于 promise 的 HTTP 库网络请求插件

2.特点

1. 从浏览器中创建 XMLHttpRequests
2. 从 node.js 创建 http 请求
3. 支持 Promise API
4. 拦截请求和响应
5. 转换请求数据和响应数据
6. 取消请求
7. 自动转换 JSON 数据
8. 客户端支持防御 XSRF

3.使用规范

axios.post("http://127.0.0.1/jsTest/41.php", {
        teacher: "xxx",
        age: 666
    })
        .then(function (res) {
            console.log(res.data);
        })
        .catch(function (e) {
            console.log(e);
        });

get请求同理

4.axios 默认值

axios.defaults.timeout = 2000; //默认超时时间
axios.defaults.baseURL = “http://127.0.0.1”; //默认根地址
…

三、Sybmol

1.简介

Symbol是ES6中新增的一种数据类型, 被划分到了基本数据类型中
用来表示一个独一无二的值

2.使用规范

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

let name = Symbol("name");
    let say = Symbol("say");
    let obj = {
        // 注意点: 如果想使用变量作为对象属性的名称, 那么必须加上[]
        [name]: "xxx",
        [say]: function () {
            console.log("say");
        }
    }
    obj.name = "yyy";
    obj[Symbol("name")] = "yyy";
    console.log(obj);

3.注意点

1. 做类型转换的时候不能转换成数值

	let xxx = Symbol("name");
    console.log(String(xxx));//'Symbol(name)'
    console.log(Boolean(xxx));//ture
    console.log(Number(xxx));//错误

2. 不能做任何运算
3. Symbol生成的值作为属性或方法名称时, 一定更要保存下来, 否则后续无法使用

	let xxx = Symbol("name");
    console.log(String(xxx));//'Symbol(name)'
    console.log(Boolean(xxx));//ture
    console.log(Number(xxx));//错误

4. for循环无法遍历出对象中的Symbol的属性和方法
   可以通过对象的Object.getOwnPropertySymbols(obj)方法取出相关Symbol属性和方法

四、Itrator函数

1.简介

Iterator又叫做迭代器, 是一种接口

它规定了不同数据类型统一访问的机制, 这里的访问机制主要指数据的遍历
在ES6中Iterator接口主要供for…of消费

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

2.特点

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

let arr = [1, 3, 5];
   console.log(arr[Symbol.iterator]);//ƒ values() { [native code] }
   let it = arr[Symbol.iterator]();
   console.log(it);//Array Iterator {}
   console.log(it.next());//1 false
   console.log(it.next());//3 false
   console.log(it.next());//5 false
   console.log(it.next());//undefined ture

   for(let value of arr){
       console.log(value);//1 3 5
   }

   // let obj = {
   //     name: "lnj",
   //     age: 34,
   //     gender: "man"
   // }
   // console.log(obj[Symbol.iterator]);//undefined
   // for(let value of obj){//报错 obj is not iterable
   //     console.log(value);
   // }

3.应用场景

下面这些方法就是通过Itrator实现的

解构赋值

 	// let arr = [1, 3];
    let arr = new MyArray(1, 3);
    let [x, y, z] = arr;
    console.log(x, y, z);//1 3 undefined

扩展运算符

	// let arr1 = [1, 3];
	// let arr2 = [2, 4];
    let arr1 = new MyArray(1, 3);
    let arr2 = new MyArray(2, 4);
    let arr3 = [...arr1, ...arr2];//[1 , 3 ,2 ,4]
    console.log(arr3);

五、Generator函数

1.简介

Generator 函数是 ES6 提供的一种异步编程解决方案
Generator 函数内部可以封装多个状态, 因此又可以理解为是一个状态机

2.特点

Generator函数和普通函数区别
1.调用Generator函数后, 无论函数有没有返回值, 都会返回一个迭代器对象,
2.调用Generator函数后, 函数中封装的代码不会立即被执行

在Generator函数内部使用yield关键字定义状态
并且yield关键字可以让 Generator内部的逻辑能够切割成多个部分
通过调用迭代器对象的next方法执行一个部分代码,执行哪个部分就会返回哪个部分定义的状态
在调用next方法的时候可以传递一个参数, 这个参数会传递给上一个yield

function* gen() {
        console.log("123");
        let res = yield "aaa";//第一部分 res是第二个next传递来的参数

        console.log(res);//it666
        console.log("567");
        yield 1 + 1;//第二部分

        console.log("789");
        yield true;//第三部分
    }
    let it = gen();
    console.log(it);
    console.log(it.next());//123              value: 'aaa', done: false
    console.log(it.next("it666"));//it666 567 value: 2, done: false
    console.log(it.next());//789              value: true, done: false
    console.log(it.next());//                 value: true, done: false

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

3.应用场景

让函数返回多个值

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

在任意对象上快速部署 Iterator 接口

let obj = {
        name: "lnj",
        age: 34,
        gender: "man"
    }
    function* gen(){
        let keys = Object.keys(obj);
        //console.log(keys);['name', 'age', 'gender']
        //注意对象的属性名原本是字符串
        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());

用同步的流程来表示异步的操作

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

六、async函数

1.简介

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

2.使用

	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();

await表达式会暂停当前 async function 的执行，等待 Promise 处理完成
若 Promise 正常处理(fulfilled)，其回调的resolve函数参数作为 await 表达式的值，然后继续执行 async function

await操作符只能在异步函数 async function 中使用

---

总结

今日完成12个任务点
async函数为解决异步编程的最终方案