1、ES6基础

1.1什么是ES6

ECMAScript 6.0（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
标准的制定者有计划，以后每年发布一次标准，使用年份作为版本。因为ES6的第一个版本是在2015年发布的，所以又称ECMAScript 2015（简称ES2015）。

1.2ES6和JavaScript关系

1996年11月，JavaScript的创造者Netscape公司，决定将JavaScript提交给国际标准化组织ECMA（欧洲计算机制造商协会European Computer Manufacturers Association），希望这种语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是1.0版

该标准从一开始就是针对JavaScript语言制定的，但是之所以不叫JavaScript，有两个原因。一是商标，Java是Sun公司的商标，根据授权协议，只有Netscape公司可以合法地使用JavaScript这个名字，且JavaScript本身也已经被Netscape公司注册为商标。二是想体现这门语言的制定者是ECMA，不是Netscape，这样有利于保证这门语言的开放性和中立性。

因此，ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现（另外的ECMAScript方言还有Jscript和ActionScript）。日常场合，这两个词是可以互换的

ECMAScript是由ECMA（一个类似W3C的标准组织）参与进行标准化的语法规范。
ECMAScript定义了：

语言语法 – 语法解析规则、关键字、语句、声明、运算符等
类型 – 布尔型、数字、字符串、对象等
原型和继承
内建对象和函数的标准库 – JSON、Math、数组方法、对象自省方法等。

ECMAScript标准不定义HTML或CSS的相关功能，也不定义类似DOM（文档对象模型）的Web API，这些都在独立的标准中进行定义。ECMAScript涵盖了各种环境中JS的使用场景，无论是浏览器环境还是类似node.js的非浏览器环境

1.3基本语法

1.3.1声明变量

// 定义变量
//1) var 声明普通变量
//2) let 声明局部变量(块级变量)
//3) const 声明常量
var a1 = 1;
let a2 = 2;
const a3 = 3;

• et 声明局部变量

  • ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

• const 声明常量
  * const声明一个只读的常量。一旦声明，常量的值就不能改变。
  * 使用const命令声明变量，此变量必须立即初始化，不能留在后面赋值。否则会报错。
  * const的作用域与let命令相同：只在声明所在的块级作用域内有效

1.3.2 模板字符串

• 模板字符串，用于简化字符串拼凑

//ES5 ，拼凑字符串
var str = "<table>" +"<tr>" + "<td>标题</td>" + "</tr>" + "</table";//ES5 , /换行
var str2 = "<table> \<tr>  \<td>标题</td> \</tr> \</table>";//ES6
var str3 = `<table><tr><td></td></tr></table>
`;

• 在模板字符串中，可以通过${变量}获取变量的值。

var username = 'jack';
var age = 18;console.info(`你的姓名是${username} , 你的年龄是${age}`);

• 创建 demo04_str.js

var username = "jack";//使用js拼凑一个<table>
var table = "<table>" + "<tr>" + "<td>"+username+"</td>" + "</tr>" +"</table>";//模板字符串
var table2 = `
<table>
<tr><td>${username}</td><td></td>
</tr>
<tr><td></td><td></td>
</tr>
</table>
`;console.info(table)
console.info(table2)

1.3.3对象简写

• 简化的对象写法：省略同名的属性值、省略方法的function

let name = "张三";
let age = 18;let person = {                      //ES5写法name : name,age : age,getAge : function(){return this.age;}
}console.info( JSON.stringify(person));
console.info( person.getAge() );let person2 = {                     //ES6写法name,                              //省略同名的属性值age,        getAge(){                          //省略 functionreturn this.age;}
}console.info( JSON.stringify(person2));
console.info( person2.getAge() );

1.3.4箭头函数

• 箭头函数：用于定义匿名函数的一种简洁写法。（与Java中Lambda表达式极其相似）

