03 Vue前后端交互

1.前后端交互模式

1.1 接口调用方式

列举

原生ajax
基于jq的ajax
fetch
axios

1.2 URL地址格式

1.传统形式的URL

格式: scheme://host:port/path?query#fragment
协议://域名:端口/路径?参数#锚点(哈希Hash)

2.Restful形式的URL

HTTP请求方式

GET 查询

POST 添加

PUT 修改

DELETE 删除

符合规则的URL地址

http://www.hello.com/books/123

2.Promise的相关概念和用法

2.1 异步调用

异步效果分析
- 1.定时任务
- 2.Ajax
- 3.事件函数
多次异步调用的依赖分析
- 多次异步调用的结果顺序不确定
- 异步调用的结果如果存在依赖需要嵌套

2.2 Promise概述

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

避免多层异步调用嵌套问题（回调地狱）
promise对象提供简洁的API，使得控制异步操作更加容易

2.3 Promise 基本用法

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

1.如何定义一个promise实例

我们使用new来构建一个Promise Promise的构造函数接收一个参数，是函数，并且传入两个参数： resolve，reject，分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数 Promise实例生成以后，可以用then方法指定resolved状态和reject状态的回调函数

演示

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

        // 第一个接收resolve里的信息，第二个接收reject里的信息
        p.then(function(data) {
            console.log(data);
        }, function(info) {
            console.log(info);
        })
    </script>
</body>

2.4 基于promise处理Ajax请求

<body>
    <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://127.0.0.1:8080/data')
        //     .then(function(data) {
        //         console.log(data);
        //     }, function(info) {
        //         console.log(info);
        //     })
        // 多个异步任务保证顺序
        queryData('http://127.0.0.1:8080/data')
            .then(function(data) {
                console.log(data);
                return queryData('http://127.0.0.1:8080/data1')
            })

        // 由上个回调函数里的返回调用
        .then(function(data) {
            console.log(data);
            return queryData('http://127.0.0.1:8080/data2')
        })

        .then(function(data) {
            console.log(data);
        })
    </script>
</body>

2.5 then参数中的函数返回值

1.返回Promise实例对象

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

2.6 Promise 基本API

1.实例方法

.then()- 得到异步任务正确的结果

.catch()- 获取异常信息

.finally()- 成功与否都会执行（不是正式标准）

2.对象方法

.all()

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

.race()

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

