ajax、axios、fetch、jsonp、cors

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

1、可以调用PromiseAPI；

2、自动转换JSON数据；

3、客户端支持防御XSRF；

4、执行多个并发请求。

执行 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 传递相关配置来创建请求

axios(config)

// 发送 POST 请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});
复制代码

axios(url[, config])

// 发送 GET 请求（默认的方法）
axios('/user/12345');复制代码

这个支持防止CSRF其实挺好玩的，是怎么做到的呢，就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。

fetch

• fetch是一个低层次的API，你可以把它考虑成原生的XHR，所以使用起来并不是那么舒服，需要进行封装
• fetch只对网络请求报错，对400，500都当做成功的请求，需要封装去处理
  2）fetch默认不会带cookie，需要添加配置项
  3）fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了流量的浪费
  4）fetch没有办法原生监测请求的进度，而XHR可以
  

jsonp

由于浏览器的同源政策，ajax不能跨域获取数据，而html里的script标签不受同源政策的限制，jsonp协议允许用户传递一个callback参数给服务端，然后服务端在返回数据的时候，会将这个callback参数作为函数名来包裹在json数据外面，这样客户端就可以定制自己的函数来处理返回的数据了。

CORS

它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

一般来说，出现No 'Access-Control-Allow-Origin' header is present on the requested resource.这样的报错

是因为CORS跨域验证机制设置不正确导致的。

转载于:https://juejin.im/post/5b76c69ae51d4538dd08c7bc