前端调用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和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\"); } }}