API前后端交互模式

URL地址格式

1. 传统形式的URL

格式：schema://host:port/path?query#fragment

• schema:协议。例如http、https、ftp等
• host：域名或者ip地址
• port：端口，http默认端口为80，可以省略
• path：路径（虚拟路径，区分不同资源），例如/abc/a/b/charset
• query：参数查询。例如uname=lisi&age=12
• fragment：锚点（哈希hash），用于定位页面的某个位置

2. Restful形式的URL

（前端通过Ajax调用一个URL地址,后台根据这个地址去返回对应的数据，然后在前端进行数据的渲染）

Http请求方式:

• GET 查询
• POST 添加
• PUT 修改
• DELRETE 删除

---

Promise

1. Promise概述

是异步编程的一种解决方案，从语法上讲，Promise是一个对象，从他可以获取异步操作的消息

使用Promise的好处

（1）可以避免多层异步调用嵌套问题
（2）Promise对象提供了简介的API，使得控制异步操作更加容易

2. Promise基本用法

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

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

3. Promise常用的API

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

<script>
  function foo(){
   
    return new Promise(function(resolve, reject){
   
     setTimeout(function(){
   
       resolve(123);
       // reject("cuo")
     },100);
    })
  }
  foo()
  .then(function(data){
   
    console.log(data);
  })
  .catch(function(data){
   
    console.log(data);
  })
  .finally(function(){
   
    console.log('finished');
  })
</script>

(4)Promise.all()并发处理多个异步任务，所有任务都执行完成才能得到结果

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