Vue基础(五)——前后端交互

作者:雨的印记
主题:Vue基础
时间:2020年11月26日18:28:17
[源码及素材下载地址:](https://github.com/zhangbing520/cv_cuc)

1. 前后端交互概述与URL地址格式

  • 接口调用的方式有哪些

    1. 原生ajax
    2. 基于jQuery的ajax
    3. Fetch
    4. Promise
  • url 地址格式有哪些

    1. 传统的url
    2. Restful形式的url

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

2.1 异步调用

  • 异步效果分析
    1. 定时任务
    2. Ajax
    3. 事件函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>前后端交互</div>
    <script src="./js/jquery.js"></script>
    <script>
        // 前后端交互-异步编程与Promise概述
        var ret = '---';
        $.ajax({
            url: 'http://localhost:3000/data',
            success: function(data){
                ret = data;
            }
        });
        console.log(ret); // '---' 因为ajax是异步的
    </script>
</body>
</html>

在这里插入图片描述
可以看到输出结果为‘—’,这是因为ajax是异步执行的。

再看下面的这个程序 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>前后端交互</div>
    <script src="./js/jquery.js"></script>
    <script>
        // 前后端交互-异步编程与Promise概述
        // var ret = '---';
        // $.ajax({
        //     url: 'http://localhost:3000/data',
        //     success: function(data){
        //         ret = data;
        //     }
        // });
        // console.log(ret); // '---' 因为ajax是异步的

        $.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>
</html>

输出的结果是不固定的,因为是多次异步:
在这里插入图片描述
如果我们加上了延时,效果更为明显。
如何设置对应的路由操作为:

在这里插入图片描述
最终的输出结果为:

在这里插入图片描述
这就是多次异步的结果,不一定会按照写程序的先后顺序输出。

  • 多次异步调用的依赖分析
    1. 多次异步调用的结果顺序不固定
    2. 异步调用结果如果存在依赖需要嵌套

解决上述问题的初步方法:回调函数的嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>前后端交互</div>
    <script src="./js/jquery.js"></script>
    <script>
        // 前后端交互-异步编程与Promise概述
        // var ret = '---';
        // $.ajax({
        //     url: 'http://localhost:3000/data',
        //     success: function(data){
        //         ret = data;
        //     }
        // });
        // console.log(ret); // '---' 因为ajax是异步的

        $.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>
</html>

在这里插入图片描述

在这里插入图片描述

2.2 Promise 用法

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

使用Promise主要有以下好处:

  • 可以避免多层异步调用嵌套问题(回调地狱)
  • Promise 对象提供了简洁的API,使得控制异步操作更加容易。
<script>
        // Promise的基本用法
        console.log(typeof Promise); // function
        console.dir(Promise);
    </script>

在这里插入图片描述

2.3 Promise 基本用法

  • 实例化 Promise 对象,构造函数中传递函数,该函数中用于处理异步任务。
  • resolve 和 reject 两个参数用于处理成功和失败两种情况,并通过 p.then 获取处理结果。
<script>
        // Promise的基本用法
        // console.log(typeof Promise); // function
        // 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){
            // 从resolve 得到正常结果
            console.log(data)
        }, function(info){
            // 从reject 得到错误信息
            console.log(info)
        });
        
    </script>

在这里插入图片描述
如果将 true 修改为 false,则最终的输出为:

在这里插入图片描述

2.4 基于Promise 处理 Ajax 请求

  1. 处理原生 Ajax
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 基于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; // 返回 Promise 实例对象
        }
        // 调用函数 发送ajax请求
        queryData('http://localhost:3000/data')
            .then(function(data){
                console.log(data);
            }, function(info){
                console.log(info);
            })
    </script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
如果服务器端发生错误,此时得到的输出为:
在这里插入图片描述
2. 发送多次 ajax 请求 (使用多个 then 链式操作完成多个异步任务的调用)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 基于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'); // return 的是这次调用的Promise 实例对象    
            })
            // 接收第二次调用的返回结果
            .then(function(data){
                console.log(data);
                return queryData('http://localhost:3000/data2'); // return 的是这次调用的Promise 实例对象
            })
            // 接收第三次调用的返回结果
            .then(function(data){
                console.log(data);
            })
    </script>
