前后端交互

1-前后端交互概述

1.1接口调用方式

• 原生ajax

• 基于jQuery的ajax

• fetch（ajax的升级版）

• axios （第三方的库）

1.2 url 地址格式有哪些

• 传统的url

  • http://host:port/path?query#fragment

  • http协议----https，ftp

  • host----域名或者IP地址

  • port----端口，http默认是80，可以省略

  • path----路径/比如/abc/a/b/c---虚拟的路径(并不是服务器中一定有个真实的目录，作用就是区分不同的资源)

  • query---查询参数，例如?name=zhangsan&age=14

  • Fragment:锚点（哈希hash），表示定位到页面的某个位置

• Restful形式的url

  • 新型的url地址，与提交方式密切相关

  • http请求的方式

  • GET 查询 -----http://www.hello.com/books GET

  • POST 添加 -----http://www.hello.com/books POST （1.2虽然地址相同，但是表示含义是不一样的）

  • PUT 修改 -----http://www.hello.com/books/1 PUT 表示去修改id为1的这本书的信息

  • DELETE 删除 -----http://www.hello.com/books/1 DELETE 表示去删除id为1的这本书的信息

• 关于在请求头中指定 Content-Type 属性的的说明：

• Content-Type: application/x-www-form-urlencoded;charset=utf-8
  ---传统表单形式
  比如：name=zhangsan&age=20&sex=男
  Content-Type:application/json		
  ----json形式
  比如：{name: 'zhangsan', age: '20', sex: '男'}
  注意：get请求是不能提交json对象数据格式的，传统网站的表单提交也是不支持json对象数据格式的。

• 传统url地址通过?传参，Restful风格url地址通过/传参

2-异步编程问题与Promise概述

2.1 异步

Promise实例生成以后，可以用then方法指定resolved状态和reject状态的回调函数

2.3-Promise基本用法

一个 Promise 对象代表一个在这个 promise 被创建出来时不一定已知的值。它让你能够把异步操作最终的成功返回值或者失败原因和相应的处理程序关联起来。 这样使得异步方法可以像同步方法那样返回值：异步方法并不会立即返回最终的值，而是会返回一个 promise，以便在未来某个时候把值交给使用者。

2.4 如何定义一个promise实例

我们使用new来构建一个Promise ,Promise的构造函数接收一个参数，是函数，并且传入两个参数： resolve，reject， 分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数

• JavaScript的执行环境是「单线程」

• 所谓单线程，是指JS引擎中负责解释和执行JavaScript代码的线程只有一个，也就是一次只能完成一项任务，这个任务执行完后才能执行下一个，它会「阻塞」其他任务。这个任务可称为主线程

• 异步模式可以一起执行多个任务

• JS中常见的异步调用

  • 定时任务

  • ajax

  • 事件函数

• 案例演示:异步编程----对应服务器01.api

• 2.2 promise

• 主要解决异步深层嵌套的问题(回调地狱)

• promise 提供了简洁的API 使得异步操作更加容易--注意：promise可以让我们的写法看起来更清晰。

2.3-Promise基本用法

一个 Promise 对象代表一个在这个 promise 被创建出来时不一定已知的值。它让你能够把异步操作最终的成功返回值或者失败原因和相应的处理程序关联起来。 这样使得异步方法可以像同步方法那样返回值：异步方法并不会立即返回最终的值，而是会返回一个 promise，以便在未来某个时候把值交给使用者。

2.4 如何定义一个promise实例

我们使用new来构建一个Promise ,Promise的构造函数接收一个参数，是函数，并且传入两个参数： resolve，reject， 分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数

Promise实例生成以后，可以用then方法指定resolved状态和reject状态的回调函数

//02.promise基本使用---



  
  


  
  

待定状态（pending）的 Promise 对象要么会通过一个值被兑现（fulfilled），要么会通过一个原因（错误）被拒绝（rejected）。当这些情况之一发生时，我们用 promise 的 then 方法排列起来的相关处理程序就会被调用。如果 promise 在一个相应的处理程序被绑定时就已经被兑现或被拒绝了，那么这个处理程序就会被调用，因此在完成异步操作和绑定处理方法之间不会存在竞争状态。

• 一个 Promise 必然处于以下几种状态之一：

  • 待定（pending）: 初始状态，既没有被兑现，也没有被拒绝。

  • 已兑现（fulfilled）: 意味着操作成功完成。resolve()修改

  • 已拒绝（rejected）: 意味着操作失败。 reject()修改

2.5 基于Promise发送Ajax请求,并解决地狱回调问题

• 提前封装好的一段数据请求的代码：

• var xhr = new XMLHttpRequest();
          xhr.open('get', url);
          xhr.send(null);
          xhr.onreadystatechange = function () {
            if (xhr.readyState != 4) return;
            if (xhr.readyState == 4 && xhr.status == 200) {
              // 正常接收---处理正常的情况
              
            } else {
              // 处理异常情况
             
            }
          };

• 完整代码

• 
  
  
  
    
    
  
  
  
    
  
  
  
  使用服务器是01.api

  2.6-Promise的then方法参数中的函数的返回值

• then参数中的函数返回值

• then方法指定resolved状态和reject状态的回调函数

• then返回值有几种

  • 可以返回一个promise对象 该实例对象会调用下一个then

  • 可以返回一个非promise对象 （普通值）下一个then会接收我们传过来的普通值

  • 
    
    
    
      
      
    
    
    
    
      
    
    
    
    
    使用服务器是01.api

    2.7 -Promise 实例方法

  • prototype中的方法

    • .then()

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

    • .catch()

      • 获取异常信息

    • finally()

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

2.8 -Promise静态方法 --对象方法

• .all()

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

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

