大三学习进度36

Vue.js Ajax(axios)

Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。

 

Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。

 

Github开源地址： https://github.com/axios/axios

 

安装方法

使用 cdn:

 

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

或

 

<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

使用 npm:

 

$ npm install axios

使用 bower:

 

$ bower install axios

使用 yarn:

 

$ yarn add axios

浏览器支持情况

 

 

GET 方法

我们可以简单的读取 JSON 数据：

 

GET 实例

new Vue({

  el: '#app',

  data () {

    return {

      info: null

    }

  },

  mounted () {

    axios

      .get('https://www.runoob.com/try/ajax/json_demo.json')

      .then(response => (this.info = response))

      .catch(function (error) { // 请求失败处理

        console.log(error);

      });

  }

})

 

尝试一下 »

使用 response.data 读取 JSON 数据：

 

GET 实例

<div id="app">

  <h1>网站列表</h1>

  <div

    v-for="site in info"

  >

    {{ site.name }}

  </div>

</div>

<script type = "text/javascript">

new Vue({

  el: '#app',

  data () {

    return {

      info: null

    }

  },

  mounted () {

    axios

      .get('https://www.runoob.com/try/ajax/json_demo.json')

      .then(response => (this.info = response.data.sites))

      .catch(function (error) { // 请求失败处理

        console.log(error);

      });

  }

})

</script>

 

尝试一下 »

GET 方法传递参数格式如下：

 

传递参数说明

// 直接在 URL 上添加参数 ID=12345

axios.get('/user?ID=12345')

  .then(function (response) {

    console.log(response);

  })

  .catch(function (error) {

    console.log(error);

  });

 

// 也可以通过 params 设置参数：

axios.get('/user', {

    params: {

      ID: 12345

    }

  })

  .then(function (response) {

    console.log(response);

  })

  .catch(function (error) {

    console.log(error);

  });

POST 方法

POST 实例

new Vue({

  el: '#app',

  data () {

    return {

      info: null

    }

  },

  mounted () {

    axios

      .post('https://www.runoob.com/try/ajax/demo_axios_post.php')

      .then(response => (this.info = response))

      .catch(function (error) { // 请求失败处理

        console.log(error);

      });

  }

})

 

尝试一下 »

POST 方法传递参数格式如下：

 

传递参数说明

axios.post('/user', {

    firstName: 'Fred',        // 参数 firstName

    lastName: 'Flintstone'    // 参数 lastName

  })

  .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) {

    // 两个请求现在都执行完成

  }));

axios API

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

 

实例

axios(config)

// 发送 POST 请求

axios({

  method: 'post',

  url: '/user/12345',

  data: {

    firstName: 'Fred',

    lastName: 'Flintstone'

  }

});

//  GET 请求远程图片

axios({

  method:'get',

  url:'http://bit.ly/2mTM3nY',

  responseType:'stream'

})

  .then(function(response) {

  response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))

});

axios(url[, config])

// 发送 GET 请求（默认的方法）

axios('/user/12345');