//匿名函数
let fn = function(a,b){return a + b;
}
console.info( fn(5,10) )    //15//箭头函数基本语法
let fn2 = (a,b) => {return a + b;
}
console.info( fn2(5 , 3) )  //8//省略1：只有一个参数的情况下，小括号可以省略
// 完整写法
let fn3 = (a) => {return a * a;
}
console.info( fn3(5) )      //25// 省略写法
let fn32 = a => {return a * a;
}
console.info( fn32(5) )   //25//省略2：函数体只有一个条，大括号可以省略。如果是return语句，关键字return必须省略
let fn4 = a => a * a;
console.info( fn4(10) )     //100// 练习
let fn5 = () => console.info("abc");
fn5();          let fn6 = (a,b,c) => a+b;
console.info( fn6() )       //NaN (Not a number) let fn7 = (a,b,c) => a+b;
fn7(3,4,5)

1.3.5 JS中的循环遍历

• for循环遍历:普通循环，常用于处理数组(for (let i = 0;i < array.length;i++){})

• map():数组链式操作函数(array.map( fn ).xxx())

• forEach() :简化数组、Map、Set的遍历(xxx.forEach( fn ))

• 准备数据

var arr4 = [‘x’,‘y’,‘z’];

• map函数的使用

//map函数 , 将数组转换一个新数组
//var 新数组 = 旧数组.map( 处理函数 ); //旧数组中的每一个元素，都将通过“处理函数”进行处理
//实例：将数组 [‘a’,‘b’,‘c’] 转换成字符串 ‘cba’
var m = arr4.map( s => {
return s.toUpperCase();
}).reverse().join(",");
console.info(m);

• forEach函数的使用

//forEach遍历
arr4.forEach(s => { //遍历数组
console.info(s);
});

2.ES6高级

2.1高级语法

2.1.1变量声明

关键字	是否存在变量提升	是否存在暂时性死区	是否允许重复声明	是否允许重新赋值	是否允许只声明不赋值
var	存在	不存在	允许	允许	允许
let	不存在	存在	不允许	允许	允许
const	不存在	存在	不允许	不允许	不允许

• 创建 demo02_var.js
  

//1 var 声明的变量，可以提升
{var a = 10;
}
console.info(a);    //10//2 允许重复声明
var b = 20;
var b = 30;
console.info(b);   //30//3 允许重新赋值
b = 40;
console.info(b);   //40//4 允许只声明不赋值
var c;
console.info(c);    //undefined

• 创建 demo02_let.js
  • 注意：依次运行需要代码，其他代码需要使用/**/进行注释，存在运行错误的情况。

//1 let声明的变量，不允许变量提升
/*
{let a = 10;
}
console.info(a);    //异常， a is not defined
*///2 存在暂时性死区 : 在块代码中，所有的变量都是局部变量 (必须先声明，再使用)
/*
var b = 10;
{console.info(b);        //b is not definedlet b = 20;
}
*///3 不允许重复声明
/*
var c = 10;
let c = 20;     //Identifier 'c' has already been declared  (变量c已经声明了)
*//**/
//4 允许重新赋值
let d = 10;
d = 20;
console.info(d);    //20//5 允许只声明不赋值
let e;
console.info(e);    //undefined

• 创建：demo02_const.js

const a = 10;//1. 不允许提升
/*
{const b = 10;
}
console.info(b)     //b is not defined
*///2. 存在暂时性死区
/*
var c = 10;
{console.info(c)     //c is not definedconst c = 20;
}
*///3. 不允许重复声明
/*
const a = 20;           //Identifier 'a' has already been declared
*///4. 不允许重新赋值
/*
a = 20;             //Assignment to constant variable.
*///5. 不允许只声明不赋值
//const d;            // Missing initializer in const declaration

2.1.2解构赋值

• ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）
• ES5获得对象数据的语法，如下：

const people = {name: 'lux',age: 20
}
const name = people.name;				//ES5写法
const age = people.age;
console.log(name + ' ‐‐‐ ' + age)

