vue项目中怎么封装api请求

项目根路径 npm i axios 安装依赖

一 , src目录下新建utils文件夹 - > request.js文件

import axios from 'axios'
import {
    Toast
} from 'vant';
import qs from 'qs'
import router from '../router'

// 创建axios 实例
const service = axios.create({
    baseURL: '/GdYxEzs',  //请求根路径
    timeout: 10000, //超时时间，10秒
    loading: true,
})

//请求拦截器
service.interceptors.request.use(
    config => {
        if (config.method === "get") {
            config.data = {
                unused: 0
            }; // 这个是关键点，加入这行就可以解决get请求添加不上Content-Type
        }
        // 配置请求头
        if (config.url === "/a/login") {
            config.data = qs.stringify(config.data);
            config.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
        } else {
            config.headers["Content-type"] = "application/json;charset=UTF-8";
        }
        return config;
    },
    error => {
        Promise.reject(error);
    }
);

//响应拦截器
service.interceptors.response.use(response => {
    // console.log(response);
    // 不做处理，请求成功直接返回
    // return response

    // 做处理，如果未登录强制跳到登录页面
    if (response.data.code === '0000') {
        return Promise.resolve(response)
    } else {
        if (response.data.code == '0001') {
            Toast('您还没有登陆噢~');
            setTimeout(() => {
                router.push('/login');
            }, 1500)
        } else {
            return Promise.resolve(response)
        }
    }
}, error => {
    // console.log(error); //打印错误
    // 请求超时 ， 跳到无网络页面
    if (error.message.includes('timeout')) {
        Toast("请求超时，请检查网络后重试")
        router.push('/no_network');
    }
    return Promise.reject(error)
})

export default service

二 , src目录下新建api文件夹 - > index.js文件

//引入request
import request from '@/utils/request.js'

// 需要传参的
export const login = data => {
    return request({
        method: 'POST',
        url: '/v1_0/authorizations',
        data

    })
}

// 不需要传参的
export const getUserInfo = () => {
    return request({
        method: 'GET',
        url: `/v1_0/user`,
    })
}

三 , 需要发请求的vue文件中引入, 调用

import { getUserInfo } from "@/api/index.js";

  created() {
   //调用获取用户信息的方法
    this.loadUserInfo();
  },

  data() {
    return {
    // 定义用户信息的数组
      userInfo:[]
    };
  },

   methods: {
    // 定义获取用户信息的方法
    async loadUserInfo() {
      try {
    // 调用获取用户信息的api请求 , 并解构出data, 重命名为res
        const { data: res } = await getUserInfo();
        console.log(res);
     // 赋值
        this.userInfo= res.data;
      } catch (err) {
        console.log(err);
        
      }
    }
  
  },

这样发请求肯定会出现跨域 , 解决跨域 -->  vue 项目中怎么解决跨域 , has been blocked by CORS policy_调调啊的博客-CSDN博客_cors policy