本文主要是为了介绍前端交互的相关知识,而严格来说,这也不算是Vue
的专属知识,可是倒是必需要指定的。本文开始简单说了ajax
、jquery
的方式,可是随着SPA
开发模式的大火,相继出现了一些新的交互方式,而咱们应该对这些知识有所了解。此文能够做为后端工程师了解前端交互的入门,对于想要转纯前端的同窗应该也有必定的帮助做用。javascript
有兴趣的朋友能够看看以前的两篇文章:html
ajax
jQuery
的ajax
(主要是基于 dom
的操做)fetch
axios
一、 传统形式的URL前端
格式:schema://host:port/path?query#fragmentjava
http
、https
、ftp
等IP
地址http
默认端口80
,能够省略/abc/a/b/c
uname=lisi&age=12
hash
),用于定位页面的某个位置一个最简单
URL
地址必须包含:协议、域名和端口。端口是能够省略的。node
符合规则的URL
jquery
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形式的URLios
HTTP
请求方式git
符合规则的URL地址github
http://www.test.com/books
GEThttp://www.test.com/books
POSThttp://www.test.com/books/123
PUThttp://www.test.com/books/123
DELETE能够看到,有的地址是同样的, 可是它们的提交方式不一样。web
Promise
是ES6中引入的一种新的语法,专门用来处理异步编程。
能够经过一个简单的方式来查看Promise
的对象状况。以下先定义一个html
文件。
<!DOCTYPE html> <html lang="en"> <head> </head> <body> <script> console.dir(Promise) </script> </body> </html>
在浏览器中打开上面的html
文件,而后F12
来查看,以下图所示。
异步效果分析
屡次异步调用的依赖分析
关于异步依赖须要嵌套,可参考如下代码:
$ajax({ success: function(data){ if(data.status ==200){ $ajax({ success: function(data){ if(data.status ==200){ $ajax({ success: function(data){ if(data.status == 200){ // .... } } }); } } }); } } });
若是须要嵌套18层,那就是地狱了。因此这种写法也叫“回调地狱”。为了解决这个问题,因此引入了
Promise
。
Promise
是异步编程的一种解决方案,从语法上讲,Promise
是一个对象,其实它也是一个函数,从它能够获取异步操做的消息。
使用Promise
主要有如下好处:
Promise
对象提供了简介的 API
,使得控制异步操做更加容易了解更多内容,可到 此处 查看。
实例化Promise
对象,构造函数中传递函数,该函数中用于处理异步任务
resolve
和reject
两个参数用于处理成功和失败两种状况,并经过p.then
获取处理结果
语法以下:
var p = new Promise(function(resolve,reject){ // 成功时调用 resolve() // 失败时调用 reject() }); p.then(function(ret){ // 从resolve获得正常结果 },function(ret){ // 从reject获得错误信息 });
一、处理原生Ajax
function queryData(){ 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','/data'); xhr.send(null); }); return p; } // 调用 queryData('http://localhost:3000/data') .then(function(data){ console.log(data); },function(data){ console.log(data) })
二、发送屡次Ajax请求
queryData() .then(function(data){ return queryData(); }) .then(function(data){ return queryData(); }) .then(function(data){ return queryData(); });
经过多个
then
的方式,悠雅的解决了ajax
的回调地狱问题。
一、返回Promise
实例对象
then
二、返回普通值
then
,经过then
参数中函数的参数接收该值一、实例方法
p.then()
获得异步任务的正确结果p.catch()
获取异常信息p.finally()
成功与否都会执行(尚且不是正式标准,也许你看到本文时已是了)演示代码以下
queryData() .then(function(data){ // 这里处理的是resolve方法 // 若是添加第二个函数,处理的是reject方法 console.log(data); }) .catch(function(data){ // 这里处理的是 reject 方法 // 因此catch 至关于then 的第二个参数,这种说法不可取,可是能够这里理解 console.log(data); }) .finally(function(){ console.log('finished'); });
二、对象方法
Promise.all()
并发处理多个异步任务,全部任务都执行完成才能获得结果Promise.race()
并发处理多个异步任务,只要有一个任务完成就能获得结果大致的语法以下:
Promise.all([p1,p2,p3]).then((result) => { console.log(result) }) Promise.race([p1,p2,p3]).then((result) => { console.log(result) })
一、基本特征
更加简单的数据获取方式,功能更强大、更灵活,能够看作是xhr
(传统的ajax
)的升级版
基于Promise
实现
二、语法结构
fetch(url).then(fn2) .then(fn3) ... .catch(fn)
具体内容能够查看官网API。
fetch('/abc').then(data => { // text() 方法是fetch API的一部分,返回一个Promise对象,用于获取后台返回的数据 return data.text(); }).then(ret => { // 注意这里获得的才是最终的数据 console.log(ret) })
一、经常使用配置选项
HTTP
请求方法,默认为GET
(GET、POST、PUT、DELETE
)HTTP
的请求参数HTTP
的请求头,默认为{}
代码的风格以下:
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',{ method: 'GET' }).then(data => { return data.text(); }).then(ret => { // 注意这里获得的才是最终的数据 console.log(ret); })
三、DELETE请求方法的参数传递
fetch('/abc/123',{ method: 'DELETE' }).then(data => { return data.text(); }).then(ret => { // 注意这里获得的才是最终的数据 console.log(ret); })
四、POST请求方法的参数传递
query
查询字符串fetch('/books',{ method: 'POST', body:'uname=lisi&pwd=123', headers: { 'Context-Type':'application/x-www-form-urlencoded', } }).then(data => { return data.text(); }).then(ret => { // 注意这里获得的才是最终的数据 console.log(ret); })
结果以下图所示
json
格式fetch('/books',{ method: 'POST', body: Json.stringify({ 'uname': 'lisi", 'pwd': '123' }), headers: { 'Context-Type':'application/json', } }).then(data => { return data.text(); }).then(ret => { // 注意这里获得的才是最终的数据 console.log(ret); })
结果以下图所示
五、PUT请求方法的参数传递
// 和post的用法基本同样,这里须要传递修改数据的id fetch('/books/123',{ method: 'POST', body: Json.stringify({ 'uname': 'lisi", 'age': 23 }), headers: { 'Context-Type':'application/json', } }).then(data => { return data.text(); }).then(ret => { // 注意这里获得的才是最终的数据 console.log(ret); })
PUT 和 POST 同样,均可以使用两种方式来处理请求。
响应数据格式
JSON.parse(responseText)
同样fetch('/abc').then(data => { // return data.text(); return data.json(); }).then(ret => { // 注意这里获得的才是最终的数据 console.log(ret); }) // 和下面的效果相同 fetch('/abc').then(data => { return data.text(); }).then(ret => { // 注意这里获得的才是最终的数据 var obj = JSON.parse(ret) console.log(obj); })
axios(官网:https://github.com/axios/axios)是一个基于Promise
用于浏览器和node.js
的HTTP
客户端。
主要有如下特性:
node.js
Promise
(Promise
的语法均可以直接使用)JSON
数据基本形式以下:
axios.get('/adata') .then(ret => { // data属性名称是固定的,用于获取后台相应的数据 console.log(ret.data) })
GET
查询数据POST
添加数据PUT
修改数据DELETE
删除数据一、GET传递参数
URL
传递参数// 传统传参 axios.get('/adata?id=123') .then(ret => { console.log(ret.data) }) // Restful形式传承 axios.get('/adata/123') .then(ret => { console.log(ret.data) })
params
选项传递参数// params 参数是axios专门提供的 // 比较推荐这种方式 axios.get('/adata',{ params: { id:123 } }).then(ret => { console.log(ret.data) })
二、DELETE传递参数
GET
相似// 传统传参 axios.delete('/adata?id=123') .then(ret => { console.log(ret.data) }) // Restful形式传承 axios.delete('/adata/123') .then(ret => { console.log(ret.data) }) // params 参数传参 axios.delete('/adata',{ params: { id:123 } }).then(ret => { console.log(ret.data) })
三、POST传递参数
默认传递的是json格式的数据
)axios.post('/adata',{ uname:'tom', pwd:123 }).then(ret => { console.log(ret.data) })
URLSearchParams
传递参数(application/x-www-form-urlencoded
)
URLSearchParams
是axios
提供的标准API
const params = new URLSearchParams(); params.append('param1','value1'); params.append('param2','value2'); axios.post('/api/test',params).then(ret => { console.log(ret.data) })
四、PUT传递参数
POST
相似axios.put('/adata/123',{ uname: 'tom', pwd: 123 }).then(ret => { console.log(ret.data) })
响应结果的主要属性
data
:实际响应回来的数据headers
:响应头信息status
:响应状态码statusText
:响应状态信息axios.post('/axios-json').then(ret => { console.log(ret) })
axios.defaults.timeout = 3000;
// 超时时间axios.defaults.baseURL = 'http://localhost:3000/app';
// 默认地址axios.defaults.header['mytoken'] = 'ogerindxq345348usdgq34498tu';
// 设置请求头一、请求拦截器
在请求发出以前设置一些信息,代码以下:
// 添加一个请求拦截器 axios.interceptors.request.use(function (config) { // 在请求发出以前进行一些消息设置 return config; },function(err) { // 处理响应的错误消息 });
二、响应拦截器
在获取数据以前对数据作一些加工处理,代码以下:
// 添加一个响应拦截器 axios.interceptors.response.use(function (res) { // 在这里对返回的数据机进行处理 // res不是实际的数据对象,经过res.data得到实际数据 return res; },function(err) { // 处理响应的错误消息 });
ES7
引入的新语法,能够更加方便的进行异步操做async
函数的返回值是Promise
实例对象)await
能够获得异步的结果)async function queryData(id) { const ret = await axios.get('/data'); return ret; } queryData.then(ret => { console.log(ret) })
经过
async
和await
关键字,可使代码更简洁,由于不须要使用then
函数。另外,async
返回Promise
对象,可使用then
继续处理,如上面的参考代码所示。
多个异步请求的场景
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) })
以上就是关于前端交互的基本知识总结。算是系统学习前端交互知识的一次总结,也是当前SPA
开发所必须的知识,同时还方便之后的再次学习。下一篇将介绍的是路由的相关知识,有兴趣能够看看。