02-Vue- Promise 用法、接口调用-fetch用法、接口调用-axios用法，async/await用法，EventLoop，宏任务和微任务、API 接口案例、基于接口的案例

学习内容：
前后端交互模式
Promise用法
接口调用-Fetch用法
接口调用-axios用法
接口调用-async/await用法
基于接口的案例

---

目标：

1.接口调用方式

• 原生ajax
• 基于jQuery的ajax
• fetch
• axios

1.2 URL 地址格式

1. 传统形式的 URL

• 格式：schema://host:port/path?query#fragment
• schema：协议。例如http、https、ftp等
• host：域名或者IP地址
• port：端口, http默认端口80，可以省略
• path：路径, 例如/abc/a/b/c
• query ：查询参数，例如 uname=lisi&age=12
• fragment ：锚点（哈希Hash），用于定位页面的某个位置
  符合规则的URL:
  http://www.itcast.cn
  http://www.itcast.cn/java/web
  http://www.itcast.cn/java/web?flag=1
  http://www.itcast.cn/java/web?flag=1#function

2. Restful 形式的 URL

- HTTP请求方式:
GET 查询
POST 添加
PUT 修改
DELETE 删除
符合规则的URL地址:
http://www.hello.com/books GET
http://www.hello.com/books POST
http://www.hello.com/books/123 PUT
http://www.hello.com/books/123 DELETE

2.异步

• JavaScript的执行环境是「单线程」
• 所谓单线程，是指JS引擎中负责解释和执行JavaScript代码的线程只有一个，也就是一次只能完成一项任务，这个任务执行完后才能执行下一个，它会「阻塞」其他任务。这个任务可称为主线程
• 异步模式可以一起执行多个任务
• JS中常见的异步调用
  • 定时任何
  • ajax
  • 事件函数

2.promise

2.1 异步调用

• 异步效果分析

   定时任务
   Ajax
   事件函数
  

• 多次异步调用的依赖分析

   多次异步调用的结果顺序不确定
   异步调用结果如果存在依赖需要嵌套
  

• 主要解决异步深层嵌套的问题

• promise 提供了简洁的API 使得异步操作更加容易

  $.ajax({
            url: 'http://localhost:3000/data',
            success: function(data) {
                console.log(data)
                $.ajax({
                    url: 'http://localhost:3000/data1',
                    success: function(data) {
                        console.log(data)
                        $.ajax({
                            url: 'http://localhost:3000/data2',
                            success: function(data) {
                                console.log(data)
                            }
                        });
                    }
                });
            }
        });

2.2 Promise 概述

• Promise 是异步编程的一种解决方案，从语法上讲，Promise是一个对象，从它可以获取异步操作的消息。
  使用 Promise 主要有以下好处：

• 可以避免多层异步调用嵌套问题(回调地狱)

• Promise 对象提供了简洁的API，使得控制异步操作更加容易
  https://developer.mozilla.org/enUS/docs/Web/JavaScript/Reference/Global_Objects/Promise
  

promise 三种状态

pending 等待 resolved / fullfilled 成功 rejected 失败

1. pending 变为 resolved
2. pending 变为 rejected
   说明: 只有这 2 种, 且一个 promise 对象只能改变一次
   无论变为成功还是失败, 都会有一个结果数据
   成功的结果数据一般称为 value, 失败的结果数据一般称为 reason

Promise 对象的值

实例对象中的另一个属性 『PromiseResult』
保存着异步任务『成功/失败』的结果

• resolve
• reject

promise 的基本流程

2.3 Promise 基本用法

1. Promise 构造函数: Promise (excutor) {}
   (1) executor 函数: 执行器 (resolve, reject) => {}
   (2) resolve 函数: 内部定义成功时我们调用的函数 value => {}
   (3) reject 函数: 内部定义失败时我们调用的函数 reason => {}

说明: executor 会在 Promise 内部立即同步调用,异步操作在执行器中执行

2. Promise.prototype.then 方法: (onResolved, onRejected) => {}
   (1) onResolved 函数: 成功的回调函数 (value) => {}
   (2) onRejected 函数: 失败的回调函数 (reason) => {}

