前端vue+axios封装request请求，实现一行代码完成接口调用

前言：

该blog灵感来源于实习阶段看到前人写的优秀代码，将所有api请求全部封装到js文件，只需要在相应的 vue 文件 import
对应的方法即可，本人觉得异常优雅，故写一篇笔记记录

1.文件目录

在根目录创建utils文件夹，在utils里创建request文件夹，最后在request里创建request.js文件

2.导入axios，配置axios相关，进行请求响应/拦截响应

相关配置项可以在axios官网进行参考复制 Axios官网

3.封装POST/GET请求

• 我们将POST/GET请求进行分别封装，方便于后面传递给axios时可以省略method:POST/GET这一参数

// get请求
export function getAxios(Url, data) {
  return request({
    url: Url,
    method: 'get',
    params: data,
  });
}
// post请求
export function postAxios(Url, data) {
  return request({
    url: Url,
    method: 'post',
    data,
  });
}

4.封装api请求

我们在根目录下新建文件夹server，在server下再新建一个apis文件夹，之后我们就可以再apis文件夹之下分模块封装我们的api

我们以用户的身份认证模块为例，在apis文件夹下新建auth文件夹，在里面新建一个index.js文件，
导入我们的getAxios, postAxios两个请求方法

import { getAxios, postAxios } from '@/utils/request/Request';

我们就可以将auth相关的一系列api都写在里面

那么在相应的页面，我们只需要在文件里面导入对应的方法即可

import { getStep3Code, ThirdAuth,ThirdAuthDetail } from '@/server/apis/auth/index.js';
//获取验证
const getSms = async () => {
  let { data: data } = await getStep3Code(FromData.value.phone)
  if (data.code !== 200) {
    toast({
      title: '获取验证码出错',
      description: data.msg,
      variant: 'destructive',
      duration: '2000',
    });
  } else {
    ButtonSms.value.countDown();
  }
};
// onMounted 判断是否填写过
onMounted(async () => {
  const data = await ThirdAuthDetail({ adId: UserInfo.value.id, adType: 0 });
  if (data.adId) {
    // 将data对象的属性赋值给FromData
    Object.keys(FromData.value).forEach((key) => {
      if (data[key] !== undefined) {
        FromData.value[key] = data[key];
      }
    });
  }
});
// 发送数据到后端
const data = await ThirdAuth(FromData.value);

这样一来，我们在写业务逻辑时，只需要一行代码就可实现接口的请求，把更多的精力花在对响应res的处理中。