Vue基础（五）——前后端交互

最新推荐文章于 2022-08-09 15:08:21 发布
最新推荐文章于 2022-08-09 15:08:21 发布
阅读量273 收藏 1
点赞数 1
分类专栏： Vue.js 文章标签： javascript vue es6 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27575925/article/details/110141638
版权
作者：雨的印记
主题：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>

在这里插入图片描述

在这里插入图片描述

1oneLee
关注
专栏目录
前端到底怎么调用后端服务的？什么是Vue？怎么调用C#写的后端！
Read by heart
08-13 7151
前言 前端的概念很广，可以直观上理解为直接呈现给用户的网页部分，前端的实现涉及多种编程技术或语言，如HTML、CSS、JavaScript、Vue.js、ajax等，它们只需要一个浏览器即可运行。但是有时候前端网页需要的某些功能不好直接在前台（浏览器）中实现，这时候需要借助某种后端编程语言如Java、Python、PHP、C#等，可以在本地服务器上编写代码实现该功能，然后作为一种服务提交给前端进行调用。那么问题来了，前端究竟是怎么调用后端服务的呢？和我一起来一探究竟吧！ 正文 1. 工具准...
Vue 接口异步 Promise fetch axios
qq_38232003的博客
08-26 332
接口调用方式 原生ajax 基于jQuery的ajax fetch axios 异步 JavaScript的执行环境是「单线程」 所谓单线程，是指JS引擎中负责解释和执行JavaScript代码的线程只有一个，也就是一次只能完成一项任务，这个任务执行完后才能执行下一个，它会「阻塞」其他任务。这个任务可称为主线程 异步模式可以一起执行多个任务 JS中常见的异步调用 定时任何 ajax 事件函数 promise 主要解决异步深层嵌套的问题 promise 提供了简洁的API 使得异步操作更加容
promise fetch axios
hc3176的博客
05-30 172
promise fetch axios 基于Promise发送Ajax // 路由 app.get('/data', (req, res) => { res.send('Hello World!') }) function queryData(url) { var p = new Promise(function (resolve, reject) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = func
异步请求方法 promise
qq_44642237的博客
09-28 406
1. 回调地狱 实现异步函数顺序执行的传统方法 即回调函数的深层次嵌套结构 fn1(()=>{ fn2(()=>{ fn3(()=>{ fn4() }) }) }) 当函数执行体代码非常多时 回调地狱会导致代码结构看起来非常混乱 ，对代码可读性 和 调试造成很大的麻烦 2. 解决方法 ES6中提供了Promise对象 用于实现异步函数的顺序执行 Promise...
JavaScript——异步操作以及Promise 的使用
NanChen的博客
10-16 812
什么是异步？ 异步与同步是相反的 简单来理解就是：同步按你的代码顺序执行，异步不按照代码顺序执行，异步的执行效率更高。 什么时候用异步编程 在前端编程中（甚至后端有时也是这样），我们在处理一些简短、快速的操作时，例如计算 1 + 1 的结果，往往在主线程中就可以完成。主线程作为一个线程，不能够同时接受多方面的请求。所以，当一个事件没有结束时，界面将无法处理其他请求。 现在有一个按钮，如果我们设置它的 onclick 事件为一个死循环，那么当这个按钮按下，整个网页将失去响应。 为了解决类似这种
异步调用 promise 的用法
Reborn_s的博客
11-08 393
//在微信小程序中直接使用 promise var that = this that.test() .then(function (data) { console.log(data); }) .then(function(){ console.log(123) }); //page中使用 test: function(){ var p
Vue学习（四）——前后端交互模式
qq_42264597的博客
04-12 1282
Vue学习（四）——前后端交互模式 一、前后端交互模式 1、接口调用的方法 （1）原生ajax （2）基于Jquery的ajax （3）fetch （4）axios 2、HTTP请求方式 (1)GET 查询 (2)POST 添加 (3)PUT 修改 (4)DELETE 删除 二、Promise用法 promise是异步编程的一种解决方案，从语法上讲，Promise是一个对象，从它可以获取异步操作的消息 使用Promise主要的好处：（1）可以避免多层异步调用嵌套问题（回调函数） ​
Vue太难啦！从入门到放弃day05——Vue前后端交互
小陈工的博客
08-09 1461
Promise主要解决异步深层嵌套的问题Promise 提供了简洁的API，使得异步操作更加容易从语法上讲，Promise是一个对象，也是一个函数Fetch API是新的ajax解决方案，更好的封装了ajax代码使用fetch请求时，也要遵循HTTP协议，请求方式有POST，GET，DELETE，UPDATE，PATCH和PUT，默认的是 GET 请求使用fetch时需要在 options 对象中 指定对应的 method 请求方式不同的请求方式，参数传递的格式也不同。...
毕设项目——前后端分离Springboot3+Vue3游戏官方网站.zip
10-20
在本毕设项目中，我们将会探讨如何使用最新的Spring Boot 3框架与Vue 3前端框架构建一个完整的、前后端分离的游戏官方网站。这样的设计模式在现代Web开发中极为常见，它能够提供更好的性能、可维护性和用户体验。让...
初识 vue —— 最简单的前后端交互示例
热门推荐
明月如霜丶
10-12 5万+
一、学习 vue 面临的问题 最近想学一门前端技术防身，看到博客园中写 vue 的多，那就 vue 吧。都说 vue 的官方教程写得好，所以我就从官方教程开始学习。官方教程说“Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。”但是这个概念是个什么鬼？还是让人一头雾水嘛。而且我一开始也没有搞清楚 vu...
vue中promise的使用及异步请求数据的方法
01-19
下面给大家介绍vue中promise的使用 　　promise是处理异步的利器，在之前的文章《ES6之promise》中，我详细介绍了promise的使用， 在文章《js动画实现&&回调地狱&&promise》中也提到了promise的then的链式调用， 这篇文章主要是介绍在实际项目中关于异步我遇到的一些问题以及解决方法，由此来加深对promise的进一步理解。 背景 　　进入商品页，商品页的左侧是分类，右侧是具体的商品，一旦进入商品页，就把所有分类的商品请求出来，注意： 必须要按照顺序。 实现思路 在商品页, created 钩子函数触发获取分类的http请求，请求到结果后，开始请求所有的
详解vue前后台数据交互vue-resource文档
08-29
本篇文章主要介绍了vue前后台数据交互vue-resource文档，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
图书管理系统(前端)————前后端分离、毕业设计、项目内包含毕业论文.zip
最新发布
01-01
《图书管理系统(前端)——基于前后端分离的毕业设计实践》 在当今信息化时代，图书管理系统的开发已经成为软件工程领域中的一个典型课题，尤其对于计算机专业学生来说，它常常作为毕业设计或课程设计的重要项目。本...
Promise之fetch（二）
qq_43534980的博客
08-18 328
1. fetch的基本使用，fetcg是基于promise的封装的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript"> /* Fetch API 调用.
异步调用及promise基本用法
weixin_45630345的博客
08-09 590
1.promise用法 1.1 异步调用 1.1.1 异步效果分析 ①定时任务 ②Ajax ③事件函数 1.1.2 多次异步调用的依赖分析 多次异步调用的结果顺序不确定 异步调用结果如果存在依赖需要，要用嵌套 1.2 promise概述 promise是异步编程的一种解决方案，从语法上来讲，Promise是一个对象，从它可以获取异步操作的消息。 使用Promise主要有以下好处： 可以避免多层异步调用嵌套问题（回调地狱） Promise对象提供了简洁的API，使得控制异步操作更容易 Promis
前端和后端是如何交互的
qq_37139060的博客
08-14 911
1、前端请求数据URL由谁来写 在开发中，URL主要是由后台来写好给前端。  若后台在查询数据，需要借助查询条件才能查询到前端需要的数据时，这时后台会要求前端提供相关的查询参数（即URL请求的参数）。 2、接口文档主要由谁来写 接口文档主要由后台设计和修改。  后台直接跟数据打交道，最清楚数据库里有什么数据，能返回什么数据。  前端只是数据的被动接受者，只是接口文档的使用者。  使用过...
promise&fetch
qq_43977829的博客
11-26 243
promise promise状态 pending（进行中）、fulfilled（已成功）和 rejected（已失败）。 then方法 then 方法接收两个函数作为参数，第一个参数是 Promise 执行成功时的回调，第二个参数是 Promise 执行失败时的回调，两个函数只会有一个被调用。 通过 .then 形式添加的回调函数，不论什么时候，都会被调用。 fetch fetch 规范与 jQuery.ajax() 的区别： 当接收到一个代表错误的 HTTP 状态码时，从 fetch() 返回
(前端必会）理解异步和Promise的使用
weixin_43750480的博客
05-15 4892
1.什么是异步(asynchronization) 举个生活上的例子来说，晚餐时间到啦，我们先去煮饭，然后把饭入锅了，我们总不能一直在这里一直等到它熟了才去炒菜吧？这样多憨啊（现实中也没人会这样做吧），所以我们设置了电饭煲定时，当饭熟的时候电饭煲就会嘀嘀嘀嘀地响来通知我们。这样我们就不用在这里一直等饭熟了，煮了饭之后我们立马就去炒菜，然后菜煮好了，那边电饭煲也来通知我们饭熟了，然后我们就可以开锅了。这就是一个简单的异步流程，如果放到编程里面，就有同步任务和异步任务之分，Javascript是一个单线程的编程
DM_SQL教程：Django与Vue集成——前后端分离与整合实践
在前后端分离的开发模式下，Django主要负责业务逻辑、数据处理和安全控制，Vue.js则专注于用户体验和界面交互，两者协同工作，可以构建出高效、响应式的Web应用。同时，这种分离也有利于团队协作，提高开发效率。 ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值