在Vue中axios的请求方法

首先在vscode 终端中下载axios包

npm i axios

1.在组件中直接使用axios请求数据

<script>
// 导入axios 库
import axios from 'axios'
 
// get 请求
 export default {
  methods: {
        // 调用 getInfo () 函数后请求数据
    async getInfo () {
      const { data: res } = await axios.get('http://www.liulongbin.top:3006/api/post',{
            params:{
            // get 方法中的参数
            }
        })
      console.log(res)
    }
  }
}

2.将axios挂载到Vue实例中

        1.在main.js中导入axios并进行挂载。

// 在main.js中 导入 axios，在组件中使用时不需要再进行导入
import axios from 'axios'
// 全局配置 axios 的请求根路径
axios.defaults.baseURL = 'http://www.liulongbin.top:3006'

// 把axios挂载到Vue的原型上

Vue.prototype.$http = axios

// 今后，在每个vue组件中要发起请求，直接调用this.$http.xxx

// 缺点：无法实现 api 的复用

        2.在组件中使用axios请求参数  

// 在组件中使用
export default {
  methods: {
    async postInfo () {
      const { data: res } = await this.$http.post('/api/post', { name: 'zs', age: 18 })
    //   { name: 'zs', age: 18 }此处为post方法传递参数
    console.log(res)
    }
  }
}

3.将axios封装到 reques.js 中

        1.在src目录下创建api文件夹，在api文件夹下创建 request.js 文件

        

        2.在 request.js 文件中封装axios

// 导入axios库，在组件中使用时不需要再进行导入
import axios from 'axios'

// 调用 axios.create()函数，创建一个axios的实例对象，用request 接收

const request = axios.create({
  // 指定请求的根路径
  baseURL: 'http://www.liulongbin.top:3006'
})

export default request

         3.在组件中使用axios请求数据

// 需要导入创建的request.js文件
import request from '@/api/request'
// import axios from 'axios'
export default {
  methods: {
    async getInfo () {
      const { data: res } = await request.get('/api/get')
      console.log(res)
    }
  }
}

以上三种是常见的在vue中通过axios请求数据的方法