前端调用api接口方法总结
我用得最多的大概就是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和axios
1.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/8916098.html
与axios一起用的qs，用qs库对数据进行编码，有单独笔记。
三、websocket
vue中使用的小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");
}
}
}
