四:Vue前后端交互

最新推荐文章于 2024-01-25 14:13:49 发布
最新推荐文章于 2024-01-25 14:13:49 发布
阅读量234 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hhytyq/article/details/104733983
版权

一：概述

1接口调用方式

原生ajax
基于jQuery的ajax
fetch
axios

2：传统形式的URL

格式:schema://lost:port/path?query#fragment
1):schema:协议。例如http,https,ftp等
2);host:域名或者IP地址
3):port:端口，http默认端口80,可以省略
4):path:路径。例如/abc/a/b/b/c
5):query:查询参数，例如uname=lisi&age=12
6):fragment:瞄点(哈希Hash),用于定位某个位置。

3：URL地址格式—Restful形式的URL

HTTP请求方式
1):GET 查询
2):POST  添加
3):PUT 修改
4):DELETE 删除

符合规则的URL地址

1):http://www.hello.com/books GET
2):http://www.hello.com/books POST
3):http://www.hello.com/books/123 put
4):http://www.hello.com/books/123 DELETE

二：Promise用法

异步调用

异步效果分析

1:定时任务
2:AJAX
3:事件函数

多次异步调用的依赖分析：

1:多次异步调用的结果顺序不确定。
2:异步调用结果如果存在依赖需要嵌套。

Promise概述

Promise是异步编程的一种解决方案，从语法上讲，Promise是一个对象，从它可以获取异步操作的消息。
使用Promise主要有以下好处:

可以避免多次嵌套问题(回调地狱)
Promise对象提供了简洁的API，使得控制异步操作更加容易

Promise概述

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

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">
    <title>Title</title>
</head>
<body>
<div>前后端交互</div>
<script type="text/javascript">
    /*
        前后端交互-异步编程与Promise概述。
    */
    var p= new Promise(function (resolve,reject) {
        //这里用于实现异步任务。
        setTimeout(function () {
            var flag=true;
            if(flag){
                //正常情况
                resolve('hello');
            }else{
                //异常情况
                reject('出错了');
            }
        },100);
    });
    p.then(function (data) {
        console.log(data);
    },function (info) {
        console.log(info)
    })
</script>
</body>
</html>

基于Promise处理Ajax请求

1.处理原生Ajax

function queryData(){
	return new Promise(function(resolve,reject){
		var xhr=new XMLHttpRequest();
		xhr.onreadystatechange=function(){
			if xhr.readyState!=4) return ;
			if(xhr .status ==200){
				resolve(xhr.responseText)
				}else{
					reject('出错了’）；
				}
			}
			xhr.open('get','/data');
			xhr.send(null);
			}}
			}

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

Promise常用的API

1:实例方法

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

queryData()
.then(function(data){
	console.log(data);
})
.catch(function(data){
	console.log(data);
})
.finally(function(){
	console.log('finished');
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>前后端交互</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
    function foo() {
        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('finished');
        });*/
    foo()
        .then(function (data) {
            console.log(data);
        },function (data) {
            console.log(data);
        })
        .finally(function () {
            console.log('finished');
        })
</script>
</body>
</html>

6:Promise常用的的API
对象方法

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">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<script type="text/javascript">
    function queryData(url) {
        return 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);
        console.log('sss');
    });
</script>
</body>
</html>

接口调用-fetch用法

基本特性：
更加简单的数据获取方式，功能更强大,更灵活，可以看做是xhr的升级版。
基于Promise实现

语法结构
fetch(url).then(fn2)
			.then(fn3)
			...
			.catch(fn)

