axios的最基础封装笔记，看B站视频写下来的......

首先在src中建一个http 文件夹 ，其中又有两个子文件夹 config 以及api 和一个index.js 文件，config文件夹中有一index.js 文件

先说http/index.js

import Axios from "axios";
import serverConfig from './config'
import qs from 'qs'
//创建axios 请求实例
const ServerAxios = Axios.create({
    baseURL:serverConfig.baseURL,
    timeout:8000,
    withCredentials:false,
})
//创建请求拦截
ServerAxios.interceptors.request.use(
    (config) =>{
        if(serverConfig.userTokenAuthorization){
            config.headers["Authorization"] = localStorage.getItem("token");
        }
        if(!config.headers["content-type"]){ //没有设置请求头
            if (config.method === 'post'){
                config.headers["content-type"] = "application/x-www-form-urlencoded";
                config.data = qs.stringify(config.data);
            }else{
                config.headers["content-type"] = "application/json"  //默认类型
            }
        }
        console.log('请求配置',config); //走到这一步是有数据传到服务器的
        return config;
    },
    (error)=>{
        Promise.reject(error);
    }
)
//创建响应拦截
ServerAxios.interceptors.response.use(
    (res)=>{
        let data = res.data;
        return data;
    },
    (error)=>{
        let message = "";
        if (error && error.response){
            switch (error.response.status){
                case 302:
                    message = "接口重定向了！";
                    break;
                case 400:
                    message = "参数不正确！";
                    break;
                case 401:
                    message = "您未登录，或者登录已经超时，请先登录！";
                    break;
                case 403:
                    message = "您没有权限操作！";
                    break;
                case 404:
                    message = `请求地址出错: ${error.response.config.url}`;
                    break;
                case 408:
                    message = "请求超时！";
                    break;
                case 409:
                    message = "系统已存在相同数据！";
                    break;
                case 500:
                    message = "服务器内部错误！";
                    break;
                case 501:
                    message = "服务未实现！";
                    break;
                case 502:
                    message = "网关错误！";
                    break;
                case 503:
                    message = "服务不可用！";
                    break;
                case 504:
                    message = "服务暂时无法访问，请稍后再试！";
                    break;
                case 505:
                    message = "HTTP 版本不受支持！";
                    break;
                default:
                    message = "异常问题，请联系管理员！";
                    break;

            }
        }
        return Promise.reject(messsage);
    }
);
export default  ServerAxios;

因为js文件中要引入config/index.js 该文件内容为：

const serverConfig = {
    baseURL:"https://smallpig.site",
    userTokenAuthorization:true,
}
export default serverConfig;

之后再在api文件夹中定义一个js文件来应用封装之后的ServerAxios 以关于用户user 的请求封装为例 http/api/user.js

import ServiceAxios from '../index'
export const getUserInfo = (params)=>{
    return ServiceAxios({
        url:'/api/website/queryMenuWebsite',
        method:'get',
        params,
    })
};
export const login = (data)=>{
    return ServiceAxios({
        url:'/api/user/login',
        method:'post',
        data,
    })
}

这是将拥有某些特性的服务器请求再次封装，接下来就是封装的请求在vue文件中被应用 src/views/home/studyAxios.vue 代码如下：

<template>
  <div class="login">
    <el-form
        ref="FormRef"
        :model="Form"
        status-icon
        label-width="120px"
        class="demo-ruleForm"
    >
      <el-form-item
          label="用户名"
          prop="username"
          :rules="[
              {
                  required:true,
                  message:'此项目为必填项目',
                  trigger:'blur',
              },
             {pattern:/^[a-z]*$/, message: '用户名格式不正确' }
          ]"
      >
        <el-input v-model="Form.username" type="text" autocomplete="off" />
      </el-form-item>
      <el-form-item
          label="密码"
          prop="password"
          :rules="[
                {
                  required:true,
                  message:'此项目为必填项目',
                  trigger:'blur'
                },
          ]"
      >
        <el-input
            v-model="Form.password"
            type="password"
            autocomplete="off"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(FormRef)">提交</el-button>
        <el-button type="danger" @click="resetForm(FormRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "studyAxios"
}
</script>
<script setup>
import { login, getUserInfo } from "../../http/api/user"
import { reactive, ref } from 'vue'
import {ElMessage} from "element-plus";

const FormRef = ref()
async function loginAsync(){
  let params = {
    email:'123',
    password:'12321'
  }
  let data = await login(params);
  console.log(data);
}
// loginAsync();
async  function getUserMessage(){
  let params = {
    email:'123',
    password:'12321'
  }
  let data = await getUserInfo(params)
  console.log(data)
}
// getUserMessage();


const Form = reactive({
  username:'',
  password:''
})


async function submitForm(formEl)
{
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      let data = login({username:Form.username,password:Form.password}).then(res=>ElMessage.info(res))
    } else {
      console.log('error submit!')
      return false
    }
  })
}

const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>
<style scoped lang="scss">
.login
{
  width: 300px;
}
</style>