1.回调函数
回调函数:将后续的处理逻辑传入到当前要做的事情中,当前事情结束后调用执行回调函数;
function cookie(callback) {
setTimeout(() => {
let food = '炒饭'; //执行完这个异步操作,在调用回调
callback(food);
}, 1000)
}
function eat(val) {
console.log(`吃${val}`);
}
cookie(eat);
2. Promise
-
promise 有3个状态:成功态,失败态,等待态
-
Promise 是一个定义好的原生自带的类(构造函数) ,给这个构造函数传一个参数(excutor-一个函数)
当我们new的时候会立即调用执行这个函数excutor(立即执行!立即执行!) -
默认是等待状态PENDING,立即执行后可能会变成成功态fulfilled,也可能会失败态rejected.
-
至于什么时候成功或什么时候失败,取决于我们,如果我们调用函数resolve()表示成功了(转向成功态),如果我们调用reject()表示失败了(转向失败态)
-
resolve() 和 reject() 这两个函数也是promise给提供的,是excutor执行器的形参
-
一旦成功了就不会再失败,失败了就不会再成功
-
promise实例都有一个 then 方法,then方法有两个参数(函数):如果我们再excutor里调resolve,就执行then里的第一个方法,掉reject就执行then里的第二个方法;
–>也就是说: resolve 就是then里的第一个函数,reject 就是then里的第二个函数
–>所以:resolve() 就是then里第一个函数执行,reject()执行就是then里第二个函数执行
–>resolve(a)执行时里面的参数(实参-这是在调用),就是then里第一个函数里的形参(其实这是在定义函数,定义resolve)
这样的好处就是:不用我们自己传callback了,callback 定义写在then里
8.总结:
我们在new Promise的执行器里,执行逻辑(当前要做的事),可以在我们需要的时候掉成功方法resolve() 或 失败方法reject(),其实这个方法和我们之前写的callback 类似
而成功或失败后走的逻辑,我们在then里定义
let p = new Promise( (resolve,reject)=>{ //new后返回一个实例, 立即执行函数里有2个参数,分别在成功是调用/失败时调用
setTimeout(()=>{ //类似一个异步
let food ='炒饭'; //1s后执行这句,执行完后执行回调resolve()
resolve(food); //执行参数的时候传参
},1000)
})
p.then(data=>{
console.log(data);
},err=>{
})
3. axios的简单用法
axios 是ajax的库,这个库不依赖vue.js,他是基于promise的(在window上挂了个axios方法)
关于created：
- 专门用来发送ajax的方法, 数据初始化后自动调用created方法
- 而且方法里this也是指向vm实例,methods里面也是数据,也可以在这里 this.方法 取到
- 钩子函数,
<!DOCTYPE html>
<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>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
</head>
<body>
<div id="app">
</div>
<script src="node_modules/axios/dist/axios.js"></script>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
/*
保证地址使用localhost,而不是本地C盘D盘什么的,本地不支持ajax,且可能有跨域问题
*/
let vm = new Vue({
el:'#app',
created(){
/* created:
1. 专门用来发送ajax的方法, 数据初始化后自动调用created方法
2. 而且方法里this也是指向vm实例,methods里面也是数据,也可以在这里 this.方法 取到
3. 钩子函数,
*/
// axios 是ajax的库,这个库不依赖vue.js,他是基于promise的
// 在window上挂了个axios方法
axios.get('./carts.json').then((res) => { //成功的回调,limian
console.log(res.data);
/*
1.在created里this 指向vm实例
2.回调函数中的this都指向window ,这里我们赋值是给实例
3.所以我们改用箭头函数,箭头函数没有this 向上一级找,上一级指向实例,所以这里this就指向实例 */
this.lists = res.data;
},(err) => { //失败的回调
console.log(err);
})
},
data:{
/*
一般我们的数据都是在json里取的,把这些放到json里,但json里直接粘报错,
因为如下格式是对象,对象里不需要加 "双引号" ,但json里需要加双引号.
我们可以在浏览器控制台使用方法 JSON.stringify(对象格式数据) 回车得到"json格式数据",注意取数据的时候[]外层的双引号不要
*/
/* lists:[
{
name:'颈椎病康复指南',
isSelected:true,
price:18.8,
num:3,
img:'//img13.360buyimg.com/mobilecms/s144x144_jfs/t1/97280/10/11147/131201/5e2c27e0E0067fae3/e4447f345e5ce5e0.jpg',
info:'出版方:蓝翔技校'
}
] */
lists:[],
},
methods:{
}
})
</script>
</body>
</html>
