前端调用api接口方法总结

前端调⽤api接⼝⽅法总结
我⽤得最多的⼤概就是jquery中的ajax了吧，就从ajax总结起⾛：
⼀、ajax：
参数解释：(主要就⽤到url、type、data、dataType、success、error等，其他的看需求⽽定)
$.ajax({
url:" ", //请求的地址，类型为string
type:" ", //请求⽅式，两种“get”或者“post”，默认为“get”
timeout: //要求为Number类型的参数，设置请求超时时间（毫秒）。

此设置将覆盖$.ajaxSetup()⽅法的全局设置。

async: //要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。

data: //要求为Object或String类型的参数，发送到服务器的数据。

dataType: //服务器返回的数据类型。

beforeSend: //要求为Function类型的参数，发送请求前可以修改
complete: //要求为Function类型的参数，请求完成后调⽤的回调函数（请求成功或失败时均调⽤）。

success: // 请求成功后调⽤的回调函数
error: //要求为Function类型的参数，请求失败时被调⽤的函数。

该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)
contentType: //要求为String类型的参数，当发送信息⾄服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。

该默认值适合⼤多数应⽤场合。

})
常⽤可选参数：
type
类型：String
默认值: "GET")。

请求⽅式 ("POST" 或 "GET")，默认为 "GET"。

注意：其它 HTTP 请求⽅法，如 PUT 和 DELETE 也可以使⽤，但仅部分浏览器⽀持。

url
类型：String
默认值: 当前页地址。

发送请求的地址。

contentType
类型：String
默认值: "application/x-www-form-urlencoded"。

发送信息⾄服务器时内容编码类型。

默认值适合⼤多数情况。

常⽤值参考
【
application/x-www-form-urlencoded：数据被编码为名称/值对。

这是标准的编码格式
application/json：消息主体是序列化后的 JSON 字符串
multipart/form-data：需要在表单中进⾏⽂件上传时，就需要使⽤该格式。

常见的媒体格式是上传⽂件之时使⽤的
text/plain：数据以纯⽂本形式(text/json/xml/html)进⾏编码，其中不含任何控件或格式字符。

】
async
类型：Boolean
默认值: true。

默认设置下，所有请求均为异步请求。

如果需要发送同步请求，请将此选项设置为 false。

注意，同步请求将锁住浏览器，⽤户其它操作必须等待请求完成才可以执⾏。

context
类型：Object
这个对象⽤于设置 Ajax 相关回调函数的上下⽂。

也就是说，让回调函数内 this 指向这个对象（如果不设定这个参数，那么 this 就指向调⽤本次 AJAX 请求时传递的 options 参数）。

⽐如指定⼀个 DOM 元素作为 context 参数，这样就设置了 success 回调函数的上下⽂为这个DOM 元素。

data
类型：String
发送到服务器的数据。

将⾃动转换为请求字符串格式。

GET 请求中将附加在 URL 后。

查看 processData 选项说明以禁⽌此⾃动转换。

必须为 Key/Value 格式。

如果为数组，jQuery 将⾃动为不同值对应同⼀个名称。

如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'
dataType
类型：String
预期服务器返回的数据类型。

如果不指定，jQuery 将⾃动根据 HTTP 包 MIME 信息来智能判断，⽐如 XML MIME 类型就被识别为 XML。

在1.4 中，JSON 就会⽣成⼀个 JavaScript 对象，⽽ script 则会执⾏这个脚本。

随后服务器端返回的数据会根据这个值解析后，传递给回调函数。

可⽤值:
"xml": 返回 XML ⽂档，可⽤ jQuery 处理。

"html": 返回纯⽂本 HTML 信息；包含的 script 标签会在插⼊ dom 时执⾏。

"script": 返回纯⽂本 JavaScript 代码。

不会⾃动缓存结果。

除⾮设置了 "cache" 参数。

注意：在远程请求时(不在同⼀个域下)，所有POST 请求都将转为 GET 请求。

（因为将使⽤ DOM 的 script标签来加载）
"json": 返回 JSON 数据。

"jsonp": JSONP 格式。

使⽤ JSONP 形式调⽤函数时，如 "myurl?callback=?" jQuery 将⾃动替换 ? 为正确的函数名，以执⾏回调函数。

"text": 返回纯⽂本字符串
jsonp
类型：String
在⼀个 jsonp 请求中重写回调函数的名字。

这个值⽤来替代在 "callback=?" 这种 GET 或 POST 请求中 URL 参数⾥的 "callback" 部分，⽐如 {jsonp:'onJsonPLoad'} 会导致将 "onJsonPLoad=?" 传给服务器。

⼆、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 攻击
安装：
使⽤ npm：$ npm install axios
使⽤ bower：$ bower install axios
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(()=>{}))
与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"); }
}
}。