vue的axios使用

概述1.安装axios 在项目目录下安装,命令: npm install --save axios vue-axios 2.axios的配置 方法1:在入口main.js中导入axios 并将axios写入vue的原型，这样就能更简单的使用 import axios from ‘axios‘ import VueAxios from ‘vue-axios‘ ? Vue.use(VueAxios, ax 1.安装axios

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

npm install --save axios vue-axios

2.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 = false6 // Vue.prototype.$AJAX = AJAX  两种定义都可以,使用时调用对应的变量7 Vue.prototype.axios = AJAX

 

3. axios.get()方法 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时,{params:searData})    this.axios.get(url,{ params })      .then(res => {        console.log(res.data)      })      .catch(err => {        alert(err)      })  }}</script>

　　

4. axios.post()方法

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>

 

5. axios经典写法

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>

总结

以上是内存溢出为你收集整理的vue的axios使用全部内容，希望文章能够帮你解决vue的axios使用所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。