zoukankan      html  css  js  c++  java
  • 前端调用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");
        }
      }
    
    }
  • 相关阅读:
    经典算法以及案例总结
    supervisor的介绍
    快速排序算法
    mysql 省市联动sql 语句
    前段验证框架 formValidator
    css 之!important
    js 倒计时
    js 设置url 参数值
    java 获取指定日期
    js 日期控件laydate使用
  • 原文地址:https://www.cnblogs.com/zyl96/p/10254421.html
Copyright © 2011-2022 走看看