• 
  
  
  
    
    
  
  
  
  
    
  
  
  
  //使用服务器 06.api

• 应用场景比如：

• 用户点击按钮，会弹出一个弹出对话框，对话框中有两部分数据呈现，这两部分数据分别是不同的后端接口获取的数据。

  弹框弹出后的初始情况下，就让这个弹出框处于数据加载中的状态，当这两部分数据都从接口获取到的时候，才让这个数据加载中状态消失。让用户看到这两部分的数据。

  那么此时，我们就需求这两个异步接口请求任务都完成的时候做处理，所以此时，使用Promise.all方法，就可以轻松的实现

• .race()

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

• 首先我们知道race的用法是多个Promise实例谁先返回就输出谁, 用这个特性我们可以测试接口的响应速度(造一个n秒执行的定时器, 超过n秒就resolve的promise).

  又或者, 超过2秒给用户一个提醒网络状况不佳等, 那我们就可以做一个2秒的定时器reject即可

• Promise.race()并发处理多个异步任务，只要有一个异步任务完成就能得到结果

• 
  
  
  
    
    
  
  
  
  
    
  
  
  
  //使用服务器 06.api

• 脚下留心：

• all和race传入的数组中如果有会抛出异常的异步任务，那么只有最先抛出的错误会被捕获，并且是被then的第二个参数或者后面的catch`捕获；但并不会影响数组中其它的异步任务的执行。

3 -axios概述与基本用法

3.1 axios 概述

• 基于promise用于浏览器和node.js的http客户端

• 支持浏览器和node.js

• 支持promise

• 能拦截请求和响应

• 自动转换JSON数据

• 能转换请求和响应数据

3.2 axios基础用法

demo 07
使用服务器api10 

 
  

3.3 axios传递参数

• get和 delete请求传递参数

  • 通过传统的url 以 ? 的形式传递参数

  • restful 形式传递参数 /

  • 通过params 形式传递参数 注意前端使用params传递参数，服务器用query接收

• post 和 put 请求传递参数

  • 通过选项传递参数

  • 通过 URLSearchParams 传递参数

  • //使用服务器10.api
      //demo11
        # 1-1 发送get 请求   
     
      
    
        # 1-2  restful 形式传递参数 
        //1.2restful风格
        axios.get('http://localhost:3007/axios/123').then(function (res) {
          console.log(res.data)
        })
    	# 1-3  通过params  形式传递参数 
          axios.get('http://localhost:3007/axios', {
          params: { //axios专门提供的，服务器接口它使用的传统url的接口（query形式获取参数）
            id: 789  //这种是比较方便的
          }
        }).then(function (res) {
          console.log(res.data)
        })
    	# 2.axios delete 请求传参     传参的形式和 get 请求一样,同样可以使用get的三种方式
        axios.delete('http://localhost:3007/axios', {
          params: {
            id: 111
          }
        }).then(function (res) {
          console.log(res.data)
        })
    
    	# 3  axios 的 post 请求
        # 3.1  通过选项传递参数--post方式请求传参--json格式的
        axios.post('http://localhost:3007/axios', {
          uname: 'lisi',
          pwd: 123
        }).then(function (res) {
          console.log(res.data)
        })
    	# 3.2  通过 URLSearchParams  传递参数  post方式请求传参 --表单字符串格式的
        var params = new URLSearchParams(); //表单形式的参数 
        params.append('uname', 'zhangsan');
        params.append('pwd', '123456');
        axios.post('http://localhost:3007/axios', params).then(function (res) {
          console.log(res.data)
        })
    
    
     	#4.1 axios put 请求传参   和 post 请求一样  请求传参---json格式
        axios.put('http://localhost:3007/axios/123', {
          uname: 'lisi',
          pwd: 123456
        }).then(function (res) {
          console.log(res.data)
        })
    
    	#4.2 axios put 请求传参   和 post 请求一样  请求传参---表单字符串格式
    	var params = new URLSearchParams(); //表单形式的参数 
        params.append('uname', 'zhangsan');
        params.append('pwd', '1234567890');
        axios.put('http://localhost:3007/axios/123', params).then(function (res) {
          console.log(res.data)
        })

    3.4 -axios响应结果与全局配置

  • //demo09  
      //使用服务器10.api
    	
    	
        

    3.5 -axios 拦截器

  • 请求拦截器

    • 请求拦截器的作用是在请求发送前进行一些操作

    • 例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易

  • 响应拦截器

    • 响应拦截器的作用是在接收到响应后进行一些操作

    • 例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页

    • // demo10
      //使用服务器10.api
      
        

4-async 和 await

4.1 概述

• async/await是ES7引入的新语法，可以更加方便的进行异步操作

• async作为一个关键字放到函数前面

  • 任何一个async函数都会隐式返回一个promise

• await关键字只能在使用async定义的函数中使用

  • await后面可以直接跟一个 Promise实例对象

  • await函数不能单独使用

• async/await 让异步代码看起来、表现起来更像同步代码

• async await基础用法：

1. 下方代码的运行结果是什么？

3. 将b()方法按照下列方式进行改造：

4. function b () {
           return new Promise((resolve, reject)  =>{
               setTimeout(() => {
                   resolve("b 已经Ok!")
               }, 1000);
           })
      }
      此时发现打印结果不再是undefine而是一个Promise对象,

   使用async await 方法进行修饰

5.  async function run () {
        console.log(a());
        console.log(await b());
        console.log(c());
      }
      run ()

   4.2 配合axios共同使用：

//服务器10.api
// demo11


  
    
    
  

  
    
    
  

4.3 async await处理多个请求的用法

• 对于多个请求有时需要保证请求的顺序，比入第一个请求的结果作为第二个请求的参数来进行传递

• //使用服务器15.api
  // demo12