1.首先安装axios

npm i axios --save

2.使用

import axios from "axios"

//post请求
axios({
    url:"请求地址",
    method:"post",
    data:{}，//请求参数
}).then(res=>{
    //res是后端返回的数据 做业务逻辑
})

//get请求
axios({
    url:"请求地址",
    method:"get",
    params:{}，//请求参数
}).then(res=>{
    //res是后端返回的数据 做业务逻辑
})

3.在项目里封装一下

在项目里新建http文件夹，index.js   api.js文件

 在main.js中引入index.js

import axios from "axios"
import Vue from "vue"
import qs from 'querystring'

//判断是什么环境可以进行相关的操作
//development开发环境 production生产环境
//假如后端返回的图片地址没有前缀，
//在开发环境的时候需要加上前缀运行调试的时候才会正常显示
//生产环境的时候项目以上线就可以不加
if (process.env.NODE_ENV === "development") {
    Vue.prototype.$pre = '图片地址前缀'
} else {
    Vue.prototype.$pre = ''
}

//请求拦截
axios.interceptors.request.use((req) => {
    // 如果请求的地址不是登录，也不是注册，就要携带请求头
    if (req.url != "/api/login" && req.url !== "/api/register") {
        req.headers.authorization = JSON.parse(localStorage.getItem("userInfo")).token
    }
    // console.group("请求拦截");
    // console.log(req);
    // console.groupEnd()
    return req;
})
//响应拦截
axios.interceptors.response.use((res) => {
    // 统一打印
    console.group("此处是响应拦截,本次请求地址是：" + res.config.url)
    console.log(res);
    console.groupEnd();

    //统一处理一下失败
    if (res.data.code !== 200) {
        alert(res.data.msg)
    }

    //统一处理掉线
    if (res.data.msg === "登录已过期或访问权限受限") {
        //跳转到登录页
        router.replace("/login")
    }

    //将后端返回过来的数据给组件
    return res;
})

//封装一下get和post请求方法
//get
//url :请求地址
//params 请求参数，默认是{}
export const get = (url, params = {}) => {
    return axios({
        url,
        method: "get",
        params
    })
}
//post
export const post = (url, data = {}, isFile = false) => {
    let params = null;
    if (isFile) {
        params = new FormData()
        for (let key in data) {
            params.append(key, data[key])
        }

    } else {
        params=qs.stringify(data)
    }
    return axios({
        url,
        method:'post',
        data:params
    })
}

4.然后新建api.js//里面存放这数据请求方法

import {get,post}from "../index" //引入index.js文件

export const req=()=>get("/login",{}) //数据请求方法

5.就可以在组件使用了只需引入api.js文件，调用相应的数据请求方法就行了

例如

import {req} form "@http/api/api.js"//引入api.js文件


//直接使用就行
methods:{
   req()
}