• 对象解构：从一个对象一次性解析出多个属性给不同变量
  • 解构的变量名，必须与属性名保持一致。

var person = {username : "jack",password : "1234","show" : function(){console.info("show执行了");},course : {en : 100,math : 99}
}//es5获得数据
console.info( person.username )
console.info( person.password )
person.show()//对象解构
let {username,password,show, age } = person;
console.info(username)      //jack
console.info(password)      //1234
console.info( show )        //[Function: show]
console.info( age )         //undefined
show();                     //show执行了//结构对象中的对象
let {course} = person;
console.info(course)    //{ en: 100, math: 99 }
let {course : {en, math}} = person;
console.info(en)        //100

• 数组解构：按照数组排序依次赋值

// 声明数组
var arr = ['江苏','宿迁'];// 从数组中解构成员
let [province, city] = arr;
console.info(province)
console.info(city)//交换2个变量
let x = 10;
let y = 20;
console.info(`x = ${x} , y = ${y}`);
[y,x] = [x,y];
console.info(`x = ${x} , y = ${y}`);

• 常见应用：遍历Map （稍后讲解）

var map = new Map();
map.set('first', 'hello');
map.set('second', 'world');for (let [key, value] of map) {console.log(key + " is " + value);
}
// first is hello
// second is world

• 常见应用：模块内容的提取（稍后讲解）

const { SourceMapConsumer, SourceNode } = require(“source-map”);

2.1.3函数参数名默认值

• 在声明函数参数时，给参数设置默认值

function log(x, y = ‘World’) { //y参数设置默认值
console.log(x, y);
}
log(‘Hello’) // Hello World
log(‘Hello’, ‘China’) // Hello China
log(‘Hello’, ‘’) // Hello

• 默认值和解构

function fun1({x = “x1” , y } = {y : “y2”}){
return [x , y] ;
}
console.info( fun1() ); //[ ‘x1’, ‘y2’ ]
console.info( fun1({}) ); //[ ‘x1’, undefined ] ，
//{} 覆盖 {y:“y2”} ,解构默认值，x=x1,y=undefined

• 默认值应用：参数必填

console.info(args);
}
fun2();
fun2(“abc”);

2.1.4箭头函数的this

• this对象：
  • function函数中this表示当前对象
  • 箭头函数没有自己的this，箭头函数的this看外层的是否有函数
    1. 如果有，外层函数的this就是内部箭头函数的this，
    2. 如果没有，在浏览器环境下this是window；在node.js环境下为指定环境（例如：vue）
• 创建 demo03_2.js 文件

var name="外部";
var user = {name : '内部',show : function(){console.info(this.name)},show2 : () => {console.info(this.name) console.info(user.name)}
}user.show()         //内部
user.show2()        //undefined、内部 

• 创建 demo03_3.html

<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body></body>
</html>
<script>var name="外部";var user = {name : '内部',show : function(){console.info(this.name)},show2 : () => {console.info(this.name)console.info(user.name)}}user.show()         //内部user.show2()        //外部、内部（在浏览器端，this表示window）
</script>

2.1.5Map数据结构（Map集合）

• JavaScript的对象（Object），本质上是键值对的集合（Hash结构），但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。
• ES6提供了Map数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串。

var map = new Map([['k1','v1'],['k2','v2']
]);
//设置数据
map.set('k3','v3');
console.info(map);      //Map { 'k1' => 'v1', 'k2' => 'v2', 'k3' => 'v3' }map.set(5,"数字key")
console.info(map);      //Map { 'k1' => 'v1', 'k2' => 'v2', 'k3' => 'v3', 5 => '数字key' }//获得数据
console.info( map.get('k1') );      //v1
console.info( map.get(5) );         //数字key
console.info( map.get('k100') );   //undefined//判断数据是否存在
console.info( map.has('k2') );      //true//删除数据
map.delete('k2');
console.info(map);             //Map { 'k1' => 'v1', 'k3' => 'v3', 5 => '数字key' }//遍历数据
map.forEach( (k,v) => {console.info(`键是${k},值是${v}`)
});

