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>