VUE ajax数据装载与提交

VUE可以集成很多Ajax类库与后台交互数据，本文使用VUE集成Axios Ajax类库

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
Features
从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

Promise

Promise是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。
通俗讲，Promise是一个承诺、承诺完成未来的一件事情，Promise存在三个状态。
Pending 正在做。。。
Resolved 完成这个承诺
Rejected 这个承诺没有完成，失败

new Promise((resolve,reject)=>{
	//执行异步操作
}).then((resolveData)=>{
    //成功返回的数据
	console.log(resolveData) 
},(rejectErr)=>{
    //失败返回的错误信息
}).then(data=>{
    //返回下一个Promise对象
	return data
}).then(data=>{
	console.log(data)
}

使用 cdn引入Axios

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

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

Axios 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(config)

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

并发

axios.all(iterable)
axios.spread(callback)

Axios相应数据格式

{
  // `data` 由服务器提供的响应
  data: {},

  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,

  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',

  // `headers` 服务器响应的头
  headers: {},

  // `config` 是为请求提供的配置信息
  config: {}
}