前端调用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

使用cdn：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

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");
    }
  }

}

转载于：https://www.cnblogs.com/nanyang520/p/11206290.html

　　　　https://www.cnblogs.com/zyl96/p/10254421.html

　　　　https://www.cnblogs.com/yoissee/p/5901677.html