axios 获取后台数据

什么是axios

• axios是一个获取后台数据的插件
• 地址https://www.npmjs.com/package/axios
• 使用 前提得安装node.js
• 页面直接引用 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
• 下载 选中文件夹 shift+右键 调出命令窗口 输入 npm i axios -g

axios的特性

1.可以从浏览器中创建XHR对象
2、可以从nodeJS中创建HTTP请求
3、支持Promise
4、可以拦截请求和响应
5、可以转换请求数据和响应数据
6、可以取消请求
7、可以自动转换JSON数据
8、客户端支持防御XSRF

获取数据：
路径为后台数据接口
在用axios获取后台数据时，
  get  function(){
      var url = '路径'
    axios.get(url,{params:参数}).then(function(储存后台数据的变量：A){    //then为成功后的回调
        对象名.渲染页面的函数名(A.data)                     // data是在使用axios的时候，axios给数据添加了一个data来封装获得的数据，
    }).catchcatch(function (用来储存错误信息的变量：error){ // 捕捉错误
      alert(error)                                        // 请求失败之后,执行这个函数
    })
    }

• axios get 方法
  仅仅请求后台数据

axios.get('index.php')
  .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);
  });

当然，也可以把参数数据直接写到URL中

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

• aixos post方法
  一般来说，post请求更多的是要提交数据，params属性里的数据会出现在请求主体中。
  [注意]如果是axios.create()方法中的params属性，则其里面的数据会出现在URL参数中。
  但实际上，post方法不需要使用params属性，它的第二个参数就是要发送的数据。

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) {
    // acct为第一个请求的结果，perms为第二个请求的结果
  }));