axios学习总结

axios基本用法(JS HTTP库/Ajax库)

特征

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

安装和引用

首先就是引入axios,如果你使用es6，只需要安装axios模块之后：

import axios from 'axios';
//npm安装方法
$ npm install axios --save
//bower安装方法
$ bower install axios
//使用 cdn
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

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

执行多个并发请求(基于Promise语法)

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 API

可以通过向 axios 传递相关配置来创建请求

axios(config)

// 发送 POST 请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});
//axios(url[, config])
// 发送 GET 请求（默认的方法）
axios('/user/12345'<