Vue.js-axios(网络模块封装)

1.1 为什么选择axios?

axios 是一个基于 promise 的 HTTP库网络请求插件.

基本特点

• 可以用在浏览器==(测试网站：httpbin.org/)==和 node.js中
• 支持 Promise API。
• 自动转换 JSON 数据。
• 客户端支持防御 XSRF。

创建项目：vue init webpack axiostest，终端安装插件:cnpm install axios --save

1.2 axios基本使用

App.vue

<template>
  <div id="app">
  </div>
</template>

<script>
export default {
    
  name: 'App'
}
</script>

<style>
</style>

main.js

import Vue from 'vue'
import App from './App'
// 导入axios
import axios from 'axios'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
   
  el: '#app',
  render: h => h(App)
})
// 1.基本使用
axios({
   
  url: 'http://123.207.32.32:8000/home/multidata',
  method: 'get'
}).then(res => {
   
  console.log(res)
})

axios({
   
  url: 'http://123.207.32.32:8000/home/data',
  // 专门用来对get请求参数的拼接
  params: {
   
    type: 'pop',
    page: 1
  }
}).then(res => {
   
  console.log(res);
})

执行结果

1.3 axios发送并发请求

使用axios.all可以放入多个请求的数组，axios.all([ ]) 返回的结果是一个数组。

main.js

import Vue from 'vue'
import App from './App'
// 导入axios
import axios from 'axios'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
   
  el: '#app',
  render: h => h(