vue中使用axios

axios
基于http客户端的promise，面向浏览器和nodejs
特色
浏览器端发起XMLHttpRequests请求
node端发起http请求
支持Promise API
监听请求和返回
转化请求和返回
取消请求
自动转化json数据
客户端支持抵御

安装
使用npm：
npm install axios --save
为了解决post默认使用的是application/json请求数据 ，导致请求参数无法传递到后台，所以还需要安装一个插件QS,此插件将application/json转换为application/x-www-from-urlencoded
npm install qs --save
一个命令全部解决
npm install --save axios vue-axios qs

使用
修改原型链
首先在 main.js 中引入 axios
import Axiso from ‘axiso’
这时候如果在其它的组件中，是无法使用 axios 命令的。但如果将 axios 改写为 Vue 的原型属性，就能解决这个问题
Vue.prototype.$axios= Axios
配置好了之后就可以全局使用了
post请求转换
import QS from ‘qs’
if(config.method==‘post’){
config.data=QS.stringify(config.data);//防止post请求参数无法传到后台
}
实例使用:

axios({
    method: 'post',
    url:'http://easy-mock.com/mock/596077559adc231f357bcdfb/axios/test-post-axios'
  })
  .then((response)=>{
      console.log(response.data)
  })
  .catch((error)=>{
      console.log(error)
  })
  
  axios.post('http://easy-mock.com/mock/596077559adc231f357bcdfb/axios/test-post-axios',{
      miaov:"课堂"  //发送的数据
    })
      .then((response)=>{
        console.log(response.data)
      })
      .catch((error)=>{
        console.log(error)
      })

发送带参数的

//get方式发送数据
axios.get('https://easy-mock.com/mock/5a883cccbf160328124e8204/example/mock', {
    params: {
        pomelo: 'tt',
        test: 'test'
    }
}).then((response) => {
    console.log(response)
}).catch((error) => {
    console.log(error)
})
//post方式发送数据
axios.post('https://easy-mock.com/mock/5a883cccbf160328124e8204/example/mock', {
    pomelo: 'tt',
    test: 'test'
}).then((response) => {
    console.log(response)
}).catch((error) => {
    console.log(error)
})