本笔记为收听B站Blue老师ES6精讲视频、B站老陈的Axios拦截器的应用与Vue请求代理配置视频、

ES6学习笔记

• 一、ES6语法特性
• • 变量声明
  • 解构赋值
  • 函数
  • • 箭头函数和this
  • 参数展开、数组展开、json展开
  • • 原生对象扩展
  • 字符串扩展
  • class关键字、构造器
  • 继承
  • 面向对象的应用react
  • JSON对象
  • 简写规则
  • 异步与同步
  • generator生成器函数的基本概念
• 二、Axios
• • 基本概念
  • 实例分析
  • Axios API：
  • 创建实例
  • 拦截器
• 三、Ajax
• • 基础概念
  • Ajax实例

一、ES6语法特性

变量声明

• ES6中使用let声明变量，const声明常量
• let和const可以防止重复声明变量问题，当重复声明同一个变量时候，后台会报错
• 在块级作用域时候如果直接使用var会出现错误,因为在ES5中var是函数级的定义，对于let和const来说是块级的定义，也就是在某一个代码块中才有意义{}。

//给abc三个按钮添加点击事件，分别显示012
//解决方法一：使用闭包解决var函数级定义的问题
let aBtn = document.getElementsByTagName('input');
(function (i){aBtn[i].onclick = function(){alert(i);};
})(i);
//解决方法二：使用let块级声明变量
for(let i = 0; i < aBtn.length; i++){aBtn[i].onclick = function(){alert(i);};
}

解构赋值

• 常用解构赋值的语法格式

//1.对json的结构赋值
json = { a: 12 , b: 5 };
let {a,b} = json;
//2.对数组的解构赋值
arr = [12,5,8];
let [a,b,c] = arr;
//3.请求数据的解构赋值
//ajax请求数据的时候，数据的结构通常为：{code:xx,data:xx,msg,...}
//可以通过let对数据的各个数据项进行解构赋值
let {code,data} = $.ajax('xxx'); //取出数据的code和data

• 解构赋值的要求：两边的结构必须一样，而且解构赋值需同时完成

//错误语法格式
let {a,b} = [12,6];
let {a,b};
{a,b} = {a:12, b:5};
//正确语法格式
let {a,b} = { 12 , 6 };
let {a,b} = {a:12, b:5};

函数

箭头函数和this

• 箭头函数的语法格式

//对数组排序的简写
let arr = [12, 8, 37, 26, 9 ];
arr.sort((n1,n2) => {return n1 - n2;});
//ES6的更简便写法，规则如下
//1.如果有且仅有一个参数，()可以不写
function show(n,fn){alert(fn(n));
}
show(12, n => n+5); //将12+5 可以省略+5的函数编写
//2.如果有且仅有一个语句并且是return，{}也可以不写
arr.sort((n1,n2) => n1 - n2);

• 修正this的问题

参数展开、数组展开、json展开

• 收集剩余参数，…c必须为最后一个

收集剩余参数，...c必须为最后一个
function show(a,b,...c){console.log(a,b,c); //a=12,b=5,c为剩余数组成的数组
} 
show(12,5,4,8,19,27);

• 数组展开

//展开arr1对abc进行赋值
let arr1 = [12,5,8];
function show(a,b,c){alert(a+b+c)
}
show(...arr1); 
//连接两个数组
let arr2 = [4,5,6];
let arr = [...arr1,...arr2]; //输出12，5，8，4，5，6

• json展开

let json = {a:12 , b:5,c:99};
let json2 = {...json,d:999
};

原生对象扩展

• Array扩展：map、reduce、filter、forEach

//1.map 映射
let arr = [68, 53, 12, 98, 65];
let arr2 = arr.map(item => 60 ? '及格' : '不及格');
alert(arr2); //[及格，不及格，不及格，不及格，及格]
//2.reduce n=>1
let result = arr.reduce(function(tmp, item, index){return tmp + item; //298
})
//3.filter 过滤
let arr3 = arr.filter(item => {return item % 2 == 0;
})
//4.forEach 遍历
arr.forEach(item,index) => {alert(`第${index}个：xx`); //${index}是模板字符串写法
}

• json.stringify 序列化 json.parse 解序列化

JSON.stringify({a:12,b:5})  => '{"a":12,"b":5}'

字符串扩展

• 字符串新方法：startsWith、endsWith

//1.startsWith
let str = 'http://it.kaikeba.com';
if(str.startsWith('hhtp://')){alert('普通网址');
}else if(str.startsWith('https://')){alert('加密网址');
}

