api接口怎么调用，api接口调用方法

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

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

})

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