Vue---在vue中使用axios的两种方式

1.原型挂载的方式(简单方便，但是不利于接口维护)

我们可以把axios请求对象挂载到vue.prototype 原型对象中，然后在组件中通过this.xxx直接访问

在main.js中

import axios from 'axios'//安装好axios后导入

Vue.prototype.$axios = axios//将导入的axios挂载到Vue的原型对象上

在组件中使用

this.$axios.get('请求路径')

2.模块化的方式(推荐)

我们把每一个请求都封装成每个独立的功能函数，在需要的时候加载调用，这种做法更便于接口的管理和维护

在request.js（自己封装的axios请求模块),向外共享实例化的axios对象

// 请求模块
import axios from 'axios'
const request = axios.create({
        baseURL: 'http://toutiao.itheima.net'
    })
    // 请求拦截器

// 响应拦截器
export default request

在user.js（自己封装的用户请求模块） ，向外共享基于axios的post请求的login函数

// 用户请求相关模块
import request from '../uilts/request'//导入请求模块
export const login = data => {
    return request({
        method: 'POST',
        url: '/v1_0/authorizations',
        data: data
    })
}

 在组件中使用login函数

import { login } from '../../api/user'//按需导入用户请求模块

    async onSubmit() {
      try {
        const data = await login()//使用导入的login函数
        console.log(data);
      } catch (err) {
      }
    }