前后端交互模式

前后端交互模式

接口调用方式

（1）原生ajax
（2）基于jQuery的ajax
（3）fetch
（4）axios

URL地址格式

传统形式的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.itcasr.cn
●http：//www.itcasr.cn/java/web
●http：//www.itcasr.cn/java/web?flag=1
●http：//www.itcasr.cn/java/web?flag=1#function

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

Promise用法

异步调用

异步效果分析

（1） 定时任务
（2） Ajax
（3） 事件函数

多次异步调用的依赖分析

（1） 多次异步调用的结果顺序不确定
（2） 异步调用结果如果存在依赖需要嵌套（回调地狱）可读性差 不使用

Promise 概述

Promise 是异步编程的一种解决方案，从语法上讲，Promise是一个对象，从它可以获取异步操作的信息
使用Promise主要有以下好处：
●可以避免多层异步调用嵌套问题（回调地狱）
●Promise对象提供了简介的API，使得控制异步操作更加容易

Promise 基本用法

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

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

基于Promise 处理Ajax请求

（1）处理原生Ajax

  <script>
        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://locahost:3000/data')
            .then(function (data) {
                console.log(data);
            }, function (info) {
                console.log(info);
            })
    </script>

（2）发送多次Ajax请求 （解决回调地狱问题）

 queryData('http://locahost:3000/data')
            .then(function (data) {
                console.log(data);
                return queryData('http://locahost:3000/data1')
            }
             .then(function (data) {
                console.log(data);
                return queryData('http://locahost:3000/data2')
            }
             .then(function (data) {
                console.log(data);
                return queryData('http://locahost:3000/data3')
            }

then参数中的函数返回值

（1）返回Promise实例对象
返回的该实例对象会调用下一个then
（2）返回普通值
返回的普通值会直接传递给下一个then，通过then参数中函数的参数接收该值

Promise 常用API

实例方法

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

对象方法

（1）Promise.all() 并发处理多个异步任务，所有任务都执行完才能得到结果
（2）Promise.race() 并发处理多个异步任务，只要有一个任务完成就能得到结果

接口调用-fetch用法

fetch概述

基本特性

●更加简单的数据获取方式，功能更强大、更灵活，可以看做事xhr的升级版
●基于Promise实现

基本用法

接口调用-axios用法

axios的基本特性

●支持游览器和node.js
●支持Promise
●能拦截请求和响应
●自动转换JSON数据

axios的基本用法

<script>
        axios.get('http://localhost:8080/adata').then(function(ret){
            // data属性是固定的用法,用于获取后台的实际数据
            console.log(ret.data)
        })
    </script>

axios的常用API

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

axios的参数传递

GET传递参数

（1）通过URL传递参数

<script>
        axios.get('http://localhost:8080/axios？id=123').then(function(ret){
            // data属性是固定的用法,用于获取后台的实际数据
            console.log(ret.data)
        })
    </script>

<script>
        axios.get('http://localhost:8080/axios/123').then(function(ret){
            // data属性是固定的用法,用于获取后台的实际数据
            console.log(ret.data)
        })
    </script>

（2）通过params选项传递参数

 <script>
        axios.get('http://localhost:8080/axios',{
            params:{
                id:789
            }
        }).then(function(ret){
            // data属性是固定的用法,用于获取后台的实际数据
            console.log(ret.data)
        })
    </script>

DELETE传递参数

●参数传递方式与GET类似

POST传递参数

●通过选项传递参数（默认传递的是json格式的数据）

<script>
        axios.post('http://localhost:8080/axios', {
            uname: 'lisi',
            pwd: 123
        }).then(function (ret) {
            // data属性是固定的用法,用于获取后台的实际数据
            console.log(ret.data)
        })
    </script>

PUT传递参数

●参数传递方式与POST类似

axios的响应结果

响应结果的主要属性

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

axios的全局配置

● axios.defaults.timeout=3000;//超时时间
● axios.defaults.baseURL=‘http：//localhoust：3000/app’; //默认地址
● axios.defaults.headers['mytoken]=‘waefaewfa545wefwe454’; //设置请求头

axios拦截器

请求拦截器

在请求发出之前设置一些信息（config（形参）、request）

Axios.interceptors.request.use(function (config) {
  //在请求发出之前进行一些信息设置
  config.headers.mytoken = 'nihao';
  return config;
}, function (err) {
    //处理响应的错误信息
})

响应拦截器

在获取数据之前对数据做一些加工处理（res（形参）、response）

Axios.interceptors.response.use(function (res) {
  //在这里对返回的数据进行处理
  var data = res.data;
  return data;
}, function (err) {
    //处理响应的错误信息
    console.log(err)
})

接口调用-async/await用法

async/await的基本用法

● async/await是ES7引入的新语法，可以更加方便的进行异步操作
● async 关键字用于函数上(async函数的返回值是Promise实例对象)
● await 关键字用于async函数中（await可以得到异步的结果）

async function queryData () {
  //发起请求
  var ret = await axios.get('adata');
  // console.log(ret.data)
  //还是一个promise实例对象
  return ret.data;
}
//通过.then方式外部获取
queryData().then(function (data) {
  console.log(data)
})

async/await处理多个异步请求

●多个异步请求的场景

async function queryData () {
  //发送2个异步请求
  var info = await axios.get('async1');
  // console.log(ret.data)
  var ret = await axios.get('async2?info=' + info.data);
  return ret.data;
}
queryData().then(function (data) {
  console.log(data)
})