</body>
</html>

在这里插入图片描述

2.5 then参数中的函数返回值

  • 返回 Promise 实例对象
    1. 返回的该实例对象会调用下一个 then
  • 返回普通值
    1. 返回的普通值会直接传递给下一个 then, 通过 then参数中函数的参数接收该值
  1. 上一个then返回Promise实例对象
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 基于Promise发送Ajax请求
        function queryData(url) {
            // return 返回的是一个Promise实例对象 返回的该实例对象会调用下一个 then
            return 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 返回的是一个Promise实例对象 返回的该实例对象会调用下一个 then
        queryData('http://localhost:3000/data')
            .then(function(data){
                return queryData('http://localhost:3000/data1'); // 返回的是Promise实例对象 
            })
            .then(function(data){
                // 返回的是Promise实例对象 
                return new Promise(function(resolve, reject){
                    setTimeout(function(){
                        resolve(123);
                    },1000)
                });
            })
            .then(function(data){
                console.log(data);
            })  

    </script>
</body>
</html>

在这里插入图片描述
2. 上一个then返回具体的值:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 基于Promise发送Ajax请求
        function queryData(url) {
            // return 返回的是一个Promise实例对象 返回的该实例对象会调用下一个 then
            return 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 返回的是一个Promise实例对象 返回的该实例对象会调用下一个 then
        queryData('http://localhost:3000/data')
            .then(function(data){
                return queryData('http://localhost:3000/data1'); // 返回的是Promise实例对象 
            })
            .then(function(data){
                // 返回的是Promise实例对象 
                return new Promise(function(resolve, reject){
                    setTimeout(function(){
                        resolve(123);
                    },1000)
                });
            })
            .then(function(data){
                return 'hello';
            }) 
            // 上一个 then 中 返回的是具体的值 下一个then可以直接得到 return 的具体的值
            .then(function(data){
                console.log(data);
            })

    </script>
</body>
</html>

在上面我们return了hello字符串,这是具体的值,返回的普通值会传递给下一个 then,通过 then 参数中函数的参数接收该值。

在这里插入图片描述
总结:关于 then 参数中的返回值,第一种情况是返回一个新的 Promise 实例对象,那这个对象会调用下一个 then,从而可以在下一个 then 中得到上一个异步任务的处理结果。第二种情况是我们返回普通值,普通值会直接传递给下一个 then,所以在下一个 then中的参数中的函数可以接收到这个值,在这种情况下then会默认产生一个 Promise 实例对象,从而能够下一个 then 实现链式操作。

2.6 Promise 常用的API

  1. 实例方法
    • p.then() 得到异步任务的结果
    • p.catch() 获取异常信息
    • p.finally() 成功与否都会执行(尚且不是正式标准)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // Promise 常用的API-实例方法
        // console.log(Promise);
        function foo(){
        	// 返回的是 Promise 实例对象
            return new Promise(function(resolve, reject){
                setTimeout(function(){
                    resolve(123);
                },100);
            })
        }
		
		// 实例对象调用实例对象的方法
        foo()
            .then(function(data){
                console.log(data)
            })
            .catch(function(data){
                console.log(data)
            })
            .finally(function(){
                console.log('finish');
            });
    </script>
    
</body>
</html>

得到的输出为:

在这里插入图片描述

如果我们修改一下上述代码:将resolve()改为 reject()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // Promise 常用的API-实例方法
        // console.log(Promise);
        function foo(){
            // 返回的是 Promise 实例对象
            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('finish');
            });
    </script>
    
</body>
</html>

在这里插入图片描述
.catch()用来接收 reject 传递的数据,以处理异常信息。

上述调用 foo函数部分的代码还可以修改为以下程序:

// 实例对象调用实例对象的方法
        foo()
            .then(function(data){
                console.log(data)
            }, function(data){
                console.log(data)
            })
            .finally(function(){
                console.log('finish');
            });

最终的输出结果和上面的是一样的:
在这里插入图片描述
2. 对象方法
- Promise.all() 并发处理多个异步任务,所有任务都执行完成才能得到结果。
- Promise.race() 并发处理多个异步任务,只要有一个任务完成就能得到结果。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 基于Promise发送Ajax请求
        function queryData(url) {
            // return 返回的是一个Promise实例对象 返回的该实例对象会调用下一个 then
            return 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 返回的是一个Promise实例对象 返回的该实例对象会调用下一个 then
        queryData('http://localhost:3000/data')
            .then(function(data){
                return queryData('http://localhost:3000/data1'); // 返回的是Promise实例对象 
            })
            .then(function(data){
                // 返回的是Promise实例对象 
                return new Promise(function(resolve, reject){
                    setTimeout(function(){
                        resolve(123);
                    },1000)
                });
            })
            .then(function(data){
                return 'hello';
            }) 
            // 上一个 then 中 返回的是具体的值 下一个then可以直接得到 return 的具体的值
            .then(function(data){
                console.log(data);
            })

    </script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // Promise 常用API-对象方法
        // console.dir(Promise);
        // 基于Promise发送Ajax请求
        function queryData(url) {
            return  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);
            });
        }

        // 三个异步的接口调用
        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>
