|
day4
解决异步编程的方案
-
回调函数(回调地狱) -
generator(生成器函数) -
promise(承诺对像) -
aync 目前最简便的解决异步编程的方案
1.Generator函数 生成器函数（异步编程的解决方案）
? 形式上来看，Generator函数是一个普通函数。但是有两个特征：function关键字与函数名之间有一个星号；函数体内部使用yield表达式，定义不同的内部状态。
执行
调用Generator函数，返回一个遍历（迭代）器对象，代表Generator函数的内部指针可以调用遍历器对象的next方法，就会返回一个有着value和done两个属性的对象 参数可以像普通函数一样传递参数
function* myGenerator(){
yield 'hello'
yield 'world'
yield 'es6'
return 'end'
}
console.log(myGenerator());
let i =myGenerator()
console.log(i.next());
console.log(i.next());
console.log(i.next());
console.log(i.next());
next参数
next方法可以带一个参数，该参数就会被当作上一个yield表达式的返回值
function* gen(x){
let y = yield x+1;
return y 4 }
let iterator = gen(5);
iterator.next()
iterator.next(8)
Generator函数实现自定义迭代器
创建一个类数组对象的类，用于生成类数组对象，并且实现类数组对象的迭代器函数
class ArrayLike{
constructor(args){
for(let i=0;i<args.length;i++){
let val = args[i]
this[i] = val;
}
Object.defineProperty(this,'length',{
configurable:true,
enumerable:false,
value:args.length
})
}
* [Symbol.iterator](){
for(let k in this){
let v = this[k]
let index = parseInt(k)
yield {value:v,done:index<this.length?false:true}
}
}
}
let arr = new ArrayLike(['terry','larry','tom']);
console.log(arr);
for(let a of arr){
console.log(a);
}
作用：生成迭代器 异步编程的解决方案
?
2.Promise（异步编程的新解决方案）缓解异步编程
? Promise是一个构造函数，构造一个承诺对象
? 承诺的发起 pending
? 承诺的兑现 resolved
? 承诺未兑现 rejected
axios 基于承诺对象
待定pending 初始状态，既没有被兑现，也没有被拒绝
已兑现fulfilled 意味着操作成功完成
已拒绝 rejected 意味着操作失败
let p =new Promise(function (resolve,reject){
if(true){
resolve('承诺兑现了')
}else{
reject('承诺未兑现')
}
})
console.log(p);
function getRandom(){
return new Promise(function(resolve,reject){
let Random=Math.random()
if(Random>0.5){
resolve('兑现成功'+Random)
}else{
reject('兑现未成功'+Random)
}
})
}
let r=getRandom()
console.log(r);
1.构造函数
创建一个新的promise对象
let p =new Promise(function(resolve,reject){})
Promise 的实现会立即执行参数function函数，并传入resolve和reject函数
2.实例方法
Promise.prototype.then()
为Promise实例添加状态改变时的回调函数，该函数的第一个参数是resolved状态的回调函数，第二个参数是rejected状态的回调函数，它们是可选的
Promise.prototype.catch()
为Promise实例指定发生错误时的回调函数。时then(null,callback)的别名
Promise.prototype.finally()
该方法用于指定不管Promise对象最后状态如何，都会执行的操作
var axios = {
get(url) {
return new Promise(function (resolve, reject) {
let xhr = new XMLHttpRequest();
xhr.open('get', url);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send()
xhr.onreadystatechange = function () {
if (this.readyState == 4) {
if (this.status == 200) {
resolve(this.response)
} else {
reject(this.response)
}
}
}
})
}
}
axios.get('http://139.196.156.38:8888/index/carousel/findAll')
.then((res) => {
console.log(JSON.parse(res));
})
.catch((err) => {
console.log(err);
})
Promise.allSettled(iterable)
3.静态方法
Promise.all(iterable) Promise.all([p1,p2,p3])
参数是将多个承诺对象合并成一个承诺对象的数组
返回一个新的promise对象，该promise对象在iterable参数对象里所有的promise对象都成功的时候才会触发成功，一旦有任何一个iterable
Promise.allSettled(iterable)
等到所有promises都已敲定settled(每个promise都兑现fulfilled或已拒绝rejected)，返回一个promise，该promise在所有promise完成后完成，并带有一个对象数组，每个对象对应每个promise的结果
Promise.race(iterable) Promise.race([p1,p2,p3])
? 只要有一个承诺对象成功或失败
Promise.reject(reason)
返回一个状态为失败的Promise对象，并将给定的失败信息传递对应的处理方法
Promise.resolve(value)
将一个对象转化为承诺对象
3.async await
async函数就是Generator函数的语法糖。异步函数同步化 (从根本上解决了异步函数的问题)
写法：将Generator函数的星号*替换成async，将yield替换成await
let axios = require('axios');
async function foo(){
let url = 'http://121.199.29.84:8001/index/carousel/findAll'
let resp = await axios.get(url)
console.log(resp.data);
}
foo();
function findAll(){
let r =axios.get(url)
}
异步函数的运行结果为Promise对象，异步函数内部的返回只会作为then方法回调函数的参数
<script>
var axios = {
get(url) {
return new Promise(function (resolve, reject) {
let xhr = new XMLHttpRequest();
xhr.open('get', url);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send()
xhr.responseType = 'json'
xhr.onreadystatechange = function () {
if (this.readyState == 4) {
if (this.status == 200) {
resolve(this.response)
} else {
reject(this.response)
}
}
}
})
}
}
let baseurl='http://139.196.156.38:8888'
async function findAllacticle(){
let r=await axios.get(baseurl+
'/index/article/pageQuery?page=1&pageSize=10')
console.log(r.data.list);
}
findAllacticle()
</script>
面向对象 类class…
? 构造函数
? function fun(){}
? 类 是构造函数的语法糖
? 一个类必须有一个constructor
class Animal{
constructor(name,age){
this.name=name;
this.age=age
}
sayHello(){
console.log('hello my name is '+this.name);
}
gender=10
static sayAge(age){
console.log('I am '+age+' years old');
}
static gender='男'
}
let a=new Animal('jerry',2)
console.log(a);
a.sayHello()
Animal.sayAge(13)
console.log(a.gender);
console.log(Animal.gender);
? 继承
? 原型链继承
? function Animal(){}
? function Dog(){}
? Dog.prototype=new Animal()
? 经典继承 （借用构造函数继承）
? function Dog(){
? Animal.call(this,‘tom’)}
? 组合继承 (原型链和借用构造函数的组合继承)
class Animal{
sayHello(){
console.log('hello');
}
}
class Dog extends Animal{
constructor(){
super()
}
}
let d=new Dog();
d.sayHello()
axios
? 纯粹的http库，基于promise（专业）
? 既能在浏览器使用又能在nodejs上使用
? 拦截操作
? 1.响应拦截（拿到响应信息之前干的事情）
? 2.请求拦截（请求发送之前干的一个事情）
jquery ajax基于回调函数
1）使用
? 安装
-
CND -
npm(cnpm yarn) npm install axios --save
2)利用模块化导入axios
3）使用axios(options)
let axios=require('axios')
axios.get('/index/project/pageQuery',{
baseURL:'http://139.196.156.38:8888',
params:{
page:1,
pageSize:10
}}).then(res=>{
let r=res.data;
if(r.status==200){
console.log(r.data.list[0]);
}})
|