一小池勺❤️❤️❤️ ❤️❤️❤️❤️胸有惊雷而面如平湖者,可拜上将军也。
学习心得
Promise
then:里面有两个回调
- promise原型上提供了 then catch finally 三个方法,使用这几个方法都会返回一个全新的 Promise 实例,这个 Promise 实例也有其状态和 Value,它的这个状态和 Value 取决于该实例中某个函数执行的结果是否报错,return 的值是其 Value 值。如果后面再来一个
.then
,那么它执行哪个回调以及它的 Value 值,是取决于上一个.then
的回调是否执行成功和返回的 Value 值的(特殊情况
:如果其方法中返回的是一个新的Promise实例,他会按照这个实例最终的状态和结果,决定下一个then
中执行哪个回调)。 - Promise的向下顺延体制,是因为Promise内部给我们加了方法进行顺延。
new Promise(function executor(resolve) { // 这里是要执行异步操作代码 let ran = Math.random() ran > 0.5 ? resolve(1) : reject(0) // => 改变PROMISE实例的状态,并将 1 / 0 }).then(function onFulFilled(x) { retuen 100 // return new Promise() },function onRejected(y) { }).then(null,function onRejected(y) { }).then(function onFulfilled(x) { // => 因为上一个then中是没有成功处理函数的,PROMISE内部会帮我们自动创建一个onFulfilled 函数,让其执行后的状态还是Fulfilled,也接受并返回了Value值 return x*10 },function onRejected(y) { }).then(function onFulFilled(x) { throw new Error('') },function onRejected(y) { }).then(null,null).then(function onFulFilled(x) { },function onRejected(y) { // => 因为上一个then中是没有失败处理函数的,PROMISE内部会帮我们自动创建一个 onRejected 函数,让其执行后的状态还是Rejected,也接受并返回了Value值 console.log(y) })
catch:里面只有一个回调
// => 创建一个状态为 FulFilled,Value 为 A 的 Promise 实例 Promise.resolve('A').catch(function onRejected(){ }) // => 创建一个状态为 rejected,Value 为 A 的 Promise 实例 Promise.reject('A').catch(function onRejected(){ })
Promise.all:所有都成功,整体状态才成功
Promise.all([Promise1,Promise2,...]).then(function (results) { // => 按照顺序存储每一个Promise的Value值[ VALUE1,VALUE2 ...] })
Primise.race:看Promise实例中谁先得到最后的状态,最后就以它的状态和Value为主
Axios
它比Jquer中的AJAX库牛逼就牛逼在它是基于Promise的设计模式而封装的。
不管3721,第一步我们都是配置好默认项
// => 配置 axios.defaults.baseURL = 'http://127.0.0.1:5500'; axios.defaults.withCredentials = true; axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded' // => 请求拦截器 axios.defaults.transformRequest = function(data) { // => DATA: 用户需要传递给服务器的JSON对象 if(!data) return data; let result = ``; for(let key in data) { if(!data.hasOwnProperty(key)) break result += `&${data[attr]}=${data[attr]}`; } return result.substring(1) } // => 响应拦截器 axios.defaults.transformResponse = [function onFulfilled(response) { return response.data },function onRejected(reason){ return Promise.reject(reason) }] // => 发送各种请求以及使用axios.all处理并行 axios.get(URL,{ params: { } }).then(data => { }).catch(reason => { }) axios.post(URL,DATA,{ }).then(data => {}) axios.all([p1,p2,....]).then(results => {})