Node.js中使用MongoDB数据库

接口调用方式

原生ajax
基于jQuery的ajax
fetch
axios

url 地址格式有哪些

传统的url
Restful形式的url

异步

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

promise

主要解决异步深层嵌套的问题
promise 提供了简洁的API 使得异步操作更加容易

Promise的基础使用

<body>
  <div>前后端交互</div>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript">
    /*
      前后端交互-异步编程与Promise概述
    */
    $.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)
              }
            });
          }
        });
      }
    });
    
    
    
  </script>

<body>
  
  <script type="text/javascript">
    /*
      Promise基本使用
    */
    // console.log(typeof Promise)
    // console.dir(Promise);

    var p = new Promise(function(resolve, reject){
      // 这里用于实现异步任务
      setTimeout(function(){
        var flag = true;
        if(flag) {
          // 正常情况
          resolve('hello');
        }else{
          // 异常情况
          reject('出错了');
        }
      }, 100);
    });
    p.then(function(data){
      console.log(data)
    },function(info){
      console.log(info)
    });
  </script>
</body>

基于Promise发送Ajax请求解决回调地狱

<script type="text/javascript">
    /*
      基于Promise发送Ajax请求
    */
    function queryData(url) {
      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) {
            // 处理正常的情况
            resolve(xhr.responseText);
          }else{
            // 处理异常情况
            reject('服务器错误');
          }
        };
        xhr.open('get', url);
        xhr.send(null);
      });
      return p;
    }
    // queryData('http://localhost:3000/data')
    //   .then(function(data){
    //     console.log(data);
    //   },function(info){
    //     console.log(info)
    //   });
    // ============================
    // 发送多个ajax请求并且保证顺序
    queryData('http://localhost:3000/data')
      .then(function(data){
        console.log(data)
        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>

Promise 基本API

实例方法

.then()

得到异步任务正确的结果

.catch()

获取异常信息

.finally()

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

then参数中的函数返回值

<script type="text/javascript">
    /*
      then参数中的函数返回值
    */
    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);
      });
    }
    queryData('http://localhost:3000/data')
      .then(function(data){
        return queryData('http://localhost:3000/data1');
      })
      .then(function(data){
        return new Promise(function(resolve, reject){
          setTimeout(function(){
            resolve(123);
          },1000)
        });
      })
      .then(function(data){
        return 'hello';
      })
      .then(function(data){
        console.log(data)
      })

  </script>

Promise常用API-实例方法

<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>

静态方法

.all()

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

.race()

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

Promise常用API-对象方法

  <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){
    //   console.log(result)
    // })
    Promise.race([p1,p2,p3]).then(function(result){
      console.log(result)
    })
  </script>
</body>

fetch

Fetch API是新的ajax解决方案 Fetch会返回Promise
fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。
fetch(url, options).then(）

FetchAPI基本使用.html


<script type="text/javascript">
  /*
    Fetch API 基本用法
  */
  fetch('http://localhost:3000/fdata').then(function(data){
    // text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取后台返回的数据
    return data.text();
  }).then(function(data){
    console.log(data);
  })
</script>

fetch API 中的 HTTP 请求

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

FetchAPI参数传递

<script type="text/javascript">
   /*
     Fetch API 调用接口传递参数
   */

   GET参数传递-传统URL
   fetch('http://localhost:3000/books?id=123', {
     method: 'get'
   })
     .then(function(data){
       return data.text();
     }).then(function(data){
       console.log(data)
     });

   GET参数传递-restful形式的URL
   fetch('http://localhost:3000/books/456', {
     method: 'get'
   })
     .then(function(data){
       return data.text();
     }).then(function(data){
       console.log(data)
     });

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

   POST请求传参
   fetch('http://localhost:3000/books', {
     method: 'post',
     body: 'uname=lisi&pwd=123',
     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请求传参
   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>

fetchAPI 中响应格式

用fetch来获取数据，如果响应正常返回，我们首先看到的是一个response对象，其中包括返回的一堆原始字节，这些字节需要在收到后，需要我们通过调用方法将其转换为相应格式的数据，比如JSON，BLOB或者TEXT等等

Fetch响应结果的数据格式

<script type="text/javascript">
  /*
    Fetch响应结果的数据格式
  */
  fetch('http://localhost:3000/json').then(function(data){
    // return data.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)
  })
</script>

接口调用方式

url 地址格式有哪些

异步

promise

Promise的基础使用

基于Promise发送Ajax请求解决回调地狱

Promise 基本API

实例方法

.then()

.catch()

.finally()

then参数中的函数返回值

Promise常用API-实例方法

静态方法

.all()

.race()

Promise常用API-对象方法

fetch

FetchAPI基本使用.html

fetch API 中的 HTTP 请求

FetchAPI参数传递

fetchAPI 中 响应格式

Fetch响应结果的数据格式

fetchAPI 中响应格式