vue的axios使用

2022-09-07 23:02:06

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 = false
6 // 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时,this.axios.get(url,{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>