前端常见的接口调用的方式

接口调用的方式有哪些

• 原生ajax
• 基于jQuery的ajax
• fetch
• axios

前面两种不再多说，主要介绍后面两种接口调用的方式。

一、原生ajax

Ajax 的实现步骤

创建 Ajax 对象

var xhr = new XMLHttpRequest();

告诉 Ajax 请求地址以及请求方式

xhr.open('get', 'http://www.example.com');

发送请求

xhr.send();

获取服务器端给与客户端的响应数据

xhr.onload = function () {
     console.log(xhr.responseText);
 }

示例：

<script type="text/javascript">
	// 1.创建ajax对象
	var xhr = new XMLHttpRequest();
	// 2.告诉Ajax对象要向哪发送请求，以什么方式发送请求
	// 1)请求方式 2)请求地址
	xhr.open('get', 'http://localhost:3000/first');
	// 3.发送请求
	xhr.send();
	// 4.获取服务器端响应到客户端的数据
	xhr.onload = function (){
		console.log(xhr.responseText)
	}
</script>

二、基于jQuery的ajax

首先是$.ajax发起ajax请求，

type是请求类型，可以是post，可以是get。

dataType是数据类型，预期服务器返回的数据类型。可以是json、xml、html、script等等

data是请求的变量和变量值。

url是异步处理的地址

success是返回后的数据。

看代码：

   $.ajax({
    type:"post",
    dataType:"json",
    data:{cateid:id},
    url:"{:url('cate/ajaxlst')}",
        success:function(data){
         alert(data);
         },
    });

三、Fetch基本概念

Fetch 是一个现代的概念, 等同于 XMLHttpRequest。它提供了许多与XMLHttpRequest相同的功能，但被设计成更具可扩展性和高效性。

简而言之Fetch 的核心在于对 HTTP 接口的抽象，包括 Request，Response，Headers，Body，以及用于初始化异步请求的 global fetch。得益于 JavaScript 实现的这些抽象好的 HTTP 模块，其他接口能够很方便的使用这些功能。除此之外，Fetch 还利用到了请求的异步特性——它是基于 Promise 的。

使用Fetch

Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应。它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。

这种功能以前是使用 XMLHttpRequest 实现的。Fetch 提供了一个更理想的替代方案，可以很容易地被其他技术使用，Fetch 还提供了专门的逻辑空间来定义其他与 HTTP 相关的概念，例如 CORS 和 HTTP 的扩展。

请注意，fetch 规范与 jQuery.ajax() 主要有三种方式的不同：

• 当接收到一个代表错误的 HTTP 状态码时，从 fetch() 返回的 Promise 不会被标记为 reject， 即使响应的 HTTP 状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok 属性设置为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。
• fetch() 不会接受跨域 cookies；你也不能使用 fetch() 建立起跨域会话。其他网站的 Set-Cookie 头部字段将会被无视。
• fetch 不会发送 cookies。除非你使用了credentials 的初始化选项。

一个基本的 fetch 请求设置起来很简单。看看下面的代码：

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });

这里我们通过网络获取一个 JSON 文件并将其打印到控制台。最简单的用法是只提供一个参数用来指明想 fetch() 到的资源路径，然后返回一个包含响应结果的promise（一个 Response 对象）。

当然它只是一个 HTTP 响应，而不是真的JSON。为了获取JSON的内容，我们需要使用 json() 方法。

支持的请求参数

fetch() 接受第二个可选参数，一个可以控制不同配置的init对象：

postData('http://example.com/answer', {answer: 42})
  .then(data => console.log(data)) // JSON from `response.json()` call
  .catch(error => console.error(error))

发送带凭据的请求

为了让浏览器发送包含凭据的请求（即使是跨域源），要将credentials: 'include’添加到传递给 fetch()方法的init对象。

fetch('https://example.com', {
  credentials: 'include'  
})

如果你只想在请求URL与调用脚本位于同一起源处时发送凭据，请添加 credentials: ‘same-origin’。

// The calling script is on the origin 'https://example.com'

fetch('https://example.com', {
  credentials: 'same-origin'  
})

要改为确保浏览器不在请求中包含凭据，请使用 credentials: ‘omit’。

fetch('https://example.com', {
  credentials: 'omit'  
})

上传 JSON 数据

使用 fetch() POST JSON数据

var url = 'https://example.com/profile';
var data = {username: 'example'};

fetch(url, {
  method: 'POST', // or 'PUT'
  body: JSON.stringify(data), // data can be `string` or {object}!
  headers: new Headers({
    'Content-Type': 'application/json'
  })
}).then(res => res.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));

四、什么是 axios？

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

学习axios第三方库：==> axios中文网

特性

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

案例：执行 GET 请求

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 上面的请求也可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

执行 POST 请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

执行多个并发请求

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));

axios响应结果与全局配置

响应结果主要属性

• data 实际响应回来的数据
• headers 响应头
• status响应状态码

Axios中全局配置

• 配置公共的请求头 axios.defaults.baseURL
• 配置 超时时间 axios.defaults.timeout
• 配置公共的请求头 axios.defaults.headers.common[‘Authorization’]

axios拦截器

在请求或响应被 then 或 catch 处理前拦截它们。

请求拦截器

• 请求拦截器的作用是在请求发送前进行一些操作，例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易

响应拦截器

• 响应拦截器的作用是在接收到响应后进行一些操作，例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

五、async 和 await

async 和 await用法

async作为一个关键字放到函数前面

• 任何一个async函数都会隐式返回一个promise 对象
• promise对象的结果由async函数执行的返回值决定

await关键字只能在使用async定义的函数中使用

• await后面可以直接跟一个 Promise实例对象
• async/await 让异步代码看起来、表现起来更像同步代码
• await右侧的表达式一般为promise对象, 但也可以是其它的值
  • 如果表达式是promise对象, await返回的是promise成功的值
  • 如果表达式是其它值, 直接将此值作为await的返回值

async函数处理多个异步请求

• 多个请求如何按顺序拿到每个请求的结果

    //async/await处理多个异步任务
    axios.defaults.baseURL = 'http://localhost:3000';

    async function queryData() {
      var info = await axios.get('async1');
      var ret = await axios.get('async2?info=' + info.data);
      return ret.data;
    }

    queryData().then(function(data){
      console.log(data)
    })

async和await好处

• async搭配await是ES7提出的，它的实现是基于Promise

注意细节点

• await函数不能单独使用，而且async函数返回的是一个Promise对象，可以使用then函数添加回调函数。当函数执行的时候，一旦遇到await函数就会先返回一个Promise对象，等到异步操作完成，再去执行后面的语句
• await必须写在async函数中, 但async函数中可以没有await
• 如果await的promise失败了, 就会抛出异常, 需要通过try…catch来捕获处理