说明: 指定用于得到成功 value 的成功回调和用于得到失败 reason 的失败回调

返回一个新的 promise 对象
3. Promise.prototype.catch 方法: (onRejected) => {}
(1) onRejected 函数: 失败的回调函数 (reason) => {}

说明: then()的语法糖, 相当于: then(undefined, onRejected)

4. Promise.resolve 方法: (value) => {}
   (1) value: 成功的数据或 promise 对象

说明: 返回一个成功/失败的 promise 对象

5. Promise.reject 方法: (reason) => {}
   (1) reason: 失败的原因

说明: 返回一个失败的 promise 对象

6. Promise.all 方法: (promises) => {}
   (1) promises: 包含 n 个 promise 的数组

说明: 返回一个新的 promise, 只有所有的 promise 都成功才成功, 只要有一个失败了就 直接失败

7. Promise.race 方法: (promises) => {}
   (1) promises: 包含 n 个 promise 的数组

说明: 返回一个新的 promise, 第一个完成的 promise 的结果状态就是最终的结果状态

• 实例化 Promise 对象，构造函数中传递函数，该函数中用于处理异步任务
• resolve 和 reject 两个参数用于处理成功和失败两种情况，并通过 p.then 获取处理结果

 var p = new Promise(function(resolve, reject){
   // 成功时调用 resolve()
   // 失败时调用 reject()
 });
 p.then(funciton(ret){
     // 从resolve得到正常结果
  }, function(ret){
     // 从reject得到错误信息
  });

 
  <script type="text/javascript">
    /*
     1. Promise基本使用
           我们使用new来构建一个Promise  Promise的构造函数接收一个参数，是函数，并且传入两个参数：		   resolve，reject， 分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数
    */


    var p = new Promise(function(resolve, reject){
      //2. 这里用于实现异步任务  setTimeout
      setTimeout(function(){
        var flag = false;
        if(flag) {
          //3. 正常情况
          resolve('hello');
        }else{
          //4. 异常情况
          reject('出错了');
        }
      }, 100);
    });
    //  5 Promise实例生成以后，可以用then方法指定resolved状态和reject状态的回调函数 
    //  在then方法中，你也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了  
    p.then(function(data){
      console.log(data)
    },function(info){
      console.log(info)
    });
  </script>

2.4基于Promise发送Ajax请求

1. 处理原生Ajax

function queryData(){
  return new Promise(function(resolve,reject){
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
      if(xhr.readyState !=4) return;
      if(xhr.status == 200) {
        resolve(xhr.responseText)
      }else{
        reject('出错了');
      }
    }
    xhr.open('get', '/data');
    xhr.send(null);
  })
 }

2. 发送多次ajax请求

queryData()
  .then(function(data){
    return queryData();
  })
  .then(function(data){
    return queryData();
  })
  .then(function(data){
    return queryData();
  });

  <script type="text/javascript">
    /*
      基于Promise发送Ajax请求
    */
    function queryData(url) {
     // 1.1 创建一个Promise实例
      var p = new Promise(function(resolve, reject){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
          if(xhr.readyState != 4) return;
          if(xhr.readyState == 4 && xhr.status == 200) {
          // 1.2 处理正常的情况
            resolve(xhr.responseText);
          }else{
            //1.3 处理异常情况
            reject('服务器错误');
          }
        };
        xhr.open('get', url);
        xhr.send(null);
      });
      return p;
    }
	// 注意：  这里需要开启一个服务 
    // 在then方法中，你也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了
    queryData('http://localhost:3000/data')
      .then(function(data){
        console.log(data)
        // 1.4 想要继续链式编程下去 需要 return  
        return queryData('http://localhost:3000/data1');
      })
      .then(function(data){
        console.log(data);
        return queryData('http://localhost:3000/data2');
      })
      .then(function(data){
        console.log(data)
      });
  </script>

2.5 then参数中的函数返回值

1. 返回 Promise 实例对象

• 返回的该实例对象会调用下一个 then

2. 返回普通值

• 返回的普通值会直接传递给下一个 then，通过 then 参数中函数的参数接收该值
  

2.6Promise 基本API

Promise 的基本概念

基于回调函数按顺序读取文件内容

