Vue封装axios的示例讲解

axios({
      url:'http://127.0.0.1:9001/students/test',  //远程服务器的url
      method:'get',  //请求方式
    }).then(res=>{
      this.students = res.data
    }).catch(e=>{
      console.error(e);
    })
//缺点：每个使用axios的组件都需要导入

import axios from "axios";
Vue.prototype.$http = axios

this.$http.get('http://127.0.0.1:9001/students/test').then(res=>{
        this.students = res.data
      }).catch(e=>{
        console.log(e)
      })

import axios from "axios";
const axiosApi = axios.create({
    baseURL:'http://127.0.0.1:9001', //基础地址
    timeout:2000        //连接超时的时间(单位：毫秒)
})
export default  axiosApi   //axiosApi是axios的实例

import $http from '../config/axiosapi'
$http.get('/students/test').then(res=>{
        this.students = res.data.info
      }).catch(e=>{
        console.log(e)
      })

let str = '张三'
      $http.get('/students/test/?username='+str).then(res=>{
        this.students = res.data.info
      }).catch(e=>{
        console.log(e)
      })

let str = '张三'
      $http.get('/students/test',{
        params:{
          username:str
        }
      }).then(res=>{
        this.students = res.data.info
      }).catch(e=>{
        console.log(e)
      })

let str = '张三'
      $http.post('/students/test',{
        username:str
      }).then(res=>{
        this.students = res.data.info
      }).catch(e=>{
        console.log(e)
      })