基本用法：
fetch('/abc').then(data=>{
	return data.text();
}).then(ret=>{
	//注意这里得到的才是最终的数据。
	console.log(ret);
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    /*
        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请求参数

1.fetch请求参数
method(String):HTTP请求方式，默认为GET(GET,POST,PUT,DELETE)
body(String):HTTP的请求参数
headers(Object):HTTP的请求头，默认为{}

```cpp
fetch('/abc',{
	method:'get'
}).then(data =>{
	return data.text();
}).then(ret=>{
	//注意这里得到的才是最终的数据.
	console.log(ret);
	});

GET请求方式的参数传递
fetch('/abc?id=123').then(data=>{
	return data.text();
}).then(ret=>{
	//注意这里得到的才是最终的数据。
	console.log(ret)
	})
或者
fetch('/abc/123').then(data=>{
	return data.text();
}).then(ret=>{
	//注意这里得到的才是最终的数据。
	console.log(ret)
	})

fetch('/abc?id=123',{
	method:'delete'
}).then(data=>{
	return data.text();
}).then(ret=>{
	//注意这里得到的才是最终的数据。
	console.log(ret)
	})

POST请求方式的参数传递

fetch('/books',{
	methods:'post',
	body:'uname=list&pwd=123',
	headers:{
		'Content-Type':'application/x-www-form-urlencoded',
	}
}),then(data=>{
	return data.text();
}).then(ret=>{
	console.log(ret);
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    /*
        fetch API 基本用法
    */
/*
   fetch('http://localhost:3000/books',{
        method:'post',
        body:'uname=lisi&pwd=123',
        headers:{
            'Content-Type':'application/x-www-form-urlencoded'
        }
    }).then(function (data) {
        //text()方法属于fetchAPI的一部分，它返回一个Promise实例对象。用于获取后台获取的数据。
        return data.text();
    }).then(function (data) {
        console.log(data);
    })
*/

    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)
    });
</script>
</body>
</html>

PUT请求方式的参数传递

fetch('/books',{
	methods:'put',
	body:JSON.stringify({
	uname:'lisi',
	age:12
	})
	headers:{
		'Content-Type':'application/json',
	}
}),then(data=>{
	return data.text();
}).then(ret=>{
	console.log(ret);
});

fetch响应结果

响应数据格式

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

