我⽤得最多的⼤概就是jquery中的ajax了吧,就从ajax总结起⾛:⼀、ajax:
参数解释:(主要就⽤到url、type、data、dataType、success、error等,其他的看需求⽽定)$.ajax({
url:\" \//请求的地址,类型为string
type:\" \//请求⽅式,类型为string,两种“get”或者“post”,默认为“get”
timeout: //要求为Number类型的参数,设置请求超时时间(毫秒)。此设置将覆盖$.ajaxSetup()⽅法的全局设置。
async: //要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为false。注意,同步请求将锁住浏览器,⽤户其他操作必须等待请求完成 cache: //要求为Boolean类型的参数,默认为true(当dataType为script时,默认为false),设置为false将不会从浏览器缓存中加载请求信息。 data: //要求为Object或String类型的参数,发送到服务器的数据。如果已经不是字符串,将⾃动转换为字符串格式。get请求中将附加在url后
dataType: //要求为String类型的参数,预期服务器返回的数据类型。如果不指定,JQuery将⾃动根据http包mime信息返回responseXML或responseText 作为回调函数参数传递。可⽤的类型如下: xml:返回XML⽂档,可⽤JQuery处理。
html:返回纯⽂本HTML信息;包含的script标签会在插⼊DOM时执⾏。
script:返回纯⽂本JavaScript代码。不会⾃动缓存结果。除⾮设置了cache参数。注意在远程请求时(不在同⼀个域下),所有post请求都将转为get请求。 json:返回JSON数据。
jsonp:JSONP格式。使⽤SONP形式调⽤函数时,例如myurl?callback=?,JQuery将⾃动替换后⼀个“?”为正确的函数名,以执⾏回调函数。 text:返回纯⽂本字符串。
beforeSend: //要求为Function类型的参数,发送请求前可以修改XMLHttpRequest对象的函数,例如添加⾃定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。 complete: //要求为Function类型的参数,请求完成后调⽤的回调函数(请求成功或失败时均调⽤)。 success: // 要求为Function类型的参数,请求成功后调⽤的回调函数,有两个参数。
(1)由服务器返回,并根据dataType参数进⾏处理后的数据。 (2)描述状态的字符串。
error: //要求为Function类型的参数,请求失败时被调⽤的函数。该函数有3个参数,即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)
contentType: //要求为String类型的参数,当发送信息⾄服务器时,内容编码类型默认为\"application/x-www-form-urlencoded\"。该默认值适合⼤多数应⽤场合。 .......还有很多,只是基本⽤不到})
⼆、⽤vue时,经常⽤到的。vue-resource和axios1.vue-resource(基本不再使⽤)
优点:体积⼩、⽀持主流的浏览器、⽀持Promise API和URI Templates、⽀持。⽤法:全局引⼊后,则在实例中使⽤。常⽤的:
this.$http.get().then();this.$http.post().then();this.$http.jsonp().then();
2.axios(常⽤)
vue2.0之后,就不再对vue-resource更新,⽽是推荐使⽤axios。基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 Node.js 中使⽤。特点:
(1)在浏览器中发送 XMLHttpRequests 请求(2)在 node.js 中发送 http请求(3)⽀持 Promise API(4)拦截请求和响应(5)转换请求和响应数据(6)取消请求
(7)⾃动转换为JSON数据
(8)客户端⽀持保护安全免受 CSRF/XSRF 攻击使⽤:
下载并引⼊后,在实例中使⽤:GET⽅式:
axios.get().then().catch()
注:get⽅式传参数可以直接跟在url后⾯,也可以通过param对象传
POST⽅式:
axios.post().then().catch()注:post⽅式传参必须⽤对象传
执⾏多个并发请求:
function A(){
return axios.get()}
function B(){
return axios.post()}
axios.all([A,B]).then(axios.spread(()=>{}))
还有⼀些详细配置:https://www.cnblogs.com/peachmeimei/p/16098.html与axios⼀起⽤的qs,⽤qs库对数据进⾏编码,有单独笔记。
三、websocketvue中使⽤的⼩demo:
export default{data(){ return {
webSocket:null }},
created(){
//页⾯刚进⼊时开启长连接 this.initWebSocket();},
destroyed(){
//页⾯销毁时关闭长连接 this.webSocketClose();},
methods: {
initWebSocket(){ //初始化websocket const url='ws://121.40.165.18:8800'; this.webSocket=new WebSocket(url); this.webSocket.onopen=this.socketOpen; this.webSocket.onerror=this.socketError;
this.webSocket.onmessage=this.socketMessage; this.webSocket.onclose=this.webSocketClose; },
socketOpen(){
console.log('socket open'); },
socketError(e){
console.log('socket error'); },
socketMessage(e){
/* const redata = JSON.parse(e.data);*/ //获取数据并且处理数据的地⽅ console.log(e); },
websocketsend(agentData){//数据发送 this.websock.send(agentData); },
webSocketClose(e){
console.log(\"connection closed\"); } }}
因篇幅问题不能全部显示,请点此查看更多更全内容
Copyright © 2019- awee.cn 版权所有 湘ICP备2023022495号-5
违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com
本站由北京市万商天勤律师事务所王兴未律师提供法律服务