2.1.6Set数据结构（Set集合）

• ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

//Set集合：存储唯一数据
var set = new Set();
set.add(1);
set.add(2);
set.add(3);
set.add(2);
set.add(1);console.info( set );        //Set { 1, 2, 3 }

• 过滤数组中重复的数据

var arr = [2, 3, 5, 4, 5, 2, 2];//方式1
var set2 = new Set();
// 1) 遍历数组，将数据添加到set
arr.map( s => set2.add(s) );
// 2) 遍历set集合，添加到新数组
var arr2 = [];
set2.forEach( v => arr2.push(v) );
console.info( arr2 );       //[ 2, 3, 5, 4 ]//方式2
var arr3 = [ ... new Set(arr) ]
console.info( arr3 );       //[ 2, 3, 5, 4 ]

2.1.7for…of遍历

• 在JavaScript中，数据的遍历存在多种，在ES6中提供了for…of ，用于统一所有数据结构的遍历

//准备数据
var arr4 = ['x','y','z'];var map4 = new Map();
map4.set("a","1111");
map4.set("b","2222");
map4.set("c","3333");var set4 = new Set();
set4.add("m");
set4.add("n");
set4.add("L");var obj4 = {name : "jack",password : "1234"
}

• for…of遍历

// for ... of 
for(let a of arr4){           //遍历数组console.info(a);
}
for(let [k,v] of map4){      //遍历Map，for…of与解构结合遍历Mapconsole.info(`输出的数据键是${k}值是${v}`);
}
for(let s of set4){          //遍历Setconsole.info(s);
}
for(let key of Object.keys(obj4)){   	//自定义对象不能遍历,需要借助keys转换成“键数组”console.info(`对象的键是${key},值是${obj4[key]}`);
}
for(let [k,v] of Object.entries(obj4)){//也可以借助entries转换成“键值对”console.info(`entries : 对象的键是${k},值是${v}`);
}//补充：自定义对象通过特殊处理（[Symbol.iterator]）也可以遍历，但存在bug，不完善，参考如下：
let obj = {//原有内容length: 3,[Symbol.iterator]: Array.prototype[Symbol.iterator]
}

• JS中已有的遍历