</html>

在这里插入图片描述
可以看到上面只输出了一条。最先返回的结果。

3. 接口调用——fetch 用法

3.1 fetch 概述

  1. 基本特性
  • 更加简单的数据获取方式,功能更强大、更灵活,可以看做是 xhr 的升级版。
  • 基于Promise实现
  1. 语法结构
fetch(url).then(fn2)
          .then(fn3)
          ...
          .catch(fn)

3.2 基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        /*
          Fetch API 基本用法
              fetch(url).then()
             第一个参数请求的路径   Fetch会返回Promise   所以我们可以使用then 拿到请求成功的结果 
        */
        fetch('http://localhost:3000/fdata').then(function(data){
          // text()方法属于fetchAPI的一部分,它返回一个Promise实例对象,用于获取后台返回的数据
          return data.text();
        }).then(function(data){
          //   在这个then里面我们能拿到最终的数据  
          console.log(data);
        })
      </script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

3.3 fetch请求参数

  • 常用配置选项
  1. method(String): HTTP请求方法,默认为GET(GET、POST、PUT、DELETE)
  2. body(String):HTTP的请求参数
  3. headers(Object):HTTP的请求头。默认为 { }
  • 基本用法
fetch('/abc', {
            method: 'get'
        }).then(data => {
            return data.text();
        }).then(ret => {
            // 注意这里得到的才是最终的结果
            console.log(ret);
        })
  1. GET请求方式的参数传递

第一种传参方式:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        fetch('http://localhost:3000/books?id=123', {
            method: 'get'
        })
            .then(function(data){
                // text()方法属于fetchAPI的一部分,它返回一个Promise实例对象,用于获取后台返回的数据
                return data.text();
             }).then(function(data){
          //   在这个then里面我们能拿到最终的数据  
          console.log(data);
        })
    </script>
</body>
</html>

在这里插入图片描述

在这里插入图片描述
第二种传参方式:

fetch('http://localhost:3000/books/123', {
            method: 'get'
        })
            .then(function(data){
                // text()方法属于fetchAPI的一部分,它返回一个Promise实例对象,用于获取后台返回的数据
                return data.text();
             }).then(function(data){
            // 在这个then里面我们能拿到最终的数据  
          console.log(data);
        });

在这里插入图片描述
2. DELETE请求方式的传参

fetch('http://localhost:3000/books/123', {
            method: 'delete'
        })
            .then(function(data){
                // text()方法属于fetchAPI的一部分,它返回一个Promise实例对象,用于获取后台返回的数据
                return data.text();
             }).then(function(data){
            // 在这个then里面我们能拿到最终的数据  
          console.log(data);
        });

