摘要：
1.安装axiosthen中返回的是正常情况下的数据，而catch中返回的是错误信息。
在项目目录下安装,命令:
npm install --save axios vue-axios2.axios的配置方法1:在入口main.js中导入axios 并将axios写入vue的原型，这样就能更简单的使用
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)方法二:如果需配置全局axios访问的路由前缀，可以配置如下内容:
1 import axios from 'axios' 2 const ajax = axios.create({ 3 baseURL: 'http://127.0.0.1:8000' // 配置请求路由前缀 4 }) 5 Vue.config.productionTip = false 6 // Vue.prototype.$ajax = ajax 两种定义都可以,使用时调用对应的变量 7 Vue.prototype.axios = ajax
3.1 无参情况
axios封装了get方法，传入请求地址和请求参数即可。 then中返回的是正常情况下的数据，而catch中返回的是错误信息。请求格式为: this.axios.get(url).then(res => {}).catch(err => {})
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响应数据形式:
res.data.data : 就是我们后端自己返回的数据
3.2 有参情况
axios封装了get方法，get方法可以接收请求参数，请求参数定义在格式为: this.axios.get(url, { params }).then(res => {}).catch(err => {})
<script>
export default {
mounted: function () {
var url = 'http://127.0.0.1:8000/api/article/article/'
var params = { //要么定义为params 传参{params}, 使用其他变量名,传参需{params:其他名}
is_delete: 1
}
// 传参数:只能解析params
//注意1:传递的参数定义为params时,this.axios.get(url,{params})
//注意2: 传递的参数定义为searchData时,this.axios.get(url,{params:searData})
this.axios.get(url, { params })
.then(res => {
console.log(res.data)
})
.catch(err => {
alert(err)
})
}
}
</script>
axios封装了post方法，post方法可以接收请求参数，请求参数定义在格式为: this.axios.post(url, params).then(res => {}).catch(err => {})
export default { mounted: function () { var url = 'http://127.0.0.1:8000/api/article/article/' var params = { title: '1213', desc: '321' } //post传参:参数params不需要{} this.axios.post(url, params) .then(res => { console.log(res.data) }) .catch(err => { alert(err) }) } } </script>
axios的经典写法，post请求格式为: this.axios({method: 'post',url: url，data: params}).then(res => {}).catch(err => {})
<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>