在项目目录下安装,命令:

npm install axios --save

axios的配置

方法一:在入口main.js中导入axios 并将axios写入vue的原型，这样就能更简单的使用

import axios from 'axios'
import VueAxios from 'vue-axios'  //写入vue原型，需要安装vue-axios     npm install --save vue-axios
Vue.use(VueAxios, axios)

方法二:如果需配置全局axios访问的路由前缀，可以配置如下内容:

import axios from 'axios'
const ajax = axios.create({
  baseURL: 'http://127.0.0.1:8000'  // 配置请求路由前缀
})
Vue.config.productionTip = false
// Vue.prototype.$ajax = ajax  两种定义都可以,使用时调用对应的变量
Vue.prototype.axios = ajax

发送GET请求

    // created:vue生命周期中的钩子函数，在这个时间点，data中的数据已经注入到响应式系统中created(){
    axios.get('api/getData.php',{       // 还可以直接把参数拼接在url后边
        params:{
            title:'眼镜'
        }
    }).then(function(res){
        this.goodsList = res.data;
    }).catch(function (error) {
        console.log(error);
    });}
    
    //response.data才是真正返回的后台数据

发送POST请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
}).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});

// 注意: 如果发送请求时，发现传递的参数是对象，那么可用如下方式传参数
// var params = new URLSearchParams();
// params.append('title', '眼镜');
// params.append('id',1);
// axios.post('/user', params)
//      .then(function(res){})
//      .catch(function(error){});

axios经典写法

<script>
    export default {
    
      mounted: function () {
        var url = 'http://127.0.0.1:8000/api/article/article/'
        var params = {
          title: '121322',
          desc: '321'
        }
        this.axios({
          method: 'post',
          url: url,
          data: params
        }).then(res => {
          console.log('成功')
        }).catch(err => {
          console.log('失败')
        })
      }
    }
</script>