fetch('/abc' then(data=>{
	//return data.text();
	return data.json();
}).then(ret=>{
	console.log(ret);
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    /*
        fetch API 基本用法
    */
    fetch('http://localhost:3000/json').then(function (data) {
        return data.json()
    }).then(function (data) {
        console.log(data);
    })
</script>
</body>
</html>

2:axios的基本用法

接口调用-axios用法

1.axios的基本特性
axios：是一个基于Promise用于浏览器和node.js的HTTP客户端。
它具有如下特性:

支持浏览器和node.js
支持promise
能拦截请求和响应
能自动转换JSON数据。
```cpp
axios.get('/data')
	.then(ret =>{
		//data属性名称固定的，用来获取后台响应的数据。
		console.log(ret.data)
		}}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript" src="js/axios.js"></script>
<script type="text/javascript">
    axios.get('http://localhost:3000/adata').then(function (ret) {
        //z注意daa属性是固定的用法，用来获取后台的实际数据。
        console.log(ret);
    })
</script>
</body>
</html>

在这里插入图片描述

3:axios的常用API

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

axios的参数传递。
get传递参数

Get传递参数
	通过URL传递参数
	通过params选项传递参数。

方法一:
axios.get('/adata?id=123')
	.then(ret=>{
		console.log(ret.data)
})

方法二:
axios.get('/adata/123')
	.then(ret=>{
		console.log(ret.data)
})

方法3:
axios.get('/adata',{
	params:{
		id:123
	}
})
.then(ret=>{
	console.log(ret.data)
})

2.DELETE传递参数

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

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

axios.delete('/adata',{
	params:{
		id:123
	}
}).then(ret=>{
	console.log(ret.data)
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript" src="js/axios.js"></script>
<script type="text/javascript">

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

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

3.axios的POST传递参数
通过选项传递参数:(默认传递的是json格式的数据)

axios.post('/adata',{
	uname:'tome',
	pwd:123
}).then(ret=>{
	console.log(ret.data)
})

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript" src="js/axios.js"></script>
<script type="text/javascript">
    var params=new URLSearchParams();
    params.append('uname','zhangsan');
    params.append('pwd','123');
    axios.post('http://localhost:3000/axios',params).then(function (ret) {
        console.log(ret.data);
    })
</script>
</body>
</html>

4:PUT传递参数

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript" src="js/axios.js"></script>
<script type="text/javascript">
  axios.put('http://localhost:3000/axios/123',{
      uname:'lisi',
      pwd:123
  }).then(function (ret) {
      console.log(ret.data)
  })
</script>
</body>
</html>

axios的响应结果

1:响应结果的主要属性

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

axios的全局配置

axios.defaults.timeout=3000;//超时时间
axios.defaults.baseURL='http:localhost:3000/app';//默认地址
axios.defaults.headers['mytoken'] = 'aqwerwqwerqer2wrwe23eresdf23'//设置请求头。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript" src="js/axios.js"></script>
<script type="text/javascript">
    /*
        axios的全局配置
    */
    //配置请求的默认的基准URL地址
    axios.defaults.baseURL='http://localhost:3000/';
    //配置请求头信息
    axios.defaults.headers['mytoken']='hello';
    axios.get('axios-json').then(function (ret) {
        console.log(ret);
    })

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

axios拦截器

1:请求拦截器
在请求发出之前设置一些信息。
在这里插入图片描述
代码实现

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript" src="js/axios.js"></script>
<script type="text/javascript">
    /*
        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 (ret) {
        console.log(ret)
    });

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

2:响应拦截器
在获取数据之前对数据做一些加工处理。
在这里插入图片描述

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript" src="js/axios.js"></script>
<script type="text/javascript">
    /*
        axios拦截器
    */
    axios.interceptors.request.use(function (config) {
        console.log(config.url);
        //拦截器配置请求头
        config.headers.mytoken='nihao';
        return config;
    },function (err) {
        console.log(err);
    });
    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 (ret) {
        console.log(ret)
    });

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

接口调用async和await用法

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

async function queryData(id){
	Const ret=await axios.get('/data');
	return ret;
}
queryData.then(ret=>{
	console.log(ret)
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<script type="text/javascript" src="js/axios.js"></script>
<script type="text/javascript">
    /*
      async/await 处理异步操作：
      async函数返回一个Promise实例对象
      await后面可以直接跟一个 Promise实例对象
    */
    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)
        //return ret.data;
    }*/

     async function queryData() {
       var ret = await new Promise(function(resolve, reject){
         setTimeout(function(){
           resolve('nihao')
         },1000);
       })
       // console.log(ret.data)
       return ret;
     }
     queryData().then(function(data){
       console.log(data)
     })
</script>
</body>
</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">
    <title>Document</title>
</head>
<body>

<script type="text/javascript" src="js/axios.js"></script>
<script type="text/javascript">
    /*
        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>
是翼不是一
关注
专栏目录
vue调用后端接口——axios和vue-axios的使用
向宇
07-07 2351
1、axios是基于promise的HTTP库，可以使用在浏览器和node.js中，它不是vue的第三方插件 2、axios使用的时候不能像vue的插件（如：Vue-Router、VueX等）通过Vue.use()安装插件，需要在原型上进行绑定：Vue.prototype.$axios = axios; 3、vue-axios是axios集成到Vue.js的小包装器，可以像插件一样安装:Vue.use(vueAxios);: 使用vue的插件的写法（vue-axios）vue整体的生态环境，直接写原型链会有
Vue调用后端java接口的实例代码
01-19
前段时间 做了个学校的春萌项目，其中用到vue连接后端java接口。 先上后端接口代码： package controller; import net.sf.json.JSONObject; import util.DBUtil; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.se
vue调用接口获取后台数据_vue开发前后端分离前端如何调用后端接口？
weixin_39640085的博客
12-19 1万+
对前后端分离如何调用接口这块感觉一直没怎么弄明白，但又不知如何说明，下面我模拟一个项目说明我的问题。现在我们有个项目，前端用vue开发，后端php开发，后端测试地址为：localhost:8181，项目服务器地址是：www.cocoy.com。在开发阶段模拟数据(userdata.json)是放在static文件夹里，而在后端与userdata.json对应的文件userdata.php是在abc...
vue调用后端接口
热门推荐
qq_53943932的博客
04-08 1万+
1、在config文件下的index.js文件的proxyTable:{ }中写入 '/api': { target: 'http://localhost:8088/',//此处可以换成自己需要的地址 changeOrigin: true, pathRewrite: { '^/api': '/' } } 2、在main.js中写入 Vue.prototype.HOST = "/api" 3
vue项目调用后端接口
m0_73649732的博客
01-16 1881
替换为实际的后端接口地址。如果后端接口需要授权，请确保在请求头中添加适当的授权信息。这是一个简单的示例，实际的调用方式和处理返回值的逻辑会依据具体的项目需求而有所不同。在Vue项目中调用后端接口并获取返回的值，可以使用Vue的内置方法。来发起HTTP请求。注意：在调用后端接口时，要将。
Java8新特性之接口的默认方法和静态方法（四）
JackieBlog
04-15 651
1. 背景介绍 2. 接口的默认方法介绍 3. 接口的静态方法介绍 4. 相关链接
关于vue如何调用后端接口
你只有踏出第一步，下一步才会跟着来，否则你将永远停留在原地。
10-29 3663
前端数据调用接口问题 getSource() { console.log("1111"); var vm = this; vm.$http //这个post里面就是要调用的接口 //下面的字段就是要通过什么数据查询 .post("具体调用的接口", { 接需要的字段名: "字段", }) .then((response) => { console.log("返回的数据", res
vue调用后端接口样例
m0_37570494的博客
02-10 1万+
1、vue调用后端接口，并展示在前端列表中 前端列表中需要的数据为tableData： 此处访问后端接口获取此处的数据 前提构造tableData数据，次数据结构为数组： 从后端获取到数据后，要进行多个数据遍历的话，则使用foreach 进行数据的遍历，及通过push方法传入tableData中 data.forEach(element=>{ this.tableData.push( { ...
Vue调用后台接口方式
qq_44577699的博客
11-28 4753
Vue中调用后台接口的方式
详解vue配置后台接口方式
10-17
主要介绍了vue配置后台接口方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue项目下如何调用后端接口
最新发布
求学如是，不可入宝山而空归。。。
01-25 1186
在Vue前端中，你可以使用axios库来进行HTTP请求。
vue请求后端接口渲染页面,vue前端访问后端接口
wenangou的博客
09-14 1990
你可以引入Vue-resource,使用this.$,this.$发送，当然这同时需要配置跨域请求，举个例子，后台我使用express4.x，默认地址为http://localhost:3000,那么需要在Vue-cli的config目录中，打开文件，在dev下面这样配置axios这样配置同时Vue这样请求express后台这样就能接收到post过来的数据，这是最简单的一种用法OK，前台也拿到了请求的数据。全局使用Axios首先，在自己建的公用方法的文件中new一个新的文件。
Vue前后端交互
淘小欣的博客
04-30 1万+
Vue前后端交互 文章目录Vue前后端交互引入：Vue前后端交互一、基于jQuery的ajax前后端交互模式前端后端二、使用fetch前后端交互fetch基本用法与请求参数fetch基本用法fetch请求参数fetch前后端交互前端后端三、前后端交互之axios前端后端参考资料 引入：Vue前后端交互 一般在项目中结合async/await语法使用axios调用接口 一、基于jQuery的ajax前后端交互模式 前端 <head> <meta charset="UTF-8">
【Vue】Vue全家桶（五）前后端交互+接口调用方法(fetch、axios、async/await)
Better_Xing的博客
05-26 3592
【Vue】Vue全家桶（五）前后端交互+接口调用方法(fetch、axios、async/await)
vue2 解决跨域并且在页面上如何调用后台接口
weixin_46165123的博客
08-07 1295
假设你的Vue.js应用程序运行在http://localhost:8080,而你的后端API运行在http://api.example.com。首先, 在你的Vue项目的根目录下创建vue.config.js文件(如果已经存在, 请忽略此步骤).在上面的配置中, 我们将所有以/api开头的请求代理到目标URL。
Vue与axios实战：前后端数据交互的实现技巧
资源摘要信息:"本文将详细介绍如何使用Vue.js框架和axios库来实现前后端数据交互。Vue.js是一个构建用户界面的渐进式框架，具有响应式、组件化的特点。axios是一个基于Promise的HTTP客户端，用于浏览器和node.js中，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值