• 字符串模板：` $

//1.${}
let a = 12;
let str = `a${a}bc`; //a12bc
//可以折行
let str2 = `
${title}
${content}
`

class关键字、构造器

class User{constructor(name,pass){this.name = name;this.pass = pass;}
}
showName(){alert(this.name);
}
showPass(){alert(this.pass);
}
var u1 = new User('blue', '123456');

继承

class VipUser extends User{constructor(name, pass, level){super(name,pass);this.level = level;}
}
showLevel(){alert(this.level);
};
var v1 = new User('blue', '123456', 3);

面向对象的应用react

class Item extends React.Component{constructor(...args){super(...args);}render(){return <li>{this.props.str}</li>;}
}
class List extends React.Component{constructor(...args){super(...args);}render(){return <ul><Item str="abc"></Item><Item str="ddd"></Item></ul>;}
}

JSON对象

let json = {a:12 , b:5};
let str = 'http://baidu.com' + json.stringify(json); //解析化 http://baidu.com{"a":12 , "b":5};
let str = 'http://baidu.com' + encodeURIComponent(json.stringify(json)); //将字符串变成url
let str = {"a":"12" , "b":"15"} //必须为json标准写法才能解析
let json = JSON.parse(str);

简写规则

//名字和值一样的时候 留一个就行
let a = 12;
let b = 5;
let json = {a,b,c:15};
//方法简写格式
show(){...}

异步与同步

let p = $.ajax({url: 'data/arr.txt',dataType:'json'}); //是一个promise对象
Promise.all([$.ajax({url: 'data/arr.txt', dataType: 'json'}),$.ajax({url: 'data/json.txt', dataType: 'json'}),
]).then(function(results){let [arr, json] = results;alert('成功了');
},function(){alert('失败了');
});

generator生成器函数的基本概念

• generator函数中途能够停止
• 基本语法格式

function *show(){alert('a');yield;alert('b');
}
let genObj = show();
genObj.next(); //出现a
genObj.next(); //出现b
//可以通过generator解决普通函数异步操作
function *函数(){代码...yield ajax(xxx);代码...
}

二、Axios

学习链接：http://www.axios-js.com/

基本概念

• axios是一个基于promise的http库，可以在浏览器和node.js中使用
• 特性
• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF

实例分析

• 执行get请求

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345').then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});// 上面的请求也可以这样做
axios.get('/user', {params: {ID: 12345}}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});

• 执行post请求

axios.post('/user', {firstName: 'Fred',lastName: 'Flintstone'}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});

• 执行多个并发请求

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) {// 两个请求现在都执行完成}));

Axios API：

• 基本概念：可以通过向 axios 传递相关配置来创建请求
• axios(config)

// 发送 POST 请求
axios({method: 'post',url: '/user/12345',data: {firstName: 'Fred',lastName: 'Flintstone'}
});
// 获取远端图片
axios({method:'get',url:'http://bit.ly/2mTM3nY',responseType:'stream'
}).then(function(response) {response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});

• 请求方法的别名: url、method、data 这些属性都不必在配置中指定。
• axios.request(config)
• axios.get(url[, config])
• axios.delete(url[, config])
• axios.head(url[, config])
• axios.options(url[, config])
• axios.post(url[, data[, config]])
• axios.put(url[, data[, config]])
• axios.patch(url[, data[, config]])
• 并发请求
• axios.all(iterable)
• axios.spread(callback)

创建实例

• 创建实例的语法格式如下

const instance = axios.create({baseURL: 'https://some-domain.com/api/',timeout: 1000,headers: {'X-Custom-Header': 'foobar'}
});

• 请求配置

{url:'' ,//用于请求的服务器 URLmethod:'' ,//创建请求时使用的方法,默认为gettransformRequest:[function(data,headers){return data;}],//`transformRequest` 允许在向服务器发送前，修改请求数据，只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法，后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 StreamtransformResponse:[function(data){return data;}],// `transformResponse` 在传递给 then/catch 前，允许修改响应数据headers:{'':''},//即将被发送的自定义请求头params:{}, //即将与请求一起发送的 URL 参数data:{}, //作为请求主体被发送的数据，只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'timeout:, // 指定请求超时的毫秒数(0 表示无超时时间),如果请求话费了超过 `timeout` 的时间，请求将被中断
}

• 响应结构

{data: {}, // `data` 由服务器提供的响应status: 200, // `status` 来自服务器响应的 HTTP 状态码statusText: 'OK',  // `statusText` 来自服务器响应的 HTTP 状态信息headers: {},// `headers` 服务器响应的头config: {}, // `config` 是为请求提供的配置信息request: {} //是生成此响应的请求，
}

拦截器

• 在请求或响应被 then 或 catch 处理前拦截它们
• 拦截器的语法格式如下

// 添加请求拦截器
axios.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config;}, function (error) {// 对请求错误做些什么return Promise.reject(error);});// 添加响应拦截器
axios.interceptors.response.use(function (response) {// 对响应数据做点什么return response;}, function (error) {// 对响应错误做点什么return Promise.reject(error);});//移除拦截器
const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);//自定义axios拦截器
const instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

三、Ajax

学习链接：https://www.w3school.com.cn/ajax/index.asp

基础概念

• AJAX 是一种用于创建快速动态网页的技术：通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

Ajax实例

<head>
<script type="text/javascript">
//在页面的head部份添加一个