axios发送网络请求

网络模块封装

选择什么网络模块

1. 传统的Ajax
   缺点:配置和调用方式等非常混乱
2. jQuery-Ajax
   缺点:在Vue整个开发中都是不需要使用jQuery的
3. axios

axios

功能特点:

1. 在浏览器中发送XMLHttpRequests请求
2. 在Node.js中发送http请求
3. 支持Promise API
4. 拦截响应和请求
5. 转换请求和响应数据

axios的基本使用

安装axios框架:
npm install axios --save
在入口文件main.js中引入axios并调用
注意:axios返回一个Promise对象,所以可以直接链式调用获取数据

import axios from 'axios'
axios({
   
  // 请求方式默认为get,如果需要改变请求方式的话,则需要使用如下方法
  methods:'get'
  url:'http://123.207.32.32:8000/home/multidata',
  // 专门针对get请求的参数拼接
  prarms:{
   
    type:'',
    page:1
  }
}).then(res =>{
   
  console.log(res);
})

axios发送并发请求

axios.all([axios({
   
  url:'http://123.207.32.32:8000/home/multidata'
}),axios({
   
  url:'http://123.207.32.32:8000/home/data',
  params:{
   
    type:'sell',
    page:3
  }
})]).then(res =>{
   
  console.log(res);
})

全局配置

事实上,在开发中可能很多参数都是固定的,这个时候我们可以进行一些抽取,也可以利用axios的全局配置

//将公共配置单独抽取出来
axios.defaults.baseURL = '123.207.32.32:8080'
axios.defaults.hedaers.post['Content-Type'] = 'application/www-form-urlencoded';
// 使用全局axios和对应的配置进行网络请求
axios.all(