axios / fetch / ajax

ajax

传统 Ajax 指的是 XMLHttpRequest（XHR）， 最早出现的发送后端请求技术，隶属于原始js中，核心使用XMLHttpRequest对象，多个请求之间如果有先后关系的话，就会出现回调地狱。最常用的是jquery的ajax api，对原生XHR请求的封装，添加了对JSONP的支持。

$.ajax({
   type: 'POST',
   url: url,
   data: data,
   dataType: dataType
}).then(function(json) {
    //success
}, function(err) {
    //error
});

缺点：

1. 不符合前段MVVM设计；
2. XHR本身架构不清晰；

axios

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质也是XHR请求

优点：

1. 支持 Promise API
2. 客户端支持防止CSRF
3. 提供了一些并发请求的接口（重要，方便了很多的操作）
4. 从 node.js 创建 http 请求
5. 拦截请求和响应
6. 转换请求和响应数据
7. 取消请求
8. 自动转换JSON数据

一，安装

1，react框架

npm install react-axios -D
//-D 相当于 --save-dev

import { AxiosProvider, Request, Get, Delete, Head, Post, Put, Patch, withAxios } from 'react-axios'

2，vue框架

npm install -D axios vue-axios


import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios);
//也可以单独使用axios，不需要vue-axios
//注：单独使用axios时，不能Vue.use(axios)，因为axios组件封装没有提供install方法

二，发送请求

1，GET 请求

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
##或者
axios.get('/user', {
    //URL参数，get请求专用
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

2，POST 请求

axios.post('/user&