好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

Vue中前端与后端如何实现交互

Promise的基本使用

基本使用

new一个promise，为其传入一个函数作为参数，这个函数中传入两个参数，分别用来执行异步任务成功和失败的回调函数。

function query(){
?? ?var p=new Promise(function(resolve,reject){
?? ??? ?setTimeout(function(){
?? ??? ?var flag=true;
?? ??? ?if(flag){
?? ??? ??? ?resolve('对了');
?? ??? ?}
?? ??? ?else{
?? ??? ??? ?reject('错了');
?? ??? ?}
?? ??? ?},1000)
?? ?});
?? ?return p;
}
query().then(function(data){ ? //第一个函数接收成功的值
?? ?console.log(data);
},function(data){ ? ? ? ? ? ? //第二个函数接收失败的值
?? ?console.log(data);
});
输出结果：‘对了'

多个请求，链式编程

当我们发送多个请求时，传统的ajax会出现多层嵌套的回调地狱，Promise为我们提供了链式编程。

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;
? ? }
? ? // 发送多个ajax请求并且保证执行顺序
? ? queryData('http://localhost:3000/data')
? ? ? .then(function(data){
? ? ? ? console.log(data)
? ? ? ?//想要链式编程下去，必须return
? ? ? ? return queryData('http://localhost:3000/data1');
? ? ? })
? ? ? .then(function(data){
? ? ? ? console.log(data);
? ? ? ? return queryData('http://localhost:3000/data2');
? ? ? })
? ? ? .then(function(data){
? ? ? ? console.log(data)
? ? ? });

Promise的API—实例方法

.then() ： 传入两个参数时，只执行成功的。传入一个参数时，那个参数执行的是成功的回调。 得到成功的结果 .catch() ：传入两个参数时，只执行错误的。传入一个参数时，那个参数执行的是失败的回调。 得到异常的结果 .finally() 不是正式标准 无论成功与否都会执行 

<script type="text/javascript">
? ? /*
? ? ? Promise常用API-实例方法
? ? */
? ? // console.dir(Promise);
? ? 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>

Promise的API—对象方法（直接通过Promise函数名称调用的方法）

（1）Promise.all()并发处理多个异步任务，所有任务都执行完成才能得到结果。

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

（2）Promise.race()并发处理多个异步任务，只要有一个任务完成就能得到结果。

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

? <script type="text/javascript">
? ? /*
? ? ? Promise常用API-对象方法
? ? */
? ? // console.dir(Promise)
? ? 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){
? ? ? ?//请求时间和发送顺序有关，先发送先返回。
? ? ? ?// ? all 中的参数 ?[p1,p2,p3] ? 和 返回的结果一 一对应["HELLO TOM", "HELLO JERRY", "HELLO SPIKE"]
? ? ? ?console.log(result) //["HELLO TOM", "HELLO JERRY", "HELLO SPIKE"]
? ? ?})
? ? Promise.race([p1,p2,p3]).then(function(result){
? ? ? // 由于p1执行较快，Promise的then()将获得结果'P1'。p2,p3仍在继续执行，但执行结果将被丢弃。
? ? ? console.log(result) // "HELLO TOM"
? ? })
? </script>

接口调用-fetch用法

基本使用

更加简单的数据获取方式，高性能更强大、更灵活，可以看做是xhr的升级版 给Promise实现 Fetch API是新的ajax解决方案 Fetch会返回Promise fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。 

fetch(url, options).then(）
?<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(); ? //text()是fetch的一个api，返回的是一个Promise的对象
? ?}).then(function(data){
? ? ?// ? 在这个then里面我们能拿到最终的数据 ?
? ? ?console.log(data);
? ?})
?</script>

常用配置选项

fetch(url, options).then(） HTTP协议，它给我们提供了很多的方法，如POST，GET，DELETE，UPDATE，PATCH和PUT 默认的是 GET 请求 需要在 options 对象中 指定对应的 method method:请求使用的方法 post 和 普通 请求的时候 需要在options 中 设置 请求头 headers 和 body

GET请求

传统url请求传参—通过[？]传递参数

前端代码

fetch('http://localhost:3000/books?id=123', {
? ? ? ? ? ? ?? ?# get 请求可以省略不写 默认的是GET?
? ? ? ? ? ? ? ? method: 'get'
? ? ? ? ? ? })
? ? ? ? ? ? .then(function(data) {
? ? ? ? ? ? ?? ?# 它返回一个Promise实例对象，用于获取后台返回的数据
? ? ? ? ? ? ? ? return data.text();
? ? ? ? ? ? }).then(function(data) {
? ? ? ? ? ? ?? ?# 在这个then里面我们能拿到最终的数据 ?
? ? ? ? ? ? ? ? console.log(data)
? ? ? ? ? ? });

后端代码

app.get('/books'(req.res)=>{
?? ?res.send("传统url传递参数"+req.query.id);
})

restful形式url传递参数—通过[/]传递参数

前端代码

fetch('http://localhost:3000/books/456', {
? ? ? ? ? ? ?? ?# get 请求可以省略不写 默认的是GET?
? ? ? ? ? ? ? ? method: 'get'
? ? ? ? ? ? })
? ? ? ? ? ? .then(function(data) {
? ? ? ? ? ? ? ? return data.text();
? ? ? ? ? ? }).then(function(data) {
? ? ? ? ? ? ? ? console.log(data)
? ? ? ? ? ? });

后端代码

app.get('/book/:id',(req.res)=>{
?? ?res.send("restful形式传递参数"+req.params.id);
})

DELETE请求

与GET方式相似，只需把method属性改为[delete]

POST请求方式的参数传递

post传递参数时，option对象中除了method属性，需要额外增加headers和body属性

前端代码

body为查询字符串格式 

var url='http://127.0.0.1:3000/product/books/';
? ? ? fetch(url,{
? ? ? ? method:'post',
? ? ? ? headers:{
? ? ? ? ? 'Content-Type':'application/x-www-form-urlencoded'
? ? ? ? },
? ? ? ? body:'uname=高进宇&pwd=11223344'
? ? ? }).then(data=>{
? ? ? ? return data.text();
? ? ? }).then(data=>{
? ? ? ? console.log(data);
? ? ? })

后端代码

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

body为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)
? ? ? ? ? ? });