在这里插入图片描述

在这里插入图片描述
4. POST 请求方式的参数传递

        // #3 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)
            });

在这里插入图片描述
在这里插入图片描述
参数也可以写成 json 格式的:

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)
            });
  1. PUT请求方式的参数传递

在这里插入图片描述

3.4 fetch 响应结果

响应数据格式

  • text():将返回体处理成字符串形式
  • json():返回结果和 JSON.parse(responseText)一样
fetch('/abc', then(data => {
		// return data.text()'
		return data.json();	
}).then(ret => {
	console.log(ret);
})

看下面这个例子:

   // fetch 响应结果的数据格式
   
   fetch('http://localhost:3000/json').then(function(data){
       return data.json();
   }).then(function(data){
       console.log(data); 
       console.log(data.uname);
   })

在这里插入图片描述
在这里插入图片描述
可以看到此时返回的是一个对象,如果我们将上面程序的 json()改为 text():

// fetch 响应结果的数据格式
fetch('http://localhost:3000/json').then(function(data){
    return data.text();
}).then(function(data){
    console.log(data); 
    console.log(typeof data);
});

在这里插入图片描述
从上面的输出结果可以看出此时得到的结果是字符串。

为了得到json对象形式的结果,可以使用JSON.parse()进行解析:

fetch('http://localhost:3000/json').then(function(data){
   return data.text();
}).then(function(data){
    var obj = JSON.parse(data)
    console.log(obj.uname, obj.age, obj.gender); 
});

在这里插入图片描述JSON.parse()可以将JSON格式的字符串解析为JSON对象。

4. 接口调用——axios 方法

4.1 axios 的基本特征

axios 是一个基于Promise 用于浏览器和 node.js的 HTTP 客户端(中文社区

它具有以下特征:

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

4.2 axios 基本用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./js/axios.js"></script>
    <script>
        axios('http://localhost:3000/adata').then(function(ret){
            // 注意 data 属性是固定的用法,用于获取后台的实际数据(data 属性输入 axios API的一部分)
            console.log(ret);
            console.log(ret.data);
        })
    </script>
</body>
</html>

在这里插入图片描述

在这里插入图片描述

4.3 axios 的常用API

  • get:查询数据
  • post:添加数据
  • put:修改数据
  • delete:删除数据

4.4 axios 的参数传递

  1. GET传递参数
  • 通过 url 传递参数
  • 通过 params 选项传递参数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./js/axios.js"></script>
    <script>
        // axios 请求参数传递
        axios.get('http://localhost:3000/axios?id=123').then(function(ret){
            console.log(ret.data);
        });

        axios.get('http://localhost:3000/axios/456').then(function(ret){
            console.log(ret.data);
        });
    </script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
可以看到一个是传统的url形式进行传参,一个是restfulAPI形式进行传参,在服务器端获取参数的方式不太一样。一个是通过 req.query,一个是通过 req.params。

也可以通过对象的形式传递参数:

axios.get('http://localhost:3000/axios', {
            params: {
                id: 789
            }
        }).then(function(ret){
            console.log(ret.data);
        });

在这里插入图片描述

在这里插入图片描述

  1. DELETE传递参数
axios.delete('http://localhost:3000/axios', {
            params: {
                id: 159
            }
        }).then(function(ret){
            console.log(ret.data);
        });

在这里插入图片描述
在这里插入图片描述

  1. POST传递参数
  • 通过选项传递参数(默认传递的是 json 格式的数据)
axios.post('/adata', {
	uname: 'Tom,
	pwd: 123
}).then(ret => {
console.log(ret.data)
})

看下面的这个例子:

axios.post('http://localhost:3000/axios', {
        uname: 'lisi',
        pwd: 123
    }).then(function(ret){
      console.log(ret.data)
    })

在这里插入图片描述
输出如下:

axios post 传递参数lisi---123

在这里插入图片描述
同时其传递的参数默认是 json 格式的。

  • 通过 URLSearchParams 传递参数(application/x-www-form-urlencoded)
var params = new URLSearchParams();
params.append('uname', 'zhangsan');
params.append('pwd', 123456);
axios.post('http://localhost:3000/axios', params).then(function(ret){
    console.log(ret.data)
});

在这里插入图片描述
输出为:

axios post 传递参数zhangsan---123456

提交的数据的格式为字符串的形式:

在这里插入图片描述

  1. PUT传递参数
  • 参数传递方式与post类似
 var params = new URLSearchParams();
 params.append('uname', 'zhangsan');
 params.append('pwd', 123456);
 axios.put('http://localhost:3000/axios/123', params).then(function(ret){
     console.log(ret.data)
 });

在这里插入图片描述
输出为:

axios put 传递参数123---zhangsan---123456

4.5 axios 的响应结果

响应结果的主要属性:

  • data:实际响应回来的信息
  • headers:响应头信息
  • status:响应状态码
  • statusText:响应状态信息
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./js/axios.js"></script>
    <script>
        // axios 响应结果与全局匹配
        axios.get('http://localhost:3000/axios-json').then(function(ret){
        	console,log(ret)
            console.log(ret.data.uname);
        });
    </script>
</body>
</html>

在这里插入图片描述
服务器端向客户端响应的是json数据

最终可以得到:

在这里插入图片描述

4.6 axios 的全局配置

//  配置公共的请求头 
axios.defaults.baseURL = 'https://api.example.com';
//  配置 超时时间
axios.defaults.timeout = 2500;
//  配置公共的请求头
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// 配置公共的 post 的 Content-Type
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

利用axios的全局配置我们可以改写一下 4.5 中的程序:

// 配置请求的基准 url 地址
axios.defaults.baseURL = 'http://localhost:3000/';
axios.get('axios-json').then(function(ret){
    console.log(ret.data.uname);
});

最终得到的结果一样。而这种方式可以简化程序。

我们还可以设置请求头:

// 配置请求头信息
axios.defaults.headers['mytoken'] = 'hello';
// 配置请求的基准 url 地址
axios.defaults.baseURL = 'http://localhost:3000/';
axios.get('axios-json').then(function(ret){
    console.log(ret.data.uname);
});

得到的结果还是:‘lisi’

可以在请求头中看到我们设置的请求头信息:

在这里插入图片描述
当然,对于跨域来说请求头是需要后台来设置的。

在这里插入图片描述

4.6 axios 拦截器

  1. 请求拦截器
    在请求发出之前设置一些信息(例如在每个请求体里加上token,统一做了处理如果以后要改也非常容易)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./js/axios.js"></script>
    <script>
        // axios 拦截器
        axios.interceptors.request.use(function(config){
            console.log(config.url);
            config.headers.mytoken = 'nihao';
            return config;   
        },function(err){
            console.log(err)
        });

        axios.get('http://localhost:3000/adata').then(function(data){
            console.log(data);
        });
    </script>
    
</body>
</html>

在这里插入图片描述
在这里插入图片描述
其中打印的 url 地址就是我们请求的地址。同时请求头中多了 mytoken:

在这里插入图片描述

  1. 响应拦截器
    响应拦截器的作用是在接收到响应后进行一些操作(例如在服务器返回登录状态失效,需要重新登录的时候,跳转到登录页)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./js/axios.js"></script>
    <script>
        // axios 请求拦截器
        axios.interceptors.request.use(function(config){
            console.log(config.url);
            config.headers.mytoken = 'nihao';
            return config;   
        },function(err){
            console.log(err)
        });

        // axios 响应拦截器
        axios.interceptors.response.use(function(res){
            // console.log(res);
            // 对响应回来的数据进行拦截并做一些处理
            var data = res.data;
            return data;   
        },function(err){
            console.log(err)
        });

        axios.get('http://localhost:3000/adata').then(function(data){
            console.log(data);
        });
    </script>
    
</body>
</html>

在这里插入图片描述

5. 接口调用——async / await 用法

5.1 async/await 的基本用法

  • async/await 是ES7引入的新语法,可以更加方便的进行异步操作
  • async 关键字用于函数上(async 函数的返回值是Promise实例对象)
  • await 关键字用于async函数当中 (await 可以得到异步的结果)
async function querydata(id){
	// 在 axios.get('/data') 得到的Promise实例对象前面加上 await 可以直接得到异步的结果
	// 这种方式不需要回调函数、也不需要then
    const ret = await axios.get('/data');
    return ret; // 
}

querydata.then(ret => {
    console.log(ret);
})

这种方式可以带给我们更好的编程体验,顺序往下写就可以了。更加方便。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./js/axios.js"></script>
    <script>
        // async/await 处理异步结果
        axios.defaults.baseURL = 'http://localhost:3000';
        
        // axios.get('adata').then(function(ret){
        //     console.log(ret.data);
        // });

        async function queryData() {
            var ret = await axios.get('adata');
            console.log(ret.data);
        }

        queryData();
    </script>
</body>
</html>

在这里插入图片描述

在这里插入图片描述

也可以写成如下的形式:

 // async/await 处理异步结果
axios.defaults.baseURL = 'http://localhost:3000';

async function queryData() {
    var ret = await axios.get('adata');
    return ret.data;
}

queryData().then(function(data){
     console.log(data);
 })

await 后面要跟一个 Promise 实例对象,我们可以手动的创建一个Promise 实例对象。

async function queryData() {
      var ret = await new Promise(function(resolve, reject){
          setTimeout(function(){
              resolve('nihao')
          },1000); 
      });
      return ret;
  }
  queryData().then(function(data){
      console.log(data); // 'nihao'
  })

在这里插入图片描述

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

多个异步请求的场景:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./js/axios.js"></script>
    <script>
        // async / await 处理多次异步请求
        
        axios.defaults.baseURL = 'http://localhost:3000';
        async function queryData(){
            var info = await axios.get('async1');
            var ret = await axios.get('async2?info=' + info.data);
            return ret.data;
        }

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

在这里插入图片描述

在这里插入图片描述

已标记关键词 清除标记
【为什么还需要学习C++?】 你是否接触很多语言,但从来没有了解过编程语言的本质? 你是否想成为一名资深开发人员,想开发别人做不了的高性能程序? 你是否经常想要窥探大型企业级开发工程的思路,但苦于没有基础只能望洋兴叹?   那么C++就是你个人能力提升,职业之路进阶的不二之选。 【课程特色】 1.课程共19大章节,239课时内容,涵盖数据结构、函数、类、指针、标准库全部知识体系。 2.带你从知识与思想的层面从0构建C++知识框架,分析大型项目实践思路,为你打下坚实的基础。 3.李宁老师结合4大国外顶级C++著作的精华为大家推出的《征服C++11》课程。 【学完后我将达到什么水平?】 1.对C++的各个知识能够熟练配置、开发、部署; 2.吊打一切关于C++的笔试面试题; 3.面向物联网的“嵌入式”和面向大型化的“分布式”开发,掌握职业钥匙,把握行业先机。 【面向人群】 1.希望一站式快速入门的C++初学者; 2.希望快速学习 C++、掌握编程要义、修炼内功的开发者; 3.有志于挑战更高级的开发项目,成为资深开发的工程师。 【课程设计】 本课程包含3大模块 基础篇 本篇主要讲解c++的基础概念,包含数据类型、运算符等基本语法,数组、指针、字符串等基本词法,循环、函数、类等基本句法等。 进阶篇 本篇主要讲解编程中常用的一些技能,包含类的高级技术、类的继承、编译链接和命名空间等。 提升篇: 本篇可以帮助学员更加高效的进行c++开发,其中包含类型转换、文件操作、异常处理、代码重用等内容。
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页