基于 then-fs 读取文件内容

• 由于 node.js 官方提供的 fs 模块仅支持以回调函数的方式读取文件，不支持 Promise 的调用方式。因此，需要先运行如下的命令，安装 then-fs 这个第三方包，从而支持我们基于 Promise 的方式读取文件的内容：
  

then-fs 的基本使用

调用 then-fs 提供的 readFile() 方法，可以异步地读取文件的内容，它的返回值是 Promise 的实例对象。因此可以调用 .then() 方法为每个 Promise 异步操作指定成功和失败之后的回调函数。示例代码如下：

注意：上述的代码无法保证文件的读取顺序，需要做进一步的改进！

then() 方法的特性

如果上一个 .then() 方法中返回了一个新的 Promise 实例对象，则可以通过下一个 .then() 继续进行处理。通过 .then() 方法的链式调用，就解决了回调地狱的问题

通过 .catch 捕获错误

在 Promise 的链式操作中如果发生了错误，可以使用 Promise.prototype.catch 方法进行捕获和处理：

如果不希望前面的错误导致后续的 .then 无法正常执行，则可以将 .catch 的调用提前，示例代码如下：

1.实例方法

• p.then() 得到异步任务的正确结果
• p.catch() 获取异常信息
• p.finally() 成功与否都会执行(尚且不是正式标准)

queryData()
  .then(function(data){
    console.log(data);
  })
  .catch(function(data){
    console.log(data);
  })
  .finally(function(){
    console.log(‘finished');
  });

.then()

• 得到异步任务正确的结果
  

.catch()

• 获取异常信息

.finally()

• 成功与否都会执行（不是正式标准）

  
  <script type="text/javascript">
    /*
      Promise常用API-实例方法
    */
    // console.dir(Promise);
    function foo() {
      return new Promise(function(resolve, reject){
        setTimeout(function(){
          // resolve(123);
          reject('error');
        }, 100);
      })
    }
    // foo()
    //   .then(function(data){
    //     console.log(data)
    //   })
    //   .catch(function(data){
    //     console.log(data)
    //   })
    //   .finally(function(){
    //     console.log('finished')
    //   });

    // --------------------------
    // 两种写法是等效的
    foo()
      .then(function(data){
        # 得到异步任务正确的结果
        console.log(data)
      },function(data){
        # 获取异常信息
        console.log(data)
      })
      # 成功与否都会执行（不是正式标准） 
      .finally(function(){
        console.log('finished')
      });
  </script>

2. 对象方法

• Promise.all() 方法会发起并行的 Promise 异步操作，等所有的异步操作全部结束后才会执行下一步的 .then 操作（等待机制）。
• Promise.race() 方法会发起并行的 Promise 异步操作，只要任何一个异步操作完成，就立即执行下一步的.then 操作（赛跑机制）。示例代码如下
• 

.all()

• Promise.all方法接受一个数组作参数，数组中的对象（p1、p2、p3）均为promise实例（如果不是一个promise，该项会被用Promise.resolve转换为一个promise)。它的状态由这三个promise实例决定

.race()

• Promise.race方法同样接受一个数组作参数。当p1, p2, p3中有一个实例的状态发生改变（变为fulfilled或rejected），p的状态就跟着改变。并把第一个改变状态的promise的返回值，传给p的回调函数

​

  <script type="text/javascript">
    /*
      Promise常用API-对象方法
    */
    // console.dir(Promise)
    function queryData(url) {
      return new Promise(function(resolve, reject){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
          if(xhr.readyState != 4) return;
          if(xhr.readyState == 4 && xhr.status == 200) {
            // 处理正常的情况
            resolve(xhr.responseText);
          }else{
            // 处理异常情况
            reject('服务器错误');
          }
        };
        xhr.open('get', url);
        xhr.send(null);
      });
    }

    var p1 = queryData('http://localhost:3000/a1');
    var p2 = queryData('http://localhost:3000/a2');
    var p3 = queryData('http://localhost:3000/a3');
     Promise.all([p1,p2,p3]).then(function(result){
       //   all 中的参数  [p1,p2,p3]   和 返回的结果一 一对应["HELLO TOM", "HELLO JERRY", "HELLO SPIKE"]
       console.log(result) //["HELLO TOM", "HELLO JERRY", "HELLO SPIKE"]
     })
    Promise.race([p1,p2,p3]).then(function(result){
      // 由于p1执行较快，Promise的then()将获得结果'P1'。p2,p3仍在继续执行，但执行结果将被丢弃。
      console.log(result) // "HELLO TOM"
    })
  </script>

