vue axios安装与使用
在项目目录下安装,命令:
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>