后端代码

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

PUT请求方式的参数传递

fetch响应结果

用fetch来获取数据，如果响应正常返回，我们首先看到的是一个response对象，其中包括返回的一堆原始字节，这些字节需要在收到后，需要我们通过调用方法将其转换为相应格式的数据，比如JSON，BLOB或者TEXT等等

text() :将返回体处理成字符串形式 json() ：返回结果和JSON.parse(response.Text)一样 

? ? /*
? ? ? Fetch响应结果的数据格式
? ? */
? ? fetch('http://localhost:3000/json').then(function(data){
? ? ? // return data.json(); ? // ?将获取到的数据使用 json 转换对象
? ? ? return data.text(); // ?// ?将获取到的数据 转换成字符串?
? ? }).then(function(data){
? ? ? // console.log(data.uname)
? ? ? // console.log(typeof data)
? ? ? var obj = JSON.parse(data);
? ? ? console.log(obj.uname,obj.age,obj.gender)
? ? })

接口调用–axios用法

认识

基于promise用于浏览器和node.js的http客户端 支持浏览器和node.js 支持promise 能拦截请求和响应 自动转换JSON数据 能转换请求和响应数据

axios的基础用法

axios的常用API

get() post() delete() put()

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';

GET请求

发送get请求

axios.get('http://localhost:3000/adata').then(function(ret){?
? ? ? # ?拿到 ret 是一个对象 ? ? ?所有的对象都存在 ret 的data 属性里面
? ? ? // 注意data属性是固定的用法，用于获取后台的实际数据
? ? ? console.log(ret.data)
? ? ? console.log(ret)
? ? })

get 请求传递参数

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

axios.get('http://localhost:3000/axios?id=123').then(function(ret){
? ? ? console.log(ret.data)
? ? })

restful 形式传递参数

axios.get('http://localhost:3000/axios/123').then(function(ret){
? ? ? console.log(ret.data)
? ? })

通过params 形式传递参数

前端代码

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

后端代码

router.get('/axios', (req, res) => {
? ? res.send('axios get 传递参数' + req.query.id)
})

DELETE请求传参

传参形式和GET请求一样

POST请求

通过选项传递参数(默认传递的是json格式的数据）

前端代码

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

后端代码

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

通过 URLSearchParams传递参数（application/x-www-form-urlencoded）

var params = new URLSearchParams();
? ? params.append('uname', 'zhangsan');
? ? params.append('pwd', '111');
? ? axios.post('http://localhost:3000/axios', params).then(function(ret){
? ? ? console.log(ret.data)
? ? })

PUT请求

与post请求一样。

axios的响应结果

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

axios拦截器

请求拦截器

请求拦截器的作用是在请求发送前进行一些操作

例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易

axios.interceptors.request.use(function(config) {
? ? ? console.log(config.url)
? ? ? # 1.1 ?任何请求都会经过这一步 ? 在发送请求之前做些什么 ??
? ? ? config.headers.mytoken = 'nihao';
? ? ? # 1.2 ?这里一定要return ? 否则配置不成功 ?
? ? ? return config;
? ? }, function(err){
? ? ? ?#1.3 对请求错误做点什么 ? ?
? ? ? console.log(err)
? ? })

响应拦截器

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

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

?axios.interceptors.response.use(function(res) {
? ? ? #2.1 ?在接收响应做些什么 ?
? ? ? var data = res.data;
? ? ? return data;
? ? }, function(err){
? ? ? #2.2 对响应错误做点什么 ?
? ? ? console.log(err)
? ? })

经过以上响应拦截器处理以后。下面拿到的res就是需要的数据，不需要再进行res.data的操作。

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

async 和 await

async作为一个关键字放到函数前面

任何一个async函数都会隐式返回一个promise

await关键字只能在使用async定义的函数中使用

await后面可以直接跟一个 Promise实例对象 await函数不能单独使用

async/await 让异步代码看起来、表现起来更像同步代码

async/await是ES7引入的新语法，可以更加方便的进行异步操作。

async关键字用于函数上（async函数的返回值是Promise对象）。

await关键字用于async函数当中（await可以直接得到异步的结果）。

async 基础用法

? ? //async作为一个关键字放到函数前面
?? ?async function queryData() {
? ? ? //await关键字只能在使用async定义的函数中使用 ? ? ?await后面可以直接跟一个 Promise实例对象
? ? ? var ret = await new Promise(function(resolve, reject){
? ? ? ? setTimeout(function(){
? ? ? ? ? resolve('nihao')
? ? ? ? },1000);
? ? ? })
? ? ? // console.log(ret.data)
? ? ? return ret;
? ? }
?? ?//任何一个async函数都会隐式返回一个promise ? 我们可以使用then 进行链式编程
? ? queryData().then(function(data){
? ? ? console.log(data)
? ? })

async 函数处理多个异步函数

axios.defaults.baseURL = 'http://localhost:3000';
? ? async function queryData() {
? ? ? // ?添加await之后 当前的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)
? ? })

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

查看更多关于Vue中前端与后端如何实现交互的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did121075
  阅读：31次

上一篇： vue中计算属性和方法的区别及说明

下一篇：vue中引入高德地图并多点标注的实现步骤

相关资讯