axios,fetch,generator函数，async函数以及事件循环机制

axios

  axios : 是一款基于promise的HTTP库；用来前后端数据交互的；
        后期的项目大多数都要用到axios;
        axios.get: get请求，当请求成功以后，会执行then中的第一个回调函数；失败走catch;
        axios.get("./data.txt?a=111&b=222").then(function(res){
            // res : 请求成功的数据；这个res是被包装的数据；数据放到了res的data的属性名上
            console.log(res.data);
        }).catch(function(){

        })
        axios.get("./data.txt",{params:{a:111,b:222}}).then(function(res){
            // res : 请求成功的数据；这个res是被包装的数据；数据放到了res的data的属性名上
            console.log(res.data);
        }).catch(function(){

        })
        /// post : 直接传入对象作为参数
        axios.post("./data.txt",{a:1,b:2}).then(function(val){
            // {data:{}}
            // 最后把数据都会放到val的data属性上
        })

        // axios.all  支持并发请求
        function getUserAccount() {
            return axios.get('/user/12345');
        }

        function getUserPermissions() {
             return axios.get('/user/12345/permissions');
        }

        axios.all([getUserAccount(), getUserPermissions()])
        .then(axios.spread(function (acct, perms) {
            // 只有当两个请求都执行完成，才执行这个回调；
            // 两个请求现在都执行完成
        }));
        API配置；
        baseURL: 'https://some-domain.com/api/'
        工作中的请求会进行一次二次封装；
        function request(url){
            axios.baseUrl="";
            return axios(url);
        }
        axios.defaults.baseURL = 'https://api.example.com';
        axios({
            url:"/data.txt",// url:https://some-domain.com/api/data.txt
            method:"get",
            data:{}
        }).then(function(val){

        });
        axios({
            url:"a.json"
        })

        axios.interceptors.request.use(function(){
            // 
        },function(){

        })


        axios.interceptors.response.use(function(response){
            // 响应数据成功，对成功做些什么
            // console.log(response);
            //response.data=[{c:1}]
            return response.data;
        },function(){

        });
        axios.get("data.txt").then(function(val){
            console.log(val);
        })

fetch

   ajax: xmlHttpRequest;
        fetch 不是ajax的进一步封装；
        fetch是window对象上一个方法；方法返回一个promise的对象

        fetch 
        1. fetch将不同类型的借口放在不同的fetch不同的对象上
        2. 返回一个promise的实例，避免了层层的回调；
        fetch至少需要两个then;
        
        缺点：
        fetch 不能接受跨域的cookie；
        fetch 不能发送cookie;
        let data  ={user:"a"};
        fetch("data.txt",{method:"post",body:JSON.stringify(data)}).then(function(res){
            return res.json();
        }).then(function(data){
            console.log(data);
        });

generator函数

 // generator函数：状态机
        // 1.function 和函数名之间有一个*;
        // 2.函数体内部使用了yield表达式，来定义函数体内部的状态；
        // generator 函数是分段执行的，yield是暂停的标记，next是恢复执行；

        function* fn(){
            console.log(100);
            yield "hello";
            console.log(200);
            yield "world";
            console.log(300);
            return 600;
        }
        let f = fn();// fn的返回值是一个指向指针的对象
        let f1=f.next();// 让当前的状态切换到下一个指针
        console.log(f1);// {value: "hello", done: false}
        let f2 = f.next();
        console.log(f2);
        let f3 = f.next();
        console.log(f3);
        let f4 =f.next()
        console.log(f4); 

async函数

 // generator *=>async   yield => await
        // async函数： 有内置的执行器；
        // async : 函数中有异步的操作;async函数默认返回一个promise实例
        // await : 等待紧跟在后面的表达式需要等待的结果；
        // await 下面代码是异步的；并且是一个微任务；await后面跟着代码是同步的；

        // 异步任务分为宏任务和微任务；当主任务队列执行完成，需要执行异步任务，异步任务先找到里面的微任务，按顺序执行，微任务执行完成，再去执行宏任务；
           function fn1(){
            // 当函数中返回一个promise实例时
            return new Promise(function(resolve,reject){
                resolve("xx");
            })  
        }

        function fn2(){
            return new Promise(function(resolve,reject){
                resolve();
            })
        }
        async function fn(){
           let s =  await fn1();
           // 1.如果fn1中返回一个promise实例，那么await 下面的代码都是fn1中返回的promise实例then的成功回调中的代码；
           // 2.await函数的返回值s就是上一个promise实例中resolve传递的实参；
           console.log(s);
           console.log(200);
           let a = await fn2();
           console.log(666);
        }
        fn();

        // 异步的请求 
        function getData(url){
            return axios.get(url);
        }
        async function fn(){
            // 将异步的代码变成同步；
            let data= await getData("/list");
            for(let i =0;i<data.length;i++){

            }
        }

事件循环机制

	事件循环机制： JS代码执行分为主任务队列和对待任务队列；在执行主栈的代码遇到同步的代码会立即执行，遇到异步的代码会先放到等待队列中，放入时区分是宏任务还是微任务，按照不同的任务放到等待队列不同的池子中；当主栈执行完成时，那么要先去等待队列的微任务中去遍历，按照放入时间先后依次执行，把微任务放到主栈中去执行，微任务执行完毕，再去执行宏任务。
	
     微任务 : await  promise的then 
     宏任务： 定时器  ajax  

练习题

 //1.
  function fn1(){console.log(666);}
        setTimeout(function(){
            console.log(800);
        },0)
        console.log(900);
        async function fn(){
            console.log(999);
            await fn1();
            console.log(888); 
        }
        let  p = new Promise(function(resolve,reject){
            console.log(200);
            resolve();
            console.log(300);
        })
        p.then(function(){
            console.log(100);// 异步的
        });
        fn();
        // 900  200  300 999  666  888 100 800
        // 微任务执行的顺序要看谁先放进任务队列中，谁先执行
//2.
 async function async1() {
            console.log('async1 start');// 2
            await async2();// await 后面的是同步
            console.log('async1 end'); // 微1  6
        }
        async function async2() {
            console.log('async2'); // 3
        }
        console.log('script start');// 1
        setTimeout(() => {
            console.log('setTimeout'); // 8
        }, 0);
        async1();
        new Promise(resolve => {
            console.log('promise1');// 4
            resolve();
        }).then(() => {
            console.log('promise2');// 微2  7
        });
        console.log('script end'); // 5