zoukankan      html  css  js  c++  java
  • 前端调用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

  • 相关阅读:
    【Azure 应用服务】由 Azure Functions runtime is unreachable 的错误消息推导出 ASYNC(异步)和 SYNC(同步)混用而引起ThreadPool耗尽问题
    【Azure API 管理】是否可以将Swagger 的API定义导入导Azure API Management中
    【Azure 应用服务】Azure Function 不能被触发
    【Azure 环境】Azure Key Vault (密钥保管库)中所保管的Keys, Secrets,Certificates是否可以实现数据粒度的权限控制呢?
    【Azure 事件中心】为应用程序网关(Application Gateway with WAF) 配置诊断日志,发送到事件中心
    【Azure 事件中心】azure-spring-cloud-stream-binder-eventhubs客户端组件问题, 实践消息非顺序可达
    【Azure API 管理】Azure API Management通过请求中的Path来限定其被访问的频率(如1秒一次)
    【Azure 环境】前端Web通过Azure AD获取Token时发生跨域问题(CORS Error)
    【Azure 应用服务】记一次Azure Spring Cloud 的部署错误 (az spring-cloud app deploy -g dev -s testdemo -n demo -p ./hellospring-0.0.1-SNAPSHOT.jar --->>> Failed to wait for deployment instances to be ready)
    【Azure 应用服务】App Service中抓取 Web Job 的 DUMP 办法
  • 原文地址:https://www.cnblogs.com/yizhilin/p/12899635.html
Copyright © 2011-2022 走看看