Promise.all ([p1,p2,p3]).then((result) => {
console.log (result)
}
Promise.race( [p1, p2,P3]).then((result) => {
console.log (result)
}

3. fetch

3.1 fetch基本使用

基于Promise实现

<body>
    <script>
        fetch('http://127.0.0.1:8080/data')
            .then(function(data) {
                // text()属于fetch APi中的一部分，返回一个promise实例对象,用于获取返回的数据
                return data.text()
            })
            .then(function(data) {
                // then 解析
                console.log(data);
            })
    </script>
</body>

3.2 fetch请求参数

常用配置选项

method(String):HTTP请求方法，默认为GET
body(String):HTTP请求参数
headers(Object)：HTTP的请求头,默认为{}

2.get请求方式参数传递

// 第一种方式
// fetch('http://127.0.0.1:8080/books?id=123', {
//         method: 'get'
//     })
//     .then(function(data) {
//         // text()属于fetch APi中的一部分，返回一个promise实例对象,用于获取返回的数据
//         return data.text()
//     })
//     .then(function(data) {
//         // then 解析
//         console.log(data);
//     })

//第二种方式 restful风格
fetch('http://127.0.0.1:8080/books/1234', {
        method: 'get'
    })
    .then(function(data) {
        // text()属于fetch APi中的一部分，返回一个promise实例对象,用于获取返回的数据
        return data.text()
    })
    .then(function(data) {
        // then 解析
        console.log(data);
    })

3.post请求方式参数传递

fetch('http://127.0.0.1:8080/books/789', {
        method: 'delete'
    })
    .then(function(data) {
        // text()属于fetch APi中的一部分，返回一个promise实例对象,用于获取返回的数据
        return data.text()
    })
    .then(function(data) {
        // then 解析
        console.log(data);
    })

4.put请求方式参数传递

fetch('http://127.0.0.1:8080/books/123', {
                method: 'put',
                body: JSON.stringify({
                    uname: 'lisi',
                    pwd: '456'
                }),
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(function(data) {
                return data.text();
            }).then(function(data) {
                console.log(data)
            });

3.3 fetch响应结果

响应数据格式

text():将返回体处理成字符串类型
json(): 返回结果和JSON.parse(responseText)一样

4.axios的语法

4.1 axios的基本特性

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

4.2 axios的基本语法

1.get和 delete请求传递参数

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

- restful 形式传递参数

- 通过params 形式传递参数

2.post 和 put 请求传递参数

通过选项传递参数
通过 URLSearchParams 传递参数

演示

axios.get('/adata')
	. then (ret=> {
		// data属性名称是固定的，用于获取后台响应的数据
		console.1og (ret. data )
})

4.3 axios的常用API

1.get和 delete请求传递参数

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

2.post 和 put 请求传递参数

通过选项传递参数
通过 URLSearchParams 传递参数（表单）

4.4 axios的响应结果

响应结果的主要属性

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

4.5 axios的全局配置

axios.defaults.timeout = 3000; //超时时间
axios.defaults.baseURL = 'ttp://127.0.0.1:8080/app'; //默认地址
axios.defaults.headers[ 'mytoken' ]= 'aqwerwqwerqwer2ewrwe23eresdf23' // 设置请求头

演示

<body>
    <script src="js/axios.js"></script>	
    <script>
        // 响应结果
        // axios.get('http://127.0.0.1:8080/axios-json')
        //     .then(function(ret) {
        //         // axios已经把后台传来的json数据转化了
        //         console.log(ret.data.uname);
        //     })

        // 全局配置
        // 配置请求基准url地址
        axios.defaults.baseURL = 'http://127.0.0.1:8080/'
        axios.defaults.headers['mytoken'] = 'hello'
        axios.get('axios-json')
            .then(function(ret) {
                console.log(ret.data.uname);
            })
    </script>
</body>

4.6 axios拦截器

1.请求拦截器

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

2.响应拦截器

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

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

  <script type="text/javascript" src="js/axios.js"></script>
  <script type="text/javascript">
      axios.interceptors.request.use(function(config) {
          // config 信息配置
          // 1. 发送请求之前做些操作
          console.log(config.url);
          config.headers.mytoken = 'nihao'
          return config
      }, function(err) {
          // 对错误做点什么
          console.log(err);
      })
      axios.interceptors.response.use(function(config) {
          // 在接收响应做些什么
          var data = res.data
          return data
      }, function(err) {
          console.log(err);
      })
      axios.get('http://127.0.0.1:8080/adata')
          .then(function(data) {
              // 拿到的是拦截器中返回的return
              console.log(data);
          })
  </script>

</body>

5.1 接口调用 async/await语法

async作为一个关键字放到函数前面，任何一个async函数都会隐式返回一个promise
await关键字只能在使用async定义的函数中使用， await后面可以直接跟一个 Promise实例对象，不能单独使用
async/await 让异步代码看起来、表现起来更像同步代码**

await函数不能单独使用，而且async函数返回的是一个Promise对象，可以使用then函数添加回调函数。当函数执行的时候，一旦遇到await函数就会先返回一个Promise对象，等到异步操作完成，再去执行后面的语句

演示

<body>

    <script type="text/javascript" src="js/axios.js"></script>
    <script type="text/javascript">
        // async/await 处理异步操作
        axios.defaults.baseURL = 'http://127.0.0.1:8080/'
            // 直接发送的写法
            // axios.get('axios-json')
            //     .then(function(ret) {
            //         console.log(ret.data);
            //     })

        // 异步写法
        // async function queryData() {
        //     var ret = await axios.get('adata')
        //     // console.log(ret.data);
        //     return ret.data
        // }

        // await后面可以直接跟一个 Promise实例对象，不能单独使用
        async function queryData() {
            var ret = await new Promise(function(resolve, reject) {
                setTimeout(function() {
                    resolve('nihao')
                }, 1000)
            })

            // console.log(ret.data);
            return ret
        }
        queryData().then(function(data) {
            console.log(data);
        })
    </script>
</body>

5.2 async/await 处理多个异步请求

<body>

    <script type="text/javascript" src="js/axios.js"></script>
    <script type="text/javascript">
        axios.defaults.baseURL = 'http://127.0.0.1:8080/'

        async function queryData() {
            // 顺序处理等待任务
            var info = await axios.get('async1')
            var ret = await axios.get('async2?info=' + info.data)
            return ret
        }
        // 拿到返回 ret.data 
        queryData().then(function(data) {
            console.log(data.data);
            console.log(data);
        })
    </script>
</body>

posted @ 2020-07-21 13:23 xujing123 阅读(364) 评论(0) 编辑收藏举报

刷新页面返回顶部

xujing123

很多文章我都更新在语雀了 https://www.yuque.com/changan-zrbx2