VUE-05 axios
安装
npm install vue axios bootstrap
基本用法
1 <body> 2 3 <div id="app"> 4 </div> 5 6 <script src="./node_modules/vue/dist/vue.js"></script> 7 <!--基于promise的--> 8 <script src="node_modules/axios/dist/axios.js"></script> 9 <script> 10 let vm = new Vue({ 11 el:"#app", 12 methods:{}, 13 // 专门用来发送ajax的方法 14 created(){// 在数据被初始化后会调用，this指向vm实例，可以拿到data中的数据methods中的方法，钩子函数（页面加载后调用） 15 // promise 解决回调问题 16 axios.get('./carts.json').then(//function (res) {// success的回调 17 // 错误this.products=res.data; 回调函数中的this是window 18 //},function (err) {// error的回调 19 //console.log(err) 20 //} 21 res =>{ 22 this.products=res.data; 23 },err =>{ 24 console.log(err); 25 }) 26 }, 27 data:{ 28 products:[] 29 } 30 }) 31 </script> 32 </body>
1、回调函数
1 let a =''; 2 function buy() { 3 setTimeout(function () { 4 a="蘑菇"; 5 },2000) 6 } 7 8 buy(); 9 10 function cookie() { 11 console.log(a); 12 } 13 cookie();//并不会取到 蘑菇，异步，因为执行到buy没有执行完就去执行cookie了
1 let a =''; 2 function buy(callback) { 3 setTimeout(function () { 4 a="蘑菇"; 5 callback(a); 6 },2000) 7 } 8 buy(function cookie(val) { 9 console.log(val); 10 }); 11 12 // 回调函数，将后续的处理逻辑传入到当前要做的事，事情做好后调用此函数
2、promise
解决回调问题，有三个状态：等待、成功、失败
1 // 自带的 2 // 等待pending--> resolve 代表转向成功态 reject 代表转向失败态 3 // resolve和reject均是函数 4 // promise的实例就一个then方法，两个参数，两个函数 5 let p = new Promise((resolve, reject)=>{ 6 setTimeout(()=>{ 7 let a = '蘑菇'； 8 //resolve(a); 9 reject(a); 10 },2000) 11 12 }); 13 14 p.then((data)=>{console.log(a)},(err)=>{console.log('err')}) 15 16 17 18 function buyPack() { 19 return new Promise((resolve, reject)=>{ 20 setTimeout(()=>{ 21 if(Math.random()>0.5){ 22 resolve("买") 23 }else { 24 reject("不买") 25 } 26 },Math.random()*1000) 27 }) 28 } 29 30 buyPack().then((data)=>{console.log(data)},(data)=>{console.log(data)});
3、promise封装ajax
1 function ajax({url='',type='get',dataType='json'}) { 2 return new Promise((resolve, reject) =>{ 3 let xhr = new XMLHttpRequest(); 4 xhr.open(type,url,true); 5 xhr.responseType=dataType; 6 xhr.onload = function () {// xhr.readyState = 4 且 xhr.status=200 7 // console.log(xhr.response); 8 if(xhr.status === 200){ 9 resolve(xhr.response); 10 }else{ 11 reject('Not Found'); 12 } 13 14 }; 15 xhr.onerror = function(err){// 网络不好的时候会走 16 reject(err); 17 }; 18 xhr.send(); 19 }) 20 } 21 22 ajax({url:'./carts.json'}).then(()=>{},()=>{});
应用：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>封装ajax</title> 6 </head> 7 <body> 8 9 <div id="app" v-cloak> 10 </div> 11 12 <script src="./node_modules/vue/dist/vue.js"></script> 13 <script src="./11promise-ajax.js"></script> 14 <script> 15 let vm = new Vue({ 16 el:"#app", 17 methods:{}, 18 // 专门用来发送ajax的方法 19 created(){ 20 ajax({url:"./carts.json"}).then((res)=>{ 21 console.log(res); 22 },(err)=>{ 23 24 }) 25 }, 26 data:{ 27 products:[] 28 } 29 }) 30 </script> 31 </body> 32 </html>