3. 接口调用-fetch用法

3.1 fetch 概述

1. 基本特性

• 更加简单的数据获取方式，功能更强大、更灵活，可以看做是xhr的升级版
• 基于Promise实现
• Fetch API是新的ajax解决方案 Fetch会返回Promise
• fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。
• fetch(url, options).then(）

2. 语法结构

fetch(url).then(fn2)
            .then(fn3)
            ...
            .catch(fn)

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

3.2 fetch 的基本用法

  <script type="text/javascript">
    /*
      Fetch API 基本用法
      	fetch(url).then()
     	第一个参数请求的路径   Fetch会返回Promise   所以我们可以使用then 拿到请求成功的结果 
    */
    fetch('http://localhost:3000/fdata').then(function(data){
      // text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取后台返回的数据
      return data.text();
    }).then(function(data){
      //   在这个then里面我们能拿到最终的数据  
      console.log(data);
    })
  </script>

3.3fetch API 中的 HTTP 请求

• fetch(url, options).then(）
• HTTP协议，它给我们提供了很多的方法，如POST，GET，DELETE，UPDATE，PATCH和PUT
  • 默认的是 GET 请求
  • 需要在 options 对象中 指定对应的 method，method:请求使用的方法
  • post 和 普通 请求的时候 需要在options 中 设置 HTTP的请求头请求头 headers，默认为{} 和 body

   <script type="text/javascript">
        /*
              Fetch API 调用接口传递参数
        */
       1.1 GET参数传递 - 传统URL  通过url  ？ 的形式传参 
        fetch('http://localhost:3000/books?id=123', {
            	# get 请求可以省略不写 默认的是GET 
                method: 'get'
            })
            .then(function(data) {
            	# 它返回一个Promise实例对象，用于获取后台返回的数据
                return data.text();
            }).then(function(data) {
            	# 在这个then里面我们能拿到最终的数据  
                console.log(data)
            });

      #1.2  GET参数传递  restful形式的URL  通过/ 的形式传递参数  即  id = 456 和id后台的配置有关   
        fetch('http://localhost:3000/books/456', {
            	# get 请求可以省略不写 默认的是GET 
                method: 'get'
            })
            .then(function(data) {
                return data.text();
            }).then(function(data) {
                console.log(data)
            });

       #2.1  DELETE请求方式参数传递      删除id  是  id=789
        fetch('http://localhost:3000/books/789', {
                method: 'delete'
            })
            .then(function(data) {
                return data.text();
            }).then(function(data) {
                console.log(data)
            });

       #3 POST请求传参
        fetch('http://localhost:3000/books', {
                method: 'post',
            	# 3.1  传递数据 
                body: 'uname=lisi&pwd=123',
            	#  3.2  设置请求头 
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            })
            .then(function(data) {
                return data.text();
            }).then(function(data) {
                console.log(data)
            });

       # POST请求传参
        fetch('http://localhost:3000/books', {
                method: 'post',
                body: JSON.stringify({
                    uname: '张三',
                    pwd: '456'
                }),
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(function(data) {
                return data.text();
            }).then(function(data) {
                console.log(data)
            });

        # PUT请求传参     修改id 是 123 的 
        fetch('http://localhost:3000/books/123', {
                method: 'put',
                body: JSON.stringify({
                    uname: '张三',
                    pwd: '789'
                }),
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(function(data) {
                return data.text();
            }).then(function(data) {
                console.log(data)
            });
    </script>

3.4 fetch响应结果

1.响应数据格式

• text()： 将返回体处理成字符串类型
• json()：返回结果和 JSON.parse(responseText)一样
• 用fetch来获取数据，如果响应正常返回，我们首先看到的是一个response对象，其中包括返回的一堆原始字节，这些字节需要在收到后，需要我们通过调用方法将其转换为相应格式的数据，比如JSON，BLOB或者TEXT等等

    /*
      Fetch响应结果的数据格式
    */
    fetch('http://localhost:3000/json').then(function(data){
      // return data.json();   //  将获取到的数据使用 json 转换对象
      return data.text(); //  //  将获取到的数据 转换成字符串 
    }).then(function(data){
      // console.log(data.uname)
      // console.log(typeof data)
      var obj = JSON.parse(data);
      console.log(obj.uname,obj.age,obj.gender)
    })

4. 接口调用-axios用法

4.1 axios 的基本特性

axios（官网：https://github.com/axios/axios）async/await 是 ES8（ECMAScript 2017）引入的新语法用来简化 Promise 异步操作。是一个基于Promise 用于浏览器和 node.js 的 HTTP 客户端。它具有以下特征：

• 基于promise用于浏览器和node.js的http客户端
• 支持浏览器和node.js
• 支持promise
• 能拦截请求和响应
• 自动转换JSON数据
• 能转换请求和响应数据

axios基础用法

• get和 delete请求传递参数
  • 通过传统的url 以 ? 的形式传递参数
• restful 形式传递参数
  • 通过params 形式传递参数
• post 和 put 请求传递参数
  • 通过选项传递参数
  • 通过 URLSearchParams 传递参数

4.2 axios 的常用API

• get ： 查询数据
• post ： 添加数据
• put ： 修改数据
• delete ：删除数据

    # 1. 发送get 请求 
	axios.get('http://localhost:3000/adata').then(function(ret){ 
      #  拿到 ret 是一个对象      所有的对象都存在 ret 的data 属性里面
      // 注意data属性是固定的用法，用于获取后台的实际数据
      // console.log(ret.data)
      console.log(ret)
    })
	# 2.  get 请求传递参数
    # 2.1  通过传统的url  以 ? 的形式传递参数
	axios.get('http://localhost:3000/axios?id=123').then(function(ret){
      console.log(ret.data)
    })
    # 2.2  restful 形式传递参数 
    axios.get('http://localhost:3000/axios/123').then(function(ret){
      console.log(ret.data)
    })
	# 2.3  通过params  形式传递参数 
    axios.get('http://localhost:3000/axios', {
      params: {
        id: 789
      }
    }).then(function(ret){
      console.log(ret.data)
    })
	#3 axios delete 请求传参     传参的形式和 get 请求一样
    axios.delete('http://localhost:3000/axios', {
      params: {
        id: 111
      }
    }).then(function(ret){
      console.log(ret.data)
    })

	# 4  axios 的 post 请求
    # 4.1  通过选项传递参数
    axios.post('http://localhost:3000/axios', {
      uname: 'lisi',
      pwd: 123
    }).then(function(ret){
      console.log(ret.data)
    })
	# 4.2  通过 URLSearchParams  传递参数 
    var params = new URLSearchParams();
    params.append('uname', 'zhangsan');
    params.append('pwd', '111');
    axios.post('http://localhost:3000/axios', params).then(function(ret){
      console.log(ret.data)
    })

 	#5  axios put 请求传参   和 post 请求一样 
    axios.put('http://localhost:3000/axios/123', {
      uname: 'lisi',
      pwd: 123
    }).then(function(ret){
      console.log(ret.data)
    })

4.3 axios 的响应结果

1.响应结果的主要属性

• data ： 实际响应回来的数据
• headers ：响应头信息
• status ：响应状态码
• statusText ：响应状态信息

axios.post('/axios-json‘).then(ret=>{
    console.log(ret)
  })

4.4 axios 的全局配置

• axios.defaults.timeout = 3000; // 超时时间
• axios.defaults.baseURL = ‘http://localhost:3000/app’; // 默认地址
• axios.defaults.headers[‘mytoken’] = ‘aqwerwqwerqwer2ewrwe23eresdf23’// 设置请求头
  

#  配置公共的请求头 
axios.defaults.baseURL = 'https://api.example.com';
#  配置 超时时间
axios.defaults.timeout = 2500;
#  配置公共的请求头
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
# 配置公共的 post 的 Content-Type
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

4.5axios 拦截器

1.请求拦截器

• 请求拦截器的作用是在请求发送前进行一些操作
  • 例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易
    

2.响应拦截器

• 响应拦截器的作用是在接收到响应后进行一些操作
  • 例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页
    

	# 1. 请求拦截器 
	axios.interceptors.request.use(function(config) {
      console.log(config.url)
      //1.1  任何请求都会经过这一步   在发送请求之前做些什么   
      config.headers.mytoken = 'nihao';
     // 1.2  这里一定要return   否则配置不成功  
      return config;
    }, function(err){
       //1.3 对请求错误做点什么  
      console.log(err)
    })
	#2. 响应拦截器 
    axios.interceptors.response.use(function(res) {
      //2.1  在接收响应做些什么  
      var data = res.data;
      return data;
    }, function(err){
      //2.2 对响应错误做点什么  
      console.log(err)
    })

5. 接口调用-async/await用法

5.1 async/await 的基本用法

• async/await是ES7引入的新语法，可以更加方便的进行异步操作
• async作为一个关键字放到函数前面
• 任何一个async函数都会隐式返回一个promise
• await关键字只能在使用async定义的函数中使用
• ​ await后面可以直接跟一个 Promise实例对象
• ​ await函数不能单独使用
• async/await 让异步代码看起来、表现起来更像同步代码

 	# 1.  async 基础用法
    // 1.1 async作为一个关键字放到函数前面
	async function queryData() {
     //1.2 await关键字只能在使用async定义的函数中使用      await后面可以直接跟一个 Promise实例对象
      var ret = await new Promise(function(resolve, reject){
        setTimeout(function(){
          resolve('nihao')
        },1000);
      })
      // console.log(ret.data)
      return ret;
    }
	// 1.3 任何一个async函数都会隐式返回一个promise   我们可以使用then 进行链式编程
    queryData().then(function(data){
      console.log(data)
    })

	#2.  async    函数处理多个异步函数
    axios.defaults.baseURL = 'http://localhost:3000';

    async function queryData() {
      // 2.1  添加await之后 当前的await 返回结果之后才会执行后面的代码   
      
      var info = await axios.get('async1');
     //2.2  让异步代码看起来、表现起来更像同步代码
      var ret = await axios.get('async2?info=' + info.data);
      return ret.data;
    }

    queryData().then(function(data){
      console.log(data)
    })

EventLoop

1. JavaScript 是单线程的语言

JavaScript 是一门单线程执行的编程语言。也就是说，同一时间只能做一件事情。

单线程执行任务队列的问题：
如果前一个任务非常耗时，则后续的任务就不得不一直等待，从而导致程序假死的问题

2. 同步任务和异步任务

3. 同步任务和异步任务的执行过程

4. EventLoop 的基本概念

• JavaScript 主线程从“任务队列”中读取异步 任务的回调函数，放到执行栈中依次执行。这 个过程是循环不断的，所以整个的这种运行机制又称为 EventLoop（事件循环）

4. 结合 EventLoop 分析输出的顺序

正确的输出结果：ADCB。其中：
⚫ A 和 D 属于同步任务。会根据代码的先后顺序依次被执行
⚫ C 和 B 属于异步任务。它们的回调函数会被加入到任务队列中，等待主线程空闲时再执行

宏任务和微任务

1. 什么是宏任务和微任务

2. 宏任务和微任务的执行顺序

3. 去银行办业务的场景

4. 分析以下代码输出的顺序

5. 经典面试题

API 接口案例

1. 案例需求

2. 主要的实现步骤

3. 搭建项目的基本结构

4. 创建基本的服务器

5. 创建 db 数据库操作模块

6. 创建 user_ctrl 模块

7. 创建 user_router 模块

8. 导入并挂载路由模块

9. 使用 try…catch 捕获异常

6. 基于接口的案例

1. 基于接口案例-获取图书列表

• 导入axios 用来发送ajax
• 把获取到的数据渲染到页面上

  <div id="app">
        <div class="grid">
            <table>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>名称</th>
                        <th>时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 5.  把books  中的数据渲染到页面上   -->
                    <tr :key='item.id' v-for='item in books'>
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.date }}</td>
                        <td>
                            <a href="">修改</a>
                            <span>|</span>
                            <a href="">删除</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
	1.  导入axios   
    <script type="text/javascript" src="js/axios.js"></script>
    <script type="text/javascript">
        /*
             图书管理-添加图书
         */
        # 2   配置公共的url地址  简化后面的调用方式
        axios.defaults.baseURL = 'http://localhost:3000/';
        axios.interceptors.response.use(function(res) {
            return res.data;
        }, function(error) {
            console.log(error)
        });

        var vm = new Vue({
            el: '#app',
            data: {
                flag: false,
                submitFlag: false,
                id: '',
                name: '',
                books: []
            },
            methods: {
                # 3 定义一个方法 用来发送 ajax 
                # 3.1  使用 async  来 让异步的代码  以同步的形式书写 
                queryData: async function() {
                    // 调用后台接口获取图书列表数据
                    // var ret = await axios.get('books');
                    // this.books = ret.data;
					# 3.2  发送ajax请求  把拿到的数据放在books 里面   
                    this.books = await axios.get('books');
                }
            },

            mounted: function() {
				#  4 mounted  里面 DOM已经加载完毕  在这里调用函数  
                this.queryData();
            }
        });
    </script>

2 添加图书

• 获取用户输入的数据 发送到后台
• 渲染最新的数据到页面上

 methods: {
    handle: async function(){
          if(this.flag) {
            // 编辑图书
            // 就是根据当前的ID去更新数组中对应的数据
            this.books.some((item) => {
              if(item.id == this.id) {
                item.name = this.name;
                // 完成更新操作之后，需要终止循环
                return true;
              }
            });
            this.flag = false;
          }else{
            # 1.1  在前面封装好的 handle 方法中  发送ajax请求  
            # 1.2  使用async  和 await 简化操作 需要在 function 前面添加 async   
            var ret = await axios.post('books', {
              name: this.name
            })
            # 1.3  根据后台返回的状态码判断是否加载数据 
            if(ret.status == 200) {
             # 1.4  调用 queryData 这个方法  渲染最新的数据 
              this.queryData();
            }
          }
          // 清空表单
          this.id = '';
          this.name = '';
        },        
 }         

3 验证图书名称是否存在

• 添加图书之前发送请求验证图示是否已经存在
• 如果不存在 往后台里面添加图书名称
  • 图书存在与否只需要修改submitFlag的值即可

 watch: {
        name: async function(val) {
          // 验证图书名称是否已经存在
          // var flag = this.books.some(function(item){
          //   return item.name == val;
          // });
          var ret = await axios.get('/books/book/' + this.name);
          if(ret.status == 1) {
            // 图书名称存在
            this.submitFlag = true;
          }else{
            // 图书名称不存在
            this.submitFlag = false;
          }
        }
},

4. 编辑图书

• 根据当前书的id 查询需要编辑的书籍
• 需要根据状态位判断是添加还是编辑

 methods: {
        handle: async function(){
          if(this.flag) {
            #4.3 编辑图书   把用户输入的信息提交到后台
            var ret = await axios.put('books/' + this.id, {
              name: this.name
            });
            if(ret.status == 200){
              #4.4  完成添加后 重新加载列表数据
              this.queryData();
            }
            this.flag = false;
          }else{
            // 添加图书
            var ret = await axios.post('books', {
              name: this.name
            })
            if(ret.status == 200) {
              // 重新加载列表数据
              this.queryData();
            }
          }
          // 清空表单
          this.id = '';
          this.name = '';
        },
        toEdit: async function(id){
          #4.1  flag状态位用于区分编辑和添加操作
          this.flag = true;
          #4.2  根据id查询出对应的图书信息  页面中可以加载出来最新的信息
          # 调用接口发送ajax 请求  
          var ret = await axios.get('books/' + id);
          this.id = ret.id;
          this.name = ret.name;
        },

5 删除图书

• 把需要删除的id书籍 通过参数的形式传递到后台

   deleteBook: async function(id){
          // 删除图书
          var ret = await axios.delete('books/' + id);
          if(ret.status == 200) {
            // 重新加载列表数据
            this.queryData();
          }
   }