Vue入门（10）axios

1.安装

npm install axios

2.使用

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

执行多个并发请求

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) {
    // 两个请求现在都执行完成
  }));

3.axios API

transformResponse 在传递给 then/catch 前，允许修改响应数据。

<div id="app">
    <button @click="handler">按钮</button>
    <h1>这是请求回来的数据{{msg}}</h1>
</div>
<script>
    new Vue({
        el : "#app",
        data(){
            return {
                msg : ""
            }
        },
        methods : {
            handler(){
                axios.get("http://xxx.com/1/report/index",{
                    transformResponse: [function (data) {
                        // 对 data 进行任意转换处理
                        data = JSON.parse(data);
                        console.log(data[0].title);
                        data[0].title = 111
                        return data;
                    }]
                })
                .then((res) => {
                    console.log(res.data[0].title);
                    this.msg = res.data[0].title
                }).catch((err) => {
                    
                });
            }
        }
    })
</script>