用axios来实现数据请求

cdn加载

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

get请求

axios.get('/detail?id=10').then(function (res) {
    //成功获取数据
   console.log(res);
 }).catch(function (err) {
    //请求错误
   console.log(err);
 });

get请求也可以通过 params 对象传递参数。写法如下：

axios.get('/detail', {
    //参数
   params: {
        id: 10
    }
 }).then(function (res) {
    //成功获取数据
    console.log(res);
 }).catch(function (err) {
    //请求错误
    console.log(err);
 });

post请求

//执行post请求
 axios.post('/add', {
    name: '前端君',
    age: 26
 }).then(function (res) {
    //请求成功
  console.log(res);
 }).catch(function (err) {
    //请求失败
  console.log(err);
 });

多个请求并发

除了最常用的get请求和post请求以外，值得一提的是axios提供了一次性并发多个请求的API，使用方法如下：

function getProfile(){
    //请求1
    return axios.get('/profile');
 }
 function getUser(){
    //请求2
    return axios.get('/user');
 }

 //并发请求
 axios.all([
    getProfile(),
    getUser()
 ]).then(axios.spread((res1, res2)=>{
    //两个请求现已完成
   console.log(res1);
    console.log(res2);
 }));