精华内容
下载资源
问答
  • vue前后端交互
    2022-04-18 12:38:08

    1.发起get请求用?传递参数:使用ES6模板语法

    //es6模板语法
    axios.get(`https://api.github.com/search/user?q=${this.keyword}`).then(
            data=>{console.log('得到数据为:'data.data)},
            error=>{console.log('请求失败消息',error.message)}
    )

    更多相关内容
  • vue前后端交互

    2021-08-14 13:51:18
    前后端交互接口调用方式一、promise1.优点2.异步编程二、fetch1.特性2.语法结构3.fetch使用1.常用配置选项2.代码形式4.fetch响应结果三、axios1.基本特性2.基本用法3.常用API4.参数传递1.get方法传递参数2.post方式...

    接口调用方式

    一、promise

    1.优点

    • 可以避免多层嵌套问题(回调地狱)
    • API简洁,异步操作更加容易

    2.异步编程

    js里面的异步编程有:

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

    二、fetch

    1.特性

    • 更加简单的数据获取方式、功能更加强大、更灵活
    • 基于promise实现

    2.语法结构

    fetch(url).then(fn2)
    		  .then(fn3)
    		  ...
    		  .then(fn)
    
    //例子
    feth('/abc').then((data)=>{
    //text是fetch提供的API返回一个promise实例对象,用于获取后台返回的数据
    	return data.text(); 
    }).then((ret)=>{
    	//这里才是最终数据
    	console.log(ret);
    })
    

    3.fetch使用

    1.常用配置选项

    • method(String):http请求方法,默认为GET(GET、POST、PUT、DELETE)
    • body(String):http的请求参数
    • headers(Object):http的请求头,默认为{}

    2.代码形式

    get 和delete方式请求

    fetch('/abc',{
    	method: 'get' //也可以是delete
    }).then(data=>{
    	return data.text;
    }).then(ret=>{
    //最终数据
    	cosole.log(ret);
    })
    

    post(put 和post类似)

    fetch('/abc',{
    	method: 'post'//参数之间用&隔开
    	body:'uname=lisi&pwd=123',
    	/*如果是json格式
    	body:JSON.stringify({
    		"name": "张三",
    		"pwd": "123"
    	 })*/
    	//请求头是必须的,不可省略
    	headers:{
    		//内容类型 值基本固定
    		//值也可以是 application/json
    		'Content-Type':'application/x-www-from-urlencoded',
    	} 
    }).then(data=>{
    	return data.text;
    }).then(ret=>{
    //最终数据
    	cosole.log(ret);
    })
    

    4.fetch响应结果

    • text():将返回体处理成字符串类型
    • json():返回结果和json.parse(responseText)一样
    feth('/abc').then((data)=>{
    //返回json形式的数据
    //json返回的是一个对象
    	return data.json(); 
    }).then((ret)=>{
    	//这里才是最终数据
    	console.log(ret);
    })
    

    三、axios

    1.基本特性

    是一个基于Promise用于浏览器和node.js的http客户端

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

    2.基本用法

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

    3.常用API

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

    4.参数传递

    1.get方法传递参数

    • 通过URL传递参数
    • 通过params选项传递参数
    //通过url传递参数
    axios.get('/adata?id=123')
    	.then(ret=>{
    		console.log(ret.data);
    	})
    
    axios.get('/adata/123')
    	.then(ret=>{
    		console.log(ret.data);
    	})
    
    //通过params选项传递参数
    axios.get('/adata'{
    	params:{
    		id: 123
    	}
    }).then(ret=>{
    		console.log(ret.data);
    	})
    

    delete方式与get方式传参类似

    2.post方式传递参数

    默认传递的是json形式的数据

    axios.get('/adata'{
    	uname:"tom",
    	pwd: 123
    }).then(ret=>{
    		console.log(ret.data);
    	})
    

    通过URLSearchParams传递参数

    const params=new URLSearchParams();
    params.add('params1','value1');
    params.add('params2','value2');
    axios.get('/api/test',params).then(ret=>{
    	colsole.log(ret.data)
    })
    

    put请求和post类似

    5.相应结果

    • data:实际响应回来的数据
    • headers:响应头信息
    • status:响应状态码,200为正常
    • statusText:响应状态信息
      在这里插入图片描述

    四、axios拦截器

    1.请求拦截器

    添加一个拦截器

    axios.interceptors.request.use(config=>{
    	//所做的配置
    	config.headers.mytoken='nihao';
    	consle.log(config.url);
    	//一定将config返回出去
    	return config;
    },err=>{
    	//处理响应的错误信息
    })
    

    2.响应拦截器

    在获取数据之前对数据进行加工处理

    axios.interceptors.response.use(res=>{
    	//在这里对数据进行处理
    	//res是返回的对象
    	const data=res.data;
    	return data;
    },err=>{
    	//处理响应的错误信息
    })
    

    注: 本篇作为个人笔记。同时希望能够帮到看见这篇文章的朋友。

    展开全文
  • Vue前后端交互

    2020-04-26 09:32:41
    前后端交互模式 接口调用方式 传统形式的URL Restful形式的URL 前后端的交互模式主要是:前端通过ajax调用一个url地址,后台通过这个地址返回对应的数据,前端进行数据的渲染。 异步调用 异步效果分析: 定时...

    前后端交互模式

    接口调用方式
    在这里插入图片描述
    传统形式的URL
    在这里插入图片描述
    Restful形式的URL
    在这里插入图片描述
    前后端的交互模式主要是:前端通过ajax调用一个url地址,后台通过这个地址返回对应的数据,前端进行数据的渲染。

    异步调用

    异步效果分析:

    1. 定时任务
    2. Ajax
    3. 事件函数
      多次异步调用的依赖分析
      因为Ajax属于异步编程,所以它得到的结果的顺序是不确定的,所以如果要想得到有顺序的返回结果就需要嵌套。但是如果一直往里面嵌套就会很复杂,一环套一环,这时这种现象,我们可以叫做回调地狱。
      通过回调函数一直往里嵌套,这种叫做 回调地狱
      在这里插入图片描述

    Promise

    Promise是异步编程的一种解决方案,从语法上讲,Promise是一个对象(也是一个函数),从它可以获取异步操作的消息。
    好处:可以避免多层异步调用嵌套问题(回调地狱)
    Promise对象提供了简洁的API,使得控制异步操作更加容易
    Promise基本用法:
    实例化Promise对象,构造函数中传递函数,该函数中用于处理异步任务
    resolve和reject两个参数用于处理成功和失败两种情况,并通过p.then获取处理结果
    在这里插入图片描述

    var p = new Promise(function (resolve, reject) {
    			//这里用于实现异步任务
    			setTimeout(function () {
    				var flag = false;
    				if (flag) {
    					//正常情况
    					resolve('hello');
    				} else {
    					//异常情况
    					reject('error');
    				}
    			}, 100);
    		});
    		p.then(function (data) {
    			console.log(data);
    		}, function (info) {	
    			console.log(info);
    		});
    

    基于Promise处理Ajax请求
    在这里插入图片描述
    发送多次ajax请求

    回调地狱
    在这里插入图片描述

    这种写法 代替回调地狱
    在这里插入图片描述
    then参数中的函数返回值

    1. 返回Promise实例对象
      在这里插入图片描述
    2. 返回普通值
      在这里插入图片描述

    promise常用的API

    1. 实例方法
      在这里插入图片描述
    function foo () {
    			return new Promise(function (resolve, reject){
    				setTimeout(function() {
    					// resolve(123);
    					reject(234);
    				}, 100);
    			})
    			}
    			foo()
    				.then(function(data){
    					console.log(data);	
    				})
    				.catch(function(data){
    					console.log(data);
    				})
    				.finally(function(){
    					console.log('finally');
    				})
    		
    
    1. 对象方法
      在这里插入图片描述
    2. 在这里插入图片描述

    fetch方法是基于Promise对象的(调用接口方法)

    基本特性
    更加简单的数据获取方式,功能更强大,更灵活,可以看做是xhr(ajax)的升级版
    基于Promise实现
    语法结构
    在这里插入图片描述
    在这里插入图片描述
    text()是fetch API中的一部分,它返回的是一个Promise对实例象,用于获取后台返回的数据,需要通过下一个then得到数据
    fetch请求参数
    在这里插入图片描述
    在这里插入图片描述
    delete请求方式的参数传递
    在这里插入图片描述
    post请求方式的参数传递
    在这里插入图片描述
    put请求方式的参数传递
    一般用于修改数据
    在这里插入图片描述
    响应数据格式
    text(): 将返回体处理成字符串类型
    json():将返回结果和JSON.parse(responseText)一样

    展开全文
  • Vue前后端交互~非常详细哦~

    千次阅读 2021-01-25 21:28:42
    能够说出什么是前后端交互模式 能够说出Promise的相关概念和用法 能够使用fetch进行接口调用 能够使用axios进行接口调用 能够使用async/await方式调用接口 能够基于后台接口实现案例 目录 前后端交互模式 Promise...

    下面是对Vue前后端交互模式整理,希望可以帮助到有需要的小伙伴~

    目标

    • 能够说出什么是前后端交互模式
    • 能够说出Promise的相关概念和用法
    • 能够使用fetch进行接口调用
    • 能够使用axios进行接口调用
    • 能够使用async/await方式调用接口
    • 能够基于后台接口实现案例

    目录

    • 前后端交互模式
    • Promise用法
    • 接口调用-fetch用法
    • 接口调用-axios用法
    • 接口调用async/await用法
    • 基于接口的案例

    前后端交互模式

    接口调用方式

    • 原生Ajax
    • 基于jQuery的Ajax
    • fetch (API)
    • axios  (第三方库)

    在这里插入图片描述

    URL地址格式

    传统形式的URL

    • 格式:schema://host:port/path?query#fragment
      1. schema:协议。例如http、https、ftp等
      2. host:域名或IP地址
      3. port:端口,http默认端口80,可以省略
      4. path:路径,例如/abc/a/b/c
      5. query:查询参数,例如uname=lisi&age=12
      6. fragment: 锚点 (哈希Hash),用于定位页面的某个位置 #
    • 符合规则的URL:
      1. http://www.baidu.com
      2. http://www.baidu.com/java/web
      3. http://www.baidu.com/java/web?flag=1
      4. http://www.baidu.com/java/web?flag=1#function

    Result形式的URL

    • HTTP请求方式
      1. GET 查询
      2. POST 添加
      3. PUT 修改
      4. DELETE 删除
    • 符合规则的URL地址(通过/传递请求参数)
      1. http://www.baidu.com/books GET
      2. http://www.baidu.com/books POST
      3. http://www.baidu.com/books/123 PUT
      4. http://www.baidu.com/books/123 DELETE

    Promise用法(处理异步编程)

    官方文档:https://developer.mozilla.org/en-Us/docs/Web/JavaScript/Reference/Global_objects/Promise

    异步调用

    • 异步调用效果分析

      • 定时任务
      • Ajax
      • 事件函数
    • 多次异步调用的依赖分析

      • 多次调用的结果顺序不确定

      • 异步调用结果如果存在依赖需要嵌套 (缺点:回调地狱)

    在这里插入图片描述

    Promise概述

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

    • 可以避免多层异步调用嵌套问题(回调地狱)
    • Promise对象提供了简洁的API,使得控制异步操作更加容易
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Promise概述</title>
    </head>
    <body>
        <script>
            console.log(typeof Promise);
            // console.dir()可以显示一个对象的所有属性和方法
            console.dir(Promise)
        </script>
    </body>
    </html>
    

    在这里插入图片描述

    Promise的基本用法

    先规定好正常和异常的处理办法,然后根据条件来确定执行正常的处理办法还是异常的处理办法

    resolve和reject两个参数用于处理成功和失败的两种情况,并通过p.then获取处理结果

    实例化Promise对象,构造函数中传递函数,该函数中用于处理异步任务

    var p = new Promise(function(resolve,reject){
                // 成功时调用 resolve()
        		// 失败时调用 reject()
            });
    
            // 接收异步任务的结果
            p.then(function(ret){
               // 从resolve得到正常的结果
            },function(ret){
                // 从reject得到错误信息
            });
    

    实例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Promise用法</title>
    </head>
    <body>
        <script>
            // 实例化一个Promise对象
            // resolve,reject 这两个参数都是方法
            var p = new Promise(function(resolve,reject){
                // 实现异步任务
                setTimeout(function(){
                    // 条件错误
                    // var flag = false; // 出错了
                    var flag = true; // hello
                    if (flag) {
                        // 正常情况
                        resolve("hello")
                    } else {
                        // 异常情况
                        reject("出错了")
                    }
                },100);
            });
    
            // 接收异步任务的结果
            p.then(function(data){
                console.log(data)
            },function(info){
                console.log(info)
            });
        </script>
    </body>
    </html>
    

    在这里插入图片描述

    基于Promise处理Ajax请求

    处理原生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>
            /*  */
            function queryData(url) {
                var p = new Promise(function(resolve,reject){
                    // XMLHttpRequest 对象用于在后台与服务器交换数据。
                    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)
                })
        </script>
    </body>
    </html>
    
    发送多次ajax请求
    queryData()
    	.then(function(data){
        return queryData();
    	})
    
    	.then(function(data){
        return queryData();
    	})
    
    	.then(function(data){
        return queryData();
    	})
    

    实例:

    <!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>
            /*  */
            function queryData(url) {
                var p = new Promise(function(resolve,reject){
                    // XMLHttpRequest 对象用于在后台与服务器交换数据。
                    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;
            }
    
            // 发送一个aiax请求
            /* 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')
                })
    
                .then(function(data){
                    console.log(data)
                    return queryData('http://localhost:3000/data2')
                })
    
                .then(function(data){
                    console.log(data)
                })
            	/*
            
                Hello World !
                Hello Tom !
                Hello Jerry !
            */ 
        </script>
    </body>
    </html>
    

    在这里插入图片描述

    then参数中的函数返回值

    返回Promise实例对象

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>then参数中的函数返回值</title>
    </head>
    <body>
        <script>
            function queryData(url) {
                return new Promise(function(resolve,reject){
                    // XMLHttpRequest 对象用于在后台与服务器交换数据。
                    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)
                });
            }
            // Promise返回的该实例对象会调用下一个then
            queryData('http://localhost:3000/data')
                .then(function(data){
                    return queryData('http://localhost:3000/data1');
                })
    
                .then(function(data){
                    return new Promise(function(resolve,reject){
                        setTimeout(function(){
                            resolve(123);
                        },1000)
                    })
                })
    
                .then(function(data){
                    console.log(data)
                })
        </script>
    </body>
    </html>
    

    在这里插入图片描述

    返回普通值

    返回普通值的话,回生成一个默认的Promise对象,便于下面的then对其进行调用

    返回的普通值会直接传递给下一个then,通过then参数中函数的参数接收该值

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>then参数中的函数返回值</title>
    </head>
    <body>
        <script>
            function queryData(url) {
                return new Promise(function(resolve,reject){
                    // XMLHttpRequest 对象用于在后台与服务器交换数据。
                    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)
                });
            }
            
                // 返回的普通值会直接传递给下一个then,通过then参数中函数的参数接收该值
                .then(function(data){
                    return 'hello'
                })
                .then(function(data){
                    console.log(data)
                }
                )
        </script>
    </body>
    </html>
    

    在这里插入图片描述

    Promise常用的API

    实例方法
    • p.then() 得到异步任务的正确结果
    • p.catch() 获取异常信息
    • p.finally() 成功与否都会执行(尚且不是正式标准)

    除了第一个 then ,以后的所有的 then 都是上一个 then 中的返回结果
    then 接收到结果一共有三种情况:

    • . 上一个 then 没有返回值,则就是 undefined

    • 上一个 then 有普通返回值:数组、数字、字符串、对象

    • 上一个 then 又返回了一个新的 Promise 对象

      如果是上一个 then 里面返回了一个 Promise 对象,则这个 then 的回调处理函数就指向了上一个 then 中返回的 Promise 对象中的 resolve

    语法结构:

    			// 处理正常结果
                .then(function(data){
                   // 处理正常结果
                })
                // 处理异常结果
                .catch(function(data){
                    // 处理异常结果
                })
                .finally(function(){
                    // 成功与否都会执行
                })
    

    实例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>06_Promise常用的API.html</title>
    </head>
    <body>
        <script>
            /* Promise常用的API - 实例方法 */
            function foo(){
                return new Promise(function(resolve,reject){
                    setTimeout(function(){
                        reject('error');
                    },100)
                })
            }
    
            foo()
                // 处理正常结果
                .then(function(data){
                    console.log(data)
                })
                // 处理异常结果
                .catch(function(data){
                    console.log(data)
                })
                .finally(function(){
                    console.log('finished')
                })
            // 相当于
            /* foo()
                .then(function(data){
                    console.log(data)
                },function(data){
                    console.log(data)
                })
                .finally(function(){
                    console.log('finished')
                }) */
        </script>
    </body>
    </html>
    

    在这里插入图片描述

    对象方法

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

    语法结构:

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

    实例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>对象方法</title>
    </head>
    <body>
        <script>
            function queryData(url) {
                return new Promise(function(resolve,reject){
                    // XMLHttpRequest 对象用于在后台与服务器交换数据。
                    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()并发处理多个异步任务,所有任务都执行完成才能得到结果
            Promise.all([p1,p2,p3]).then(function(result){
                console.log(result)
            })
            // Promise.race()并发处理多个任务,只要有一个任务完成就能得到结果
            Promise.race([p1,p2,p3]).then(function(result){
                console.log(result)
            })
        </script>
    </body>
    </html>
    

    在这里插入图片描述

    在这里插入图片描述

    fetch概述

    基本特征

    • 更加简单的数据获取方式,功能更强大,更灵活,可以看作是xhr的升级版
    • 基于Promise实现

    语法结构

    fetchAPI官方文档说明:https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

    fetch(url).then(fn2)
                  .then(fn3)
                  ...
                  .catch(fn)
    

    fetch的基本用法

    fetch('/abc').then(data => {
        //text()方法属于fetchAPI的一部分,它的返回值是一个Promise实例对象,用于获取后台返回的数据
        return data.text();
    }).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>fetch</title>
    </head>
    <body>
        <script>
            /* Fetch API 基本用法 */
            fetch('http://localhost:3000/fdata').then(function(data){
                // text()方法属于fetchAPI的一部分,它的返回值是一个Promise实例对象,用于获取后台返回的数据
                return data.text();
            }).then(function(data){
                console.log(data);
            })
        </script>
    </body>
    </html>
    

    在这里插入图片描述

    fetch请求参数

    常用配置选项

    • method(String):HTTP请求方法,默认为GET (GET, POST, PUT, DELETE)
    • body(String):HTTP的请求参数
    • headers(Onject):HTTP的请求头,默认为{}
    fetch('/abc',{
        method:'get'
    }).then(data => {
        return data.text();
    }).then(ret => {
        //注意:这里得到的才是最终的数据
        console.log(ret);
    })
    

    GET请求方式的参数传递

    • 传统的URL
    fetch('/abc?id=123').then(data => {
        return data.text();
    }).then(ret => {
        //注意:这里得到的才是最终的数据
        console.log(ret)
    })
    
    • Restful形式的URL
    fetch('/abc/123',{
        method:'get'
    }).then(data => {
        return data.text();
    }).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>fetch请求参数</title>
    </head>
    <body>
        <script>
            /* Fetch API 调用接口传递参数 */
            // 传统的URL传递参数
            // fetch('http://localhost:3000/books?id=123',{
            //     method: 'get'
            // })
            //     .then(function(data){
            //         return data.text();
            //     }).then(function(data){
            //         console.log(data)
            //     });
    
            // Restful形式的URL
            fetch('http://localhost:3000/books/456',{
                method: 'get'
            })
                .then(function(data){
                    return data.text();
                }).then(function(data){
                    console.log(data)
                });
        </script>
    </body>
    </html>
    

    对应的路由:

    app.get('/books', (req, res) => {
        setTimeout(() => {
            // req.query.id 参数的值
            res.send('传统的URL传递参数' + req.query.id)
        })
    })
    
    app.get('/books/:id', (req, res) => {
        setTimeout(() => {
            res.send('Restful形式的URL传递参数' + req.params.id)
        })
    })
    

    在这里插入图片描述

    在这里插入图片描述

    DELETE请求方式的参数传递

    fetch('/abc/123',{
        method:'delete'
    }).then(data => {
        return data.text();
    }).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>delete请求参数</title>
    </head>
    <body>
        <script>
            // Restful形式的URL
            fetch('http://localhost:3000/books/456',{
                method: 'delete'
            })
                .then(function(data){
                    return data.text();
                }).then(function(data){
                    console.log(data)
                });
        </script>
    </body>
    </html>
    

    路由:

    app.delete('/books/:id', (req, res) => { // :id是自定义的
        setTimeout(() => {
            res.send('RDELETE请求传递参数' + req.params.id)
        })
    })
    

    在这里插入图片描述

    POST请求方式的参数传递

    字符串方式传递参数

    [[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gL4KmBkQ-1611575969659)

    fetch('/books',{
        method:'post',
        body:'uname=lisi&pwd=123',
        headers:{
            'Content-Type':'application/x-www-form-urlencoded'
        }
    }).then(data => {
        return data.text();
    }).then(ret => {
    //注意:这里得到的才是最终的数据
        console.log(ret);
    })
    

    实例1:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>post请求传参</title>
    </head>
    <body>
        <script>
            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)
                })
        </script>
    </body>
    </html>
    

    在这里插入图片描述

    json方式传递参数
    fetch('/books',{
        method:'post',
        body:JOSN.stringify({
            uname:'lisi',
            age:12
        }),
        headers:{
            'Content-Type':'application/json'
        }
    }).then(data => {
        return data.text();
    }).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>post请求传参json</title>
    </head>
    <body>
        <script>
            fetch('http://localhost:3000/books',{
                method: 'post',
                body: JSON.stringify({
                    uname: '张三',
                    pwd: '45'
                }),
                headers: {
                    'Content-Type': 'application/json'
                }
            })
                .then(function(data){
                    return data.text();
                }).then(function(data){
                    console.log(data)
                })
        </script>
    </body>
    </html>
    

    路由:

    app.post('/books', (req, res) => {
        res.send('POST请求传递参数' + req.body.uname + '---' + req.body.pwd)
    })
    

    在这里插入图片描述

    PUT请求方式的参数传递

    fetch('/books/123',{
        method:'put',
        body:JOSN.stringify({
            uname:'lisi',
            age:12
        }),
        headers:{
            'Content-Type':'application/json'
        }
    }).then(data => {
        return data.text();
    }).then(ret => {
    	//注意:这里得到的才是最终的数据
        console.log(ret);
    })
    

    实例1 ~ json参数:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>put请求方式的参数传递json</title>
    </head>
    <body>
        <script>
            fetch('http://localhost:3000/books/123',{
                method: 'put',
                body: JSON.stringify({
                    uname: '张三',
                    pwd: '789'
                }),
                headers: {
                    'Content-Type': 'application/json'
                }
            })
                .then(function(data){
                    return data.text();
                }).then(function(data){
                    console.log(data)
                })
        </script>
    </body>
    </html>
    

    路由:

    app.put('/books/:id', (req, res) => {
        res.send('PUT请求传递参数' + req.params.id + '---' + req.body.uname + '---' + req.body.pwd)
    })
    

    在这里插入图片描述

    实例2 ~ 一般方式传参:

    实例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>put请求方式的参数传递json</title>
    </head>
    <body>
        <script>
            fetch('http://localhost:3000/books/123',{
                method: 'put',
                body: JSON.stringify({
                    uname: '张三',
                    pwd: '789'
                }),
                headers: {
                    'Content-Type': 'application/json'
                }
            })
                .then(function(data){
                    return data.text();
                }).then(function(data){
                    console.log(data)
                })
        </script>
    </body>
    </html>
    

    路由:

    app.put('/books/:id', (req, res) => {
        res.send('PUT请求传递参数' + req.params.id + '---' + req.body.uname + '---' + req.body.pwd)
    })
    

    在这里插入图片描述

    总结:

    1、GET请求会向数据库发索取数据的请求,从而来获取信息,该请求就像数据库的select操作一样,只是用来查询数据库中的数据,不会修改、增加数据,不会影响资源的内容,即该请求不会产生副作用。无论进行多少次操作,结果都是一样的。

    2、与GET不同的是,PUT请求是向服务器端发送数据的,从而改变信息,该请求就像数据库的update操作一样,用来修改数据的内容,但是不会增加数据的种类等,也就是说无论进行多少次PUT操作,其结果并没有不同。

    3、POST请求同PUT请求类似,都是向服务器端发送数据的,但是该请求会改变数据的种类等资源,就像数据库的insert操作一样,会创建新的内容。几乎目前所有的提交操作都是用POST请求的。

    4、DELETE请求顾名思义,就是用来删除某一个资源的,该请求就像数据库的delete操作。

    就像前面所讲的一样,既然PUT和POST操作都是向服务器端发送数据的,那么两者有什么区别呢。。。POST主要作用在一个集合资源之上的(url),而PUT主要作用在一个具体资源之上的(url/xxx),通俗一下讲就是,如URL可以在客户端确定,那么可使用PUT,否则用POST。

    综上所述,我们可理解为以下:

    1、POST /url 创建
    2、DELETE /url/xxx 删除
    3、PUT /url/xxx 更新

    4、GET /url/xxx 查看

    fetch响应结果

    响应数据格式
    • text():将返回体处理成字符串类型返回结果是字符串类型
    • json():返回结果和JSON.parse(responseText)一样,返回结果是对象类型
    fetch ('/ abc' then(data=>{
    	// return data.text ();
        return data.json();
    }).then(ret=>{
    	console.log (ret);
    });
    
    

    实例1 ~ json()

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>fetch响应结果1</title>
    </head>
    <body>
        <script>
            /* Fetch响应结果的数据格式 */
            fetch('http://localhost:3000/json').then(function(data){
                // json():返回结果和JSON.parse(responseText)一样,**返回结果是对象类型**
                return data.json()
            }).then(function(data){
                console.log(data)
                console.log(data.uname)
            })
        </script>
    </body>
    </html>
    

    在这里插入图片描述

    实例2 ~ text() :

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>fetch响应结果2</title>
    </head>
    <body>
        <script>
            /* Fetch响应结果的数据格式 */
            fetch('http://localhost:3000/json').then(function(data){
                // text():将返回体处理成字符串类型,**返回结果是字符串类型**
                return data.text();
            }).then(function(data){
                // console.log(data); // {"uname":"lisi","age":12,"gender":"male"} 返回结果是字符串类型的,就不能用data.uname了
                // console.log(typeof data); // string
                // console.log(data.uname);  // undefined
                // 把json的 string数据 转为 json对象
                var obj = JSON.parse(data);
                console.log(obj)
                console.log(obj.uname,obj.age,obj.gender)
            })
        </script>
    </body>
    </html>
    

    在这里插入图片描述

    接口调用-axios用法

    axios的基本特性

    axios(官网:https://github.com/axios/axios))是一个基于Promise用于浏览器和node.js的HTTP客户端
    它具有以下特征:

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

    axios的基本用法

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

    实例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>接口调用axios</title>
    </head>
    <body>
        <script src="axios-master/dist/axios.js"></script>
        <script>
            axios.get('http://localhost:3000/adata').then(function(ret){ // 形参 ret接收后台的所有数据 ,ret是一个对象
                console.log(ret.data);
                // 注意:data属性是固定的用法,用于获取后台的实际数据
                console.log(ret);
                
            })
        </script>
    </body>
    </html>
    

    在这里插入图片描述

    axios的常用API

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

    axios的参数传递

    GET传递参数
    1. 通过url传递参数
      • 传统的URL (路由中使用 query 进行请求)
      • Restful的URL (路由中使用 params 进行请求)
    2. 通过params选项传递参数 (使用的是传统URL的路由)

    通过url传递参数

    • 传统的url形式
    axios.get('/adata?id=123').then(ret => {
        console.log(ret.data);
    })
    

    实例:

    <!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="axios-master/dist/axios.js"></script>
        <script>
            // 传统的url方式
            axios.get('http://localhost:3000/axios?id=123').then(function (ret) {
                    console.log(ret.data);
            });
        </script>
    </body>
    </html>
    
    • Restful形式的URL
    axios.get('/adata/123').then(ret => {
        console.log(ret.data);
    })
    

    实例:

    <!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="axios-master/dist/axios.js"></script>
        <script>
            // 通过get传参
            // 方式1. 传统的url方式
            // axios.get('http://localhost:3000/axios?id=123').then(function (ret) {
            //         console.log(ret.data);
            // });
            // 方式2. Restful方式
            axios.get('http://localhost:3000/axios/456').then(function (ret) {
                    console.log(ret.data);
            });
    
        </script>
    </body>
    </html>
    

    在这里插入图片描述

    通过params选项传递参数

    axios.get('/adata',{
        // 传参
        params:{
            id:789
        }
    }).then(ret => {
        console.log(ret.data);
    })
    

    实例:

    <!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="axios-master/dist/axios.js"></script>
        <script>
            // 通过URL传参
            // 方式1. 传统的url方式
            // axios.get('http://localhost:3000/axios?id=123').then(function (ret) {
            //         console.log(ret.data);
            // });
            // 方式2. Restful方式
            // axios.get('http://localhost:3000/axios/456').then(function (ret) {
            //         console.log(ret.data);
            // });
    
            // 通过params传参 - 使用的是传统URL的路由
            axios.get('http://localhost:3000/axios',{
                // 传参
                params: {
                    id: 789
                }
            }).then(ret => {
                console.log(ret.data);
            })
        </script>
    </body>
    </html>
    

    在这里插入图片描述

    DELETE传递参数

    通过url传递参数 (注意:在后端使用Restful获取数据的时候,路由中获取的数据的不是query,而是params)

    通过params选项传递参数

    • 传统的url形式
    axios.delete('/adata?id=123').then(ret => {
        console.log(ret.data);
    })
    

    实例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>DELETE传参</title>
    </head>
    <body>
        <script src="axios-master/dist/axios.js"></script>
        <script>
            // 传统URL
            axios.delete('http://localhost:3000/axios?id=222')
                .then(function(ret){
                    console.log(ret.data);
            });
    
            
    
        </script>
    </body>
    </html>
    

    路由:

    // delete 传统的URL
    app.delete('/axios',(req,res) => {
        res.send('axios delete (传统URL) 传递参数' + req.query.id);
    })   
    
    

    在这里插入图片描述

    • Restful形式的URL

      在后端使用Restful获取数据的时候,路由中获取的数据的不是query,而是params

    axios.delete('/adata/123').then(ret => {
        console.log(ret.data);
    })
    

    实例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>DELETE传参</title>
    </head>
    <body>
        <script src="axios-master/dist/axios.js"></script>
        <script>
            
            // Restful的URL
            axios.delete('http://localhost:3000/axios/333')
                .then(function(ret){
                    console.log(ret.data);
            });
    
        </script>
    </body>
    </html>
    

    路由:

    // delete Restful的URL
    app.delete('/axios/:id',(req,res) => {
        res.send('axios delete (Restful)' + req.params.id);
    }) 
    

    在这里插入图片描述

    • params方式
    axios.delete('/adata',{
        params:{
            id:111
        }
    }).then(ret => {
        console.log(ret.data);
    })
    

    实例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>DELETE传参</title>
    </head>
    <body>
        <script src="axios-master/dist/axios.js"></script>
        <script>
            // params传参
            axios.delete('http://localhost:3000/axios',{
                // 传参
                params: {
                    id: 111
                }
            }).then(ret => {
                console.log(ret.data);
            })
    
        </script>
    </body>
    </html>
    

    路由:

    // delete 传统的URL
    app.delete('/axios',(req,res) => {
        res.send('axios delete (传统URL) 传递参数' + req.query.id);
    })   
    

    在这里插入图片描述

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

    实例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>POST传参</title>
    </head>
    <body>
        <script src="axios-master/dist/axios.js"></script>
        <script>
           
            // 通过选项传递参数
            axios.post('http://localhost:3000/axios',{
                // 传参
                uname: 'lisi',
                pwd: 123
            }).then(ret => {
                console.log(ret.data);
            })
        </script>
    </body>
    </html>
    

    路由:

    // POST传参
    app.post('/axios',(req,res) => {
        res.send('axios post 传递参数' + req.body.uname + '----' + req.body.pwd);
    })   
    

    在这里插入图片描述

    在这里插入图片描述

    通过URLSearchParams传递参数(application/x-www-form-urlencoded)
    const params = new URLSearchParams();
    params.append('params1','value1');
    params.append('params2','value2');
    axios.post('/adata',params}).then(ret => {
        console.log(ret.data);
    })
    

    实例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>POST传参</title>
    </head>
    <body>
        <script src="axios-master/dist/axios.js"></script>
        <script>
           
            // 通过URLSearchParams传递参数
            // URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。
            // 我们调用new URLSearchParams()会返回一个 URLSearchParams 对象实例
            var params = new URLSearchParams();
            params.append('uname','zhangsan');
            params.append('pwd','222');
            axios.post('http://localhost:3000/axios',params).then(function(ret){
                console.log(ret.data)
            })
        </script>
    </body>
    </html>
    

    路由:

    // POST传参
    app.post('/axios',(req,res) => {
        res.send('axios post 传递参数' + req.body.uname + '----' + req.body.pwd);
    })   
    

    在这里插入图片描述

    在这里插入图片描述

    POST的选项参数传值的情况

    1- 在URL中加id

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>POST传参</title>
    </head>
    <body>
        <script src="axios-master/dist/axios.js"></script>
        <script>
           
            // 通过选项传递参数
            axios.post('http://localhost:3000/axios/111111',{
                // 传参
                uname: 'lisi',
                pwd:123
            }).then(ret => {
                console.log(ret.data);
            })
        </script>
    </body>
    </html>
    

    路由:

    app.post('/axios/:id',(req,res) => {
        res.send('axios post----req.params.id----传递参数' + req.params.id + '----' + req.body.uname + '----' + req.body.pwd);
    })  
    

    在这里插入图片描述

    2- 在选项参数中加id

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>POST传参</title>
    </head>
    <body>
        <script src="axios-master/dist/axios.js"></script>
        <script>
    
            axios.post('http://localhost:3000/axios',{
                // 传参
                id: '222222',
                uname: 'lisi',
                pwd:123
            }).then(ret => {
                console.log(ret.data);
            })
        </script>
    </body>
    </html>
    

    路由:

    app.post('/axios',(req,res) => {
        res.send('axios post 【req.body.id】 传递参数' + req.body.id + '----' + req.body.uname + '----' + req.body.pwd);
    })  
    

    在这里插入图片描述

    总结:

    对于 POST选项参数 和 URLSearchParams 的方式:

    使用 req.params.id的方式获取url中的信息

    使用req.body.id的方式获取 POST选项参数 和 URLSearchParams 中的信息

    POST的URLSearchParams传递参数的情况

    1- 获取url中传递的参数

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>POST传参</title>
    </head>
    <body>
        <script src="axios-master/dist/axios.js"></script>
        <script>
           
            // 通过URLSearchParams传递参数
            // URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。
            // 我们调用new URLSearchParams()会返回一个 URLSearchParams 对象实例
            var params = new URLSearchParams();
            params.append('uname','zhangsan');
            params.append('pwd','123');
            
            axios.post('http://localhost:3000/axios/3333333',params).then(function(ret){
                console.log(ret.data)
            })
        </script>
    </body>
    </html>
    

    路由:

    app.post('/axios/:id',(req,res) => {
        res.send('axios post----req.params.id----传递参数' + req.params.id + '----' + req.body.uname + '----' + req.body.pwd);
    })   
    

    在这里插入图片描述

    2 - 在URLSearchParams传递参数

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>POST传参</title>
    </head>
    <body>
        <script src="axios-master/dist/axios.js"></script>
        <script>
           
            // 通过URLSearchParams传递参数
            // URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。
            // 我们调用new URLSearchParams()会返回一个 URLSearchParams 对象实例
            // var params = new URLSearchParams();
            // params.append('uname','zhangsan');
            // params.append('pwd','123');
            // axios.post('http://localhost:3000/axios/333333',params).then(function(ret){
            //     console.log(ret.data)
            // })
    
            var params = new URLSearchParams();
            params.append('uname','zhangsan');
            params.append('pwd','123');
            params.append('id','444444');
            axios.post('http://localhost:3000/axios',params).then(function(ret){
                console.log(ret.data)
            })
        </script>
    </body>
    </html>
    
    app.post('/axios',(req,res) => {
        res.send('axios post 【req.body.id】 传递参数' + req.body.id + '----' + req.body.uname + '----' + req.body.pwd);
    })   
    

    在这里插入图片描述

    总结:

    PUT传递参数

    参数传递方式与POST类似

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

    实例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>PUT传参</title>
    </head>
    <body>
        <script src="axios-master/dist/axios.js"></script>
        <script>
           
            axios.put('http://localhost:3000/axios/123',{
                // 传参
                uname: 'lisi',
                pwd: 123
            }).then(ret => {
                console.log(ret.data);
            })
        </script>
    </body>
    </html>
    

    在这里插入图片描述

    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>axios的响应结果</title>
    </head>
    <body>
        <script src="axios-master/dist/axios.js"></script>
        <script>
           /* axios 响应结果与全局配置 */
           axios.get('http://localhost:3000/axios-json').then(function(ret){
               console.log(ret);
               console.log(ret.data);
               console.log(ret.data.uname);
           })
        </script>
    </body>
    </html>
    

    路由:

    // axios响应结果与全局配置
    app.get('/axios-json',(req,res) => {
        res.json({
            uname: 'lisi',
            age: 12
        })
    })
    

    在这里插入图片描述

    axios的全局配置

    • axios.default.timeout = 3000;//超时时间
    • axios.default.baseURL = ‘http://localhost:3000/app’;//默认地址
    • axios.default.headers[‘mytoken’] = ‘asddwefwefwefewfefwefwe’;//设置请求头

    axios拦截器

    请求拦截器

    在请求发出之前设置一些信息
    在这里插入图片描述

    //添加一个请求拦截器
    axios.interceptors.request.use(function(config){
        //在请求发出之前进行一些信息设置
        return config;
    },function(err){
        //处理响应的错误信息
        console.log(err);
    })
    

    实例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>请求拦截器</title>
    </head>
    <body>
        <script src="axios-master/dist/axios.js"></script>
        <script type="text/javascript">
           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>
    

    路由:

    // 设置允许跨域访问该服务
    app.all("*", function (req, res, next) {
        res.header('Access-Control-Allow-Headers', 'mytoken');
        next();
    });
    // axios响应结果与全局配置
    app.get('/axios-json',(req,res) => {
        res.json({
            uname: 'lisi',
            age: 12
        })
    })
    
    

    在这里插入图片描述

    在这里插入图片描述

    响应拦截器

    在获取数据之前对数据做一些加工处理
    在这里插入图片描述

    //添加一个响应拦截器
    axios.interceptors.response.use(function(res){
        //在这里对返回的数据进行处理
        return res;
    },function(err){
        //处理响应的错误信息
        console.log(err);
    })
    

    实例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>响应拦截器</title>
    </head>
    <body>
        <script src="axios-master/dist/axios.js"></script>
        <script type="text/javascript">
        // 请求拦截器
        //    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)
        //    })
    
        // 响应拦截器
           axios.interceptors.response.use(function(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>
    

    路由:

    // 设置允许跨域访问该服务
    app.all("*", function (req, res, next) {
        res.header('Access-Control-Allow-Headers', 'mytoken');
        next();
    });
    // axios响应结果与全局配置
    app.get('/axios-json',(req,res) => {
        res.json({
            uname: 'lisi',
            age: 12
        })
    })
    

    在这里插入图片描述

    接口调用-async/await用法

    async/await的基本用法

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

    async function queryData(id){
        // await后面要加Promise实例对象 ,在Promise中可以处理异步任务 
        const ret = await axios.get('/data');
        return ret;
    }
    queryData.then(ret => {
        onsole.log(ret);
    })
    

    实例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>接口调用</title>
    </head>
    <body>
        <script src="axios-master/dist/axios.js"></script>
        <script type="text/javascript">
        // 原来的方式进行接口调用
        /* axios.defaults.baseURL = 'http:localhost:3000';
        axios.get('adata').then(function(ret){
            console.log(ret.data);
        }) */
    
        // async/await调用接口
        // await后面要加Promise实例对象 ,在Promise中可以处理异步任务
    
        // 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);
        // })
    
        axios.defaults.baseURL = 'http:localhost:3000';
        async function queryData() {
            // await后面要加Promise实例对象 ,在Promise中可以处理异步任务
            var ret = await new Promise(function(resolve,reject){
                setTimeout(() => {
                    // 返回数据 nihao 
                    resolve('nihao')
                }, 1000);
            })
            return ret;
        }
        queryData().then(function(data){
            console.log(data);
        })
    
    
    
        </script>
    </body>
    </html>
    

    在这里插入图片描述

    async/await处理多个异步请求

    多个异步请求的场景

    async function queryData(id){
        const info = await axios.get('/async1');
        const ret = await axios.get('async2?info='+info.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>async/await处理多个异步请求</title>
    </head>
    <body>
        <script src="axios-master/dist/axios.js"></script>
        <script type="text/javascript">
            axios.defaults.baseURL = 'http://localhost:3000';
    
            async function queryData(){
                // 使用await决定执行的顺序
                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>
    
    

    路由:

    // async/await处理多个异步请求 的 路由
    app.get('/async1', (req, res) => {
        res.send('hello')
    })
    
    app.get('/async2', (req, res) => {
        if(req.query.info == 'hello') {
            res.send('world');
        }else{
            res.send('error');
        }
    })
    

    在这里插入图片描述

    展开全文
  • 提交更改 × {{item.deptName}} 关闭 增加信息 3、js操作部分 四、前后端分离跨域问题 方案:全局配置的方式 package com.wn.rbac.config; import org.springframework.context.annotation.Configuration; import ...
  • 三、vue前后端交互(轻松入门vue)

    万次阅读 多人点赞 2020-06-12 16:26:51
    Vue前后端交互六、Vue前后端交互1. 前后端交互模式2. Promise的相关概念和用法Promise基本用法**then参数中的函数返回值**基于Promise处理多个Ajax请求demoPromise常用API3. fetch进行接口调用fetch基本用法fetch...
  • 基本用法:axios.get('/adata') .then(ret=>{ data属性名固定的,用于获取后台响应的数据 console.log(ret.data) ) 可以通过params直接传参get方法,比较方便,也可以用delete ...用p...
  • Idea+springboot+vue 前后端交互实现

    千次阅读 2022-06-21 19:29:37
    Idea+springboot+vue 前后端交互实现
  • Vue 前后端交互 (Fetch)

    2021-02-04 21:23:48
    Fetch Fetch API是新的ajax解决方案 Fetch会返回Promise fetch不是ajax的进一步封装,而是原生js,没有使用XMLHttpRequest对象。 fetch(url, options).then(), 第一个参数请求的路径 Fetch会返回Promise ,使用...
  • Springboot+Vue前后端交互---axios

    千次阅读 2020-06-14 21:15:35
    预备知识 (1)在类前使用@RestController注解则函数return将为json数据,因为vue全权负责前端,因此springboot的controller类通常均需要添加此注解,且其实际为@ResponseBody与@Controller的简写形式 (2)@...
  • vue前后端交互方式

    千次阅读 2020-02-28 10:06:00
    2、前后端交互方式 3、Promise使用 异步 JavaScript的执行环境是「单线程」 所谓单线程,是指JS引擎中负责解释和执行JavaScript代码的线程只有一个,也就是一次只能完成一项任务,这个任务执行完后才能执行下...
  • 前言 目录 前言 一、Vue前后端交互——Promise 1.1 Promise概述 1.2 Promise基本使用 1.3 基于Promise发送Ajax请求 1.4 Promise常用API 1.4.1 实例方法 1.4.2 对象方法 二、Vue前后端交互——fetch 2.1 fetch概述 ...
  • 继续上面两篇博客(后台需添加了跨域配置),后台接口已经写好,前端vue使用element-plus,axios实现数据交互 后台跨域配置,新建一个文件CorsConfiguration: import org.springframework.context....
  • Vue前后端交互(vue2)

    2022-01-01 21:22:26
    Vue前后端交互 环境: 前端:Vscode开发 后端:IDEA开发 1.(Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求) 安装axios 执行:npm install axios
  • 一、学习 vue 面临的问题 最近想学一门前端技术防身,看到博客园中写 vue 的多,那就 vue 吧。都说 vue 的官方教程写得好,所以我就从官方教程开始学习。官方教程说“Vue (读音 /vjuː/,类似于 view) 是一套用于...
  • Django与Vue前后端交互

    千次阅读 2021-12-11 20:29:52
    目录需求使用技术重难点 需求 使用技术 前后端不分离 重难点 xxx xxx
  • 今天小编就为大家分享一篇vuejs前后端数据交互之从后端请求数据的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 接口调用方式 原生ajax 基于jQuery的ajax fetch axios 异步 JavaScript的执行环境是「单线程」 所谓单线程,是指JS引擎中负责解释和执行JavaScript代码的线程只有一个,也就是一次只能完成一项任务,这个任务执行...
  • 文章目录 路由 概念基知介绍 前后端路由的区别 Vue Router 基本使用步骤 路由重定向 路由嵌套 页面效果 动态路由匹配 路由组件传递参数 情况一 情况二 情况三 命名路由 编程式导航 页面导航的两种方式 保持热爱,...
  • Vue项目前后端交互

    2021-08-27 20:56:31
    111
  • spring boot与VUE前后端交互

    万次阅读 多人点赞 2020-08-11 15:53:43
    默认认为会了简单的spring boot知识和vue知识 1、前端 先安装好vue cli,没有的点这里 2、后端 后端IDEA安装vue.js插件就OK了 二、创建前端VUE项目 就进入CMD,挑个好路径,输入vue ui 然后打开IDEA,导入文件就...
  • 接口调用方式 原生ajax 基于jQuery的ajax fetch axios 异步 JavaScript的执行环境是「单线程」 所谓单线程,是指JS引擎中负责解释和执行JavaScript代码的线程只有一个,也就是一次只能完成一项任务,这个任务执行...
  • SpringBoot+Vue前后端分离及交互

    千次阅读 多人点赞 2020-12-07 15:45:10
    什么是前后端分离? 将一个应用的前后端代码分开写 为什么要前后端分离? 在传统的Javaweb开发中,往往是前端人员写好html后,再由后端人员将java整合其中,变成JSP。 如此一来就造成了沟通不便、降低效率、前后端...
  • 进入前端vue项目,进入内部或外部终端 输入如下代码并安装 cnpm install axios --save cnpm install qs --save 安装好之后可以在package.json中看到添加的依赖 在main.js中引入添加的依赖(main,js中存储...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 18,299
精华内容 7,319
关键字:

vue前后端交互