遍历方式	描述	实例
for循环遍历	普通循环，常用于处理数组	for (let i = 0;i < array.length;i++){
map()	数组链式操作函数	array.map( fn ).xxx()
forEach()	简化数组、Map、Set的遍历	xxx.forEach( fn )
for…in	任意顺序遍历一个对象的可枚举属性	for(let xx in obj) {}
for…of	不同的数据结构提供统一的访问机制	for(let xx of obj) {}

• map函数的使用

//map函数 , 将数组转换一个新数组  
//var 新数组 = 旧数组.map( 处理函数 );		//旧数组中的每一个元素，都将通过“处理函数”进行处理
//实例：将数组 ['a','b','c'] 转换成字符串 'cba'
var m = arr4.map( s => {return s.toUpperCase();
}).reverse().join(",");
console.info(m);

• forEach函数的使用

//forEach遍历
arr4.forEach(s => {         //遍历数组console.info(s);
});
map4.forEach( (k,v)=> {     //遍历Mapconsole.info(`${k} ${v}`);
});
set4.forEach( k => {        //遍历Setconsole.info( k ) ;
});
//obj4.forEach();           //不支持

• for…in遍历对象

for(let prop in obj4){console.info( prop  + "," + obj4[prop]);
}

2.1.8rest参数（形参…）

• rest参数，就是JS的可变参数。在形参列表的最后一位变量前，使用“…”
  函数名(参数1, 参数2, …可变)

function add(...num){               	//可变参数num，就是一个数组，运行时存放了所有的实参var sum = 0 ;num.forEach( i => sum += i);return sum;
}
console.info( add(1,2,3) );function count(args,...other){console.info(arguments.length);     //虽有参数的个数，伪数组，不能使用forEach进行遍历console.info(other.length);         //可变参数的个数，真数组，可以使用forEach进行遍历
}
count(1,2,3);

2.1.9扩展运算符（实参…）

• 扩展运算符（spread）是三个点（…）。它好比rest参数的逆运算

  • 操作数据是数组，将一个数组转为用逗号分隔的参数序列。
  • 操作数据是对象，取出参数对象的所有可遍历属性，拷贝到当前对象之中

var arr = ['a','b','c'];
function fun3(x,y,z){console.info( [x,y,z] );
}fun3( arr );        //[ [ 'a', 'b', 'c' ], undefined, undefined ]
fun3( ...arr );     //[ 'a', 'b', 'c' ]

let z = { a: 3, b: 4 };
let n = { …z }; // { a: 3, b: 4 }

• 应用：合并数组

var arr1 = [‘a’, ‘b’];
var arr2 = [‘c’];
var arr3 = [‘d’, ‘e’];
//通过 concat函数合并
console.info( arr1.concat(arr2 ,arr3 ) );
//通过扩展运算符合并
console.info( […arr1 ,…arr2 ,…arr3] );

• 应用：字符串拆分

//通过split拆分字符串
console.info( “abc”.split("") );
//通过扩展运算符拆分
console.info( […“abc”] );

2.2模块化

• 在ES6之前，JavaScript一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。

• 在ES6之前，社区提供了一些解决方案，最主要两种：CommonJS和AMD

  • CommonJS ，静态优化，用于服务器。
    • 模块参考：https://blog.csdn.net/arsaycode/article/details/78959780
  • AMD两种，运行时加载，用于浏览器。
    • AMD参考：https://efe.baidu.com/blog/dissecting-amd-what/

2.2.1ES5 CommonJS解决方案

• CommonJS一个服务器端的解决方案（commonsJs可以在node.js运行）
• CommonJS 需要一个兼容的脚本加载器，来支持require 和 module.exports 函数，用于模块导入导出。
• Node.js支持此种思想
• 模块导出

module.exports = (a,b)=> a+b;

• 模块导入

let add = require("./demo07_1");
console.info( add(1,2) );

• 运行
  

• require 运行剖析

当 Node 遇到 require(X) 时，按下面的顺序处理。
（1）如果 X 是内置模块（比如 require(‘http’）)
　　a. 返回该模块。
　　b. 不再继续执行。
（2）如果 X 以 “./” 或者 “/” 或者 “…/” 开头
　　a. 根据 X 所在的父模块，确定 X 的绝对路径。
　　b. 将 X 当成文件，依次查找下面文件，只要其中有一个存在，就返回该文件，不再继续执行。
X
X.js
X.json
X.node
　　c. 将 X 当成目录，依次查找下面文件，只要其中有一个存在，就返回该文件，不再继续执行。
X/package.json（main字段）
X/index.js
X/index.json
X/index.node
（3）如果 X 不带路径
　　a. 根据 X 所在的父模块，确定 X 可能的安装目录。
　　b. 依次在每个目录中，将 X 当成文件名或目录名加载。
（4） 抛出 “not found”

• 特殊用法：导入的同时，执行函数
  

2.2.2ES6 module 隐式要求

• ES6的模块自动采用严格模式，不管你有没有在模块头部加上"use strict";。
• 严格模式主要有以下限制。

变量必须声明后再使用
函数的参数不能有同名属性，否则报错
不能使用with语句
不能对只读属性赋值，否则报错
不能使用前缀0表示八进制数，否则报错
不能删除不可删除的属性，否则报错
不能删除变量delete prop，会报错，只能删除属性delete global[prop]
eval不会在它的外层作用域引入变量
eval和arguments不能被重新赋值
arguments不会自动反映函数参数的变化
不能使用arguments.callee
不能使用arguments.caller
禁止this指向全局对象
不能使用fn.caller和fn.arguments获取函数调用的堆栈
增加了保留字（比如protected、static和interface）

2.2.3ES6 module

• 一个模块，就是一个对其他模块暴露自己的属性或者方法的文件。

  • ES6 模块主要由两个命令构成：export和import。
  • export命令：规定模块的对外接口。一条export语句声明一次，一个文件中可有多条。
  • import命令：导入其他模块。

• export 对外声明成员

// 写法一：声明一个成员
export var m = 1;
//写法二：批量声明成员
var m = 1;
export {m};
// 写法三：声明成员时起别名
var n = 1;
export {n as m};

• import 导入模块

// 方式1：使用其他模块的成员
import { 成员 } from ‘模块’;
// 方式2：导入模块时，给成员起别名
import { 成员 as 别名 } from ‘模块’;
// 方式3：导入所有
import { * as 别名 } from ‘模块’;

• Node.js演示 【注意：扩展名为mjs】
  • Node.js早起版本不支持 export/import，9版本之后支持，但需要进行特殊处理。
• 步骤一：编写 demo08_1.mjs文件

var username = ‘jack’;
function getName(){
return username;
}
export { username , getName }

• 步骤二：编写demo08_2.mjs文件，导入demo02_1模块

import {username,getName} from ‘./demo08_1’;
console.info( username );
console.info( getName() );

• 步骤三：使用node运行

node --experimental-modules .\demo08_2.mjs

• 如果使用的不是mjs文件，如果执行时没有添加参数 --experimental-modules，会出现如下异常：

2.2.4默认导出 export default

• 使用import命令加载模块，必须知道模块中的的变量名或函数名，否则无法加载。
• 为了方便使用模块，模块允许使用export default 定义默认输出。一个模块只允许一个
• 默认输出。
  • 默认导出变量
  • 编写 es6_part1.mjs，声明变量

var sum = 100;
export default sum;

• 编写 es6_part2.mjs，自定义变量名

import demo from ‘./es6_part1’;
console.info( demo ); //demo是变量名

• 默认导出函数
  • 编写 es6_part1.mjs，声明函数

function show(){
return “abc”;
}
export default show;

• 编写 es6_part2.mjs，自定义函数名

import demo from ‘./es6_part1’;
console.info( demo() ); //demo是函数名，需要调用必须使用()

• 默认和其他导出内容结合使用
  • 导出

export default 默认导出内容;
export {其他成员列表};

• 导入
  import 默认,{其他成员列表} from 模块;

• 扩展内容：
  • 本质上，export default就是输出一个叫做default的变量或函数名，导入时允许重命名。
• 导出

function add(x, y) {
return x * y;
}
//方式1：默认导出
//export default add;
//方式2：普通导出，将变量名重命名成default。与“方式1等同”
export {add as default};

• 导入

//方式1：默认导入
import xxx from ‘模块’;
//方式2：普通导入，并将变量名default重命名成xxx，与“方式1等同”
import { default as xxx } from ‘模块’;

3.ajax使用

3.1前置技术：Promise对象

• Promise是异步编程的一种解决方案.

• Promise对象以同步操作，完成异步编程。

• 比传统的解决方案——回调函数和事件——更合理和更强大

• 异步操作演示

console.info(“1.异步执行前”);
setTimeout(function(){
console.info(“2.异步执行中”);
} , 1000);
console.info(“3.异步执行后”);
/* 输出结果如下：（第二条会在1秒后执行）
1.异步执行前
3.异步执行后
2.异步执行中
*/

• Promise演示

console.info(“1.异步执行前”);
new Promise( (resolve) => {
setTimeout(function(){
console.info(“2.异步执行中”);
resolve(); //成功执行
});
}).then( () => {
console.info(“3.异步执行后”);
});
/*输出结果如下：
1.异步执行前
2.异步执行中
3.异步执行后
*/

• 基本语法
  • 之后使用Promise的对象是已经创建好的，我们只需要编写then就可以了。

new Promise( (resolve, reject) => {
if(异步操作成功){
resolve(成功参数); //固定内容，成功时执行
}
}).then( (res) => {
//异步操作成功执行后，将执行then块。
})
;

• 高级语法

new Promise( (resolve, reject) => {
if(异步操作成功){
resolve(成功参数); //固定内容，成功时执行
} else {
reject(失败参数); //固定内容，失败时执行
});
}).then( (res) => {
//异步操作成功执行后，将执行then块。
}).catch( (res ) => {
//异步操作失败后，将执行catch块
});

