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://ltggbm.ktkt.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>

配置公共数据

<div id="app">
    <button @click="handler">按钮</button>
    <h1>这是请求回来的标题:{{title}}</h1>
    <p>这是请求回来的内容:{{content}}</p>
</div>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                title: "",
                content: ""
            }
        },
        methods: {
            handler() {
                //配置公共数据
                axios.defaults.baseURL = "http://ltggbm.ktkt.com/";
                axios.get("1/report/index")
                    .then((res) => {
                        this.title = res.data[0].title;
                        this.content = res.data[0].content
                    }).catch((err) => {

                    });
            }
        }
    })
</script>