• 调用api接口的方法总结


    JQuery中的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"。该默认值适合大多数应用场合。

      .......还有很多,只是基本用不到

    })

    $.ajax({
             url: "http://www.hzhuti.com",    //请求的url地址
             dataType: "json",   //返回格式为json
             async: true, //请求是否异步,默认为异步,这也是ajax重要特性
             data: {
                     "id": "value"
                    },    //参数值
              type: "GET",   //请求方式
              beforeSend: function() {
                          //请求前的处理
                      },
              success: function(req) {
                          //请求成功时处理,一般只用到这一个
                      },
              complete: function() {
                          //请求完成的处理
                      },
              error: function() {
                          //请求出错处理
                      }
            });

     用vue时,经常用到的。vue-resource和axios

     vue-resource(基本不再使用):

    优点:体积小、支持主流的浏览器、支持Promise API和URI Templates、支持拦截器。

    用法:全局引入后,则在实例中使用。

    常用的:

      this.$http.get().then();

      this.$http.post().then();

      this.$http.jsonp().then();

    axios:axios是基于promise的用于浏览器和nodejs的HTTP客户端,本身有以下特征:

    1. 从浏览器中创建XMLHttpRequest;
    2. 从nodejs发出http请求
    3. 支持promiseAPI
    4. 拦截 请求和响应
    5. 转换请求和响应数据
    6. 取消请求
    7. 自动转换JSON数据
    8. 客户端支持防止CSRF/XSRF攻击

     初始化常用的配置项:

    axios.defaults.baseURL = 'https://www.baidu.com';
    
    axios.interceptors.response.use(result => result.data);
    //=>设置响应拦截器:分别在响应成功和失败的时候做一些拦截处理(在执行成功后设定的方法之前,先会执行拦截器中的方法)
    
    axios.defaults.validateStatus = function validateStatus(status) {
     //=>自定义成功失败规则:RESOLVE / REJECT(默认规则:状态码以2开头算作成功)
          return /^(2|3)d{2}$/.test(status);
    };
    
     //=>设置在POST请求中基于请求主体向服务器发送内容的格式,默认是RAW,项目中常用的是URL-ENCODEED格式
    axios.defaults.headers['Content-Type'] = 'appliction/x-www-form-urlencoded';
    
    axios.defaults.transformRequest = data => {
        //=>DATA:就是请求主体中需要传递给服务器的内容(对象)
        let str = ``;
        for (let attr in data) {
            if (data.hasOwnProperty(attr)) {
                str += `${attr}=${data[attr]}&`;
            }
        }
        return str.substring(0, str.length - 1);
    };

     执行get数据请求:

    axios.get('url',{
      params:{
        id:'接口配置参数(相当于url?id=xxxx)',
      },
    }).then(function(res){
      console.log(res);//处理成功的函数 相当于success
    }).catch(function(error){
      console.log(error)//错误处理 相当于error
    })

     执行post数据请求:

    axios.post('url',{data:xxx},{
      headers:xxxx,
    }).then(function(res){
      console.log(res);//处理成功的函数 相当于success
    }).catch(function(error){
      console.log(error)//错误处理 相当于error
    })

    axios API 通过相关配置传递给axios完成请求:

    axios({
      method:'delete',
      url:'xxx',
      cache:false,
      params:{id:123},
      headers:xxx,
    })
    //------------------------------------------//
    axios({
      method: ’post’,
      url: ’/user/12345’,
      data: {
        firstName: ’Fred’,
        lastName: ’Flintstone’
      }
    });

    axios的并发(axios.all,axios.spread):

    let axiosList=[
       axios.get('url1',{params:xxx,dateType:'JSON'}),
       axios.get('url2',{params:xxx,dateType:'TEXT'}),
    ]
    axios.all(axiosList).then(axios.spread(function(res1,res2){
      console.log(res1,res2)//分别是两个请求的返回值
    })
    axios包含所有请求方式函数的封装:
    axios.get(url [,config])
    axios.delete(url [,config])
    axios.head(url [,config])
    axios.post(url [,data [,config]])
    axios.put(url [,data [,config]])
    axios.patch(url [,data [,config]])
    当使用别名方法时,不需要在config中指定url,method和data属性。
    创建实例:
    var instance = axios.create({//初始化数据
      baseURL: ’https://some-domain.com/api/’,
      timeout: 1000,
      headers: {’X-Custom-Header’: ’foobar’}
    });
  • 相关阅读:
    vue报错:Not Found
    使用Vue DevTools 插件报错的问题:Vue.js is detected on this page. Open DevTools and look for the Vue panel.
    Linux安装docker
    asp.net5.0源码(Microsoft github源码)
    探索Asp net core3中的 项目文件、Program.cs和通用host(转)
    c#中的sealed关键字
    .NET平台常见技术框架整理汇总
    疫情下孩子的网课
    常系数齐次线性递推
    【2021~2022】模拟赛乱写 Period I
  • 原文地址:https://www.cnblogs.com/lax-17xu/p/12494738.html
Copyright © 2020-2023  润新知