首页 > 其他 > 详细

Vue基础——Vue前端交互

时间:2020-09-23 11:54:02      阅读:36      评论:0      收藏:0      [点我收藏+]

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

1、前后端交互模式
1.1、接口调用方式
  原生Ajax
  基于jQuery的Ajax
  fetch
  axios
1.2、URL地址格式
传统形式的URL
  格式:schema://host:port/path?query#fragment
    schema:协议。例如http、https、ftp等
    host:域名或IP地址
    port:端口,http默认端口80,可以省略
    path:路径,例如/abc/a/b/c
    query:查询参数,例如uname=lisi&age=12
    fragment:锚点(哈希Hash),用于定位页面的某个位置
  符合规则的URL:
    http://www.baidu.com
    http://www.baidu.com/java/web
    http://www.baidu.com/java/web?flag=1
    http://www.baidu.com/java/web?flag=1#function
Restful形式的URL
  HTTP请求方式
    GET 查询
    POST 添加
    PUT 修改
    DELETE 删除
  符合规则的URL地址
    http://www.baidu.com/books GET
    http://www.baidu.com/books POST
    http://www.baidu.com/books/123 PUT
    http://www.baidu.com/books/123 DELETE

2、Promise用法
2.1、异步调用
异步调用效果分析
  定时任务
  Ajax
  事件函数
多次异步调用的依赖分析
  多次调用的结果顺序不确定
  异步调用结果如果存在依赖需要嵌套
2.2、Promise概述
Promise是异步编程的一种解决方案,从语法上讲,Promise是一个对象,从它可以获取异步操作的消息。
使用Promise的优点:
  可以避免多层异步调用嵌套问题(回调地狱)
  Promise对象提供了简洁的API,使得控制异步操作更加容易
2.3、Promise基本用法
实例化Promise对象,构造函数中传递函数,该函数中用于处理异步任务
resolve和reject两个参数用于处理成功和失败的两种情况,并通过p.then获取处理结果

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

2.4、基于Promise处理Ajax请求
处理原生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);
    })
}

发送多次Ajax请求

queryData()
.then(function(data){
    return queryData();
})
.then(function(data){
    return queryData();
})
.then(function(data){
    return queryData();
})

2.5、then参数中的函数返回值
返回Promise实例对象
  返回的该实例对象会调用下一个then
返回普通值
  返回的普通值会直接传递给下一个then,通过then参数中函数的参数接收该值
2.6、Promise常用的API
实例方法
  p.then() 得到异步任务的正确结果
  p.catch() 获取异常信息
  p.finally() 成功与否都会执行(尚且不是正式标准)
  语法结构:

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

 

Vue基础——Vue前端交互

原文:https://www.cnblogs.com/michealyang/p/13717008.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!