vue学习之axios

axios有什么功能特点？

1.可以在浏览器中发送xmlHttpRequests请求。

2.在node.js中发送http请求。

3.支持promise API

4.拦截请求和响应。

 

创建好了项目之后我们先下载axios：

npm install axios --save

　　安装好后我们在main.js引一下包就可以使用了：

import axios from 'axios'

　　通过这种方式可以进行get请求：mian.js中写入

axios({
  url:'http://123.207.32.32:8000/home/multidata'
}).then(res =>{
  console.log(res)
})

　　这里我们可以看到get请求发送过去了：

　　

 

 　　

 

 　　axios发送并发请求：

//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:5
  }
})]).then(result =>{
  console.log(result)
})

　　也可以在结果处通过axios.spread来单独获取两个结果，res1和res2：

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:5
  }
})]).then(axios.spread((res1,res2)=>{
  console.log(res1);
  console.log(res2);
}))

　　

 

 　　可以进行一些默认配置，参考上图：

axios.defaults.baseURL = "http://123.207.32.32:8000"
axios.defaults.timeout = 5000

　　分布式：很多用户向服务器发送请求可能服务器处理不过来所以要分布到多个服务器，这样可能有多个ip地址需要进行请求，所以中间我们使用一个代理服务器，根据哪个服务器请求比较少来进行分配。

　　开发的时候axios并不会用全局，我们会单独创建一个实例。（上面我们使用的是全局的）

　　创建对应的axios的实例：（插一句，快速注销ctrl k ctrl c）

const instace1 = axios.create({
  baseURL:'http://123.207.32.32:8000',
  timeout:5000
})

instance1({
  url:'/home/multidata'
}).then(res =>{
  console.log(res)
})

　　这样创建一个实例，然后配置这个实例，这样就可以使用这个实例了。配置不同就可以再开一个新实例。

　　引入第三方框架一定不要再每个组件内进行依赖，我们