• 应用：axios处理ajax
  

3.2axios模块使用

3.2.1概述

• axios是什么？
  • Axios，基于 Promise 的 HTTP 客户端，可以工作于浏览器中，也可以在 node.js 中使用。
  • 官网：http://www.axios-js.com/
• 功能
  • 从浏览器中创建 XMLHttpRequest
  • 从 node.js 中创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防止 XSRF 攻击

3.2.2发送各种请求

• GET请求

<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="js/axios.js"></script><script>// axios.get("请求路径").then(成功函数).catch(失败函数)var url = "http://data.javaliang.com/data/jack/student"axios.get(url).then(function (response) {// 查询结果response.data.data.forEach(student => {console.info(student)});console.info(response)}).catch(function (error) {console.info(error)})</script>
</head>
<body></body>
</html>

• POST请求

<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="js/axios.js"></script><script>// axios.post("请求路径",参数对象).then(成功函数).catch(失败函数)var url = "http://data.javaliang.com/data/jack/student"var obj = {"id":"s001","name":"张三","age":"18","sex":"男",}axios.post(url, obj).then(function (response) {// 查询结果console.info(response.data)}).catch(function (error) {console.info(error)})</script>
</head>
<body></body>
</html>

• put请求

<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="js/axios.js"></script><script>// axios.put("请求路径",参数对象).then(成功函数).catch(失败函数)var url = "http://data.javaliang.com/data/jack/student"var obj = {"id":"s001","name":"张三33","age":"182","sex":"男",}axios.put(url, obj).then(function (response) {// 查询结果console.info(response.data)}).catch(function (error) {console.info(error)})</script>
</head>
<body></body>
</html>

