8.9 ajax + ES6新增语法

136 阅读4分钟

ajax 前后端交互的手段,通过js向服务器发送请求

所有服务器返回的响应都不会直接显示在页面上而是返回给js

js和服务端交互=>依赖于浏览器来发送请求
ajax :async javascript and xml

ajax使用: 
1.XMLHttpRequest()内置构造函数 =>创建实例化对象发送Ajax请求
2.配置: xhr. open('请求方式(get,post,put),请求地址(后端位置),是否异步(默认异步TRUE)') 
3.发送请求:xhr. send()
4.接收结果:xhr.onload=function(){}
XHR里面有responseText 是响应体

(JSON 通常用于与服务端交换数据。在接收服务器数据时一般是字符串。
我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。)

//--------------------
ajax异步
open(,,第三个参数)可选参数 TRUE表示异步 flase表示同步
结论:同步 事件必须写在send()之前
*/

// 1.创建一个Ajax实例化对象
const xhr = new XMLHttpRequest();
//2.配置本次请求的信息
xhr.open('GET', './10.get.php')
//4.接收结果
xhr.onload = function () {
  console.log(JSON.parse(xhr.responseText));//默认异步
}
//3.发送请求
xhr.send();

promise:

1.es6语法,解决回调地狱 
 持续:pending成功:resolved失败:rejected
2.实例化对象自带两个方法:
2-1 then()  -> promise对象.then(function(){}) =>成功:resolve
2-2 catch() -> promise对象.catch(function(){})=>失败:reject
3.promise进阶语法:
当你在一个promise 对象的 then 里面返回一个新的promise对象,你可以在
这个then的后面继续来一个then接收第一个then里的promise对象的结果
 4.Promise.all()把多个promise结果封装成一个
    注意:Promise.all([1,2,3...]).then(function(){})
     then()里全部为 TRUE 才会显示结果


实例1// promise基础语法
    const p0 =new Promise(function(resolve,reject){
        ajax({
          url: "./a.php",
          dataType:"json",
          success: function(res){
            resolve(res);
          },
          error(err) {
            reject(err)
          }
        })
    })

    //调用
    p0.then(function(res) {console.log('成功',res);})
    p0.catch(function(err) {console.log('失败'+err)})

async /await es7语法 异步等待

    语法:
    1.async 写在函数前面,是对函数的修饰关键字
    2.await的使用必须是一个Promise 对象,才会有等待的结果,不然无意义
    3.await关键字,必须有async 才能在函数内部使用 
    省略then,直接在定义变量接收.Promise的异步代码结束之前不会向下执行

    作用:回调地狱终极解决方案. 使异步代码看着像同步代码
    (本质是异步代码,只有内部是同步)错一个就报错
    

generator 函数迭代器(生成函数)

    语法:在定义函数时,在function后面 或者函数前面 + *
       函数内部可以使用 yield 关键字(类似return ,可以让generator暂停,从上次yield继续向后执行
      +generator返回值是一个迭代器,包含一个 next()方法,每次执行会到下一个yield位置为止
      
      例:
      function* fn(){
        console.log('1.执行');
        yield '1.结束';
        
        console.log('2.执行');
        yield '2.结束';

        console.log('3.执行');
        yield '3.结束';

    }
    // result 就是给 fn 生成一个迭代器
    const result= fn();

    const first= result.next();
    console.log(first);  //fn()到第一个yield 
    
    // 只要后面还有yield就会显示done: false
    
    const second= result.next();
    console.log(second);

    const third= result.next();
    console.log(third);

    const four= result.next();
    console.log(four);  //{value: undefined, done: true}无意义
    

Set 数据结构 es6新增

    *语法:new Set()
    *可以在实例化的时候传递一个数组 数组里的数据就是set数据类型的每一个数据
    *特点:不接受重复数据
    *方法:1.add() 语法:set数据类型.add(添加的数据)
    *     2.delete() 语法:set数据类型.delete(删除的数据)
    *     3.has() 语法:set数据类型.has(判断的数据)
    *     4.clear() 语法:set数据类型.clear() 清除所有数据
    *     5.forEach() 语法:
    set数据类型.forEach(function (item,item,set)){ }遍历(item都是数据没有索引)
    *     6.for of 循环遍历   for of (Set没有索引没有key)
    *     7.size()属性 表示长度
    

Map 数据结构

    * 语法:new Map()
    * 实例化时接收一个二维数组
    * 里层数组[0] 作为 key / [1] 作为 value

    * 方法 1.set() 语法:Map数据结构.set(key,value)  可以写数组,对象,函数
    *      2.get() 语法:Map数据结构.get(要获取的key) 根据key获取value
    *      3.delete() 语法:Map数据结构.delete(要删除的key)
    *     4.clear() 语法:Map数据结构.clear() 清除所有数据
    *     5.forEach() 语法:Map数据结构.forEach(function (value,key,map)){ }
    *     6.for of 遍历map数据结构 遍历的是里面每一个内容的key和value
    *     7.has()方法 map数据结构.has(判断有无key)返回值是一个布尔值
    *     8.size()属性 长度