• delete请求

<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="js/axios.js"></script><script>// axios.put("请求路径",参数对象).then(成功函数).catch(失败函数)var url = "http://data.javaliang.com/data/jack/student/s001"axios.delete(url).then(function (response) {// 查询结果console.info(response.data)}).catch(function (error) {console.info(error)})</script>
</head>
<body></body>
</html>

3.2.3async异步写法（es8）

async function 函数名() {
let response = await axios.get(‘请求路径’)
}

• GET请求

<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="js/axios.js"></script><script>/*async function 函数名() {let response = await axios.get('请求路径')}*/async function findAll() {var url = "http://data.javaliang.com/data/jack/student"let { data } = await axios.get(url)// 遍历数据data.data.forEach(student => {console.info(student)});}findAll()</script>
</head>
<body></body>
</html>

• POST请求

<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="js/axios.js"></script><script>/*async function 函数名() {let response = await axios.post('请求路径',参数对象)}*/async function save() {var url = "http://data.javaliang.com/data/jack/student"var obj = {"id":"s002","name":"张三","age":"18","sex":"男",}let { data } = await axios.post(url, obj)console.info(data)}save()</script>
</head>
<body></body>
</html>

• PUT请求

<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="js/axios.js"></script><script>/*async function 函数名() {let response = await axios.put('请求路径',参数对象)}*/async function update() {var url = "http://data.javaliang.com/data/jack/student"var obj = {"id":"s002","name":"张三","age":"18","sex":"男",}let { data } = await axios.put(url, obj)console.info(data)}update()</script>
</head>
<body></body>
</html>

• DELETE请求

<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="js/axios.js"></script><script>/*async function 函数名() {let response = await axios.delete('请求路径',参数对象)}*/async function del() {var url = "http://data.javaliang.com/data/jack/student/s001"let { data } = await axios.delete(url)console.info(data)}del()</script>
</head>
<body></body>
</html>

3.3Node中的使用

3.3.1安装

Node.js的安装教程再另一篇笔记嗷~

3.3.2发送各种请求

• 导入axios模块，并设置基本项

//1. 导入axios模块
const axios = require(‘axios’)
//2. 设置基本项
//2.1 确定后端服务器基本地址
axios.defaults.baseURL = ‘http://localhost:8080’;

• 发送get请求
  

//1. 导入axios模块
const axios = require(‘axios’)
//2. 设置基本项
//2.1 确定后端服务器基本地址
axios.defaults.baseURL = ‘http://localhost:8080’;
//3. 发送get请求
axios.get(’/test’)
.then(function (response) {
console.info(‘get请求成功’)
//console.info(response)
})
.catch(function (error) {
console.info(‘get请求失败’)
//console.info(error)
})

• 发送post请求

//4 发送post请求
//4.1 准备请求数据
let user = {
username:‘jack’,
password:‘1234’
}
//4.2 发送post请求
axios.post(’/test’, user)
.then(function (response) {
//1) 响应状态码
console.info(response.status)
//2) 响应数据
console.info(response.data)
})
.catch(function (error) {
console.info(‘post请求失败’)
})

• 发送put请求

//5 发送put请求
axios.put(’/test/100’, user)
.then(function (response) {
console.info(response.status)
})
.catch(function (error) {
console.info(‘put请求失败’)
console.info(error)
})

• 发送delete请求

//6 发送delete请求
axios.delete(’/test/100’)
.then(function (response) {
console.info(response.data)
})
.catch(function (error) {
console.info(‘delete请求失败’)
})

3.3.3async异步写法（es8）

• Promise使用then函数进行链式调用，编写风格是“从左向右”。

• ES8提供async/await改变异步的编写风格，从上到下，像写同步代码来完成异步操作。

  • 特点：async 必须修饰外层调用函数，await必须修饰异步函数（也就是Promise）

• 改写get请求

//3. 发送get请求
async function findAll () {
let {status,data} = await axios.get(’/test’);
console.info(${status} , ${data})
}
findAll();

• 改写post请求

//4 发送post请求
//4.1 准备请求数据
let user = {
username:‘jack’,
password:‘1234’
}
//4.2 发送post请求
async function save(){
let {data} = await axios.post(’/test’, user);
console.info( data )
}
save();

• 改写put请求

//5 发送put请求
async function update(){
let {status} = await axios.put(’/test/100’, user);
console.info(status)
}
update();

• 改写delete请求

//6 发送delete请求
async function deleteDemo(){
let {data} = await axios.delete(’/test/100’);
console.info(data)
}
deleteDemo();

3.3.4拦截器

• 请求拦截器

//2.2 请求/响应 拦截器
axios.interceptors.request.use( config => {
config.headers.Authorization = ‘custom content’;
return config;
}, error => {
return Promise.reject(error);
});

• 修改controller

@GetMapping
public ResponseEntity findAll(HttpServletRequest request){
String authorization = request.getHeader(“Authorization”);
return ResponseEntity.ok("查询所有: " + authorization);
}

• 测试

//3. 发送get请求
async function findAll () {
let {status,data} = await axios.get(’/test’);
console.info(${status} , ${data})
}
findAll();

增删改查都练会了嘛~
准备准备学Vue啦
蹲蹲我的Vue叭~