1.前言

vue add axios 的形式安装 axios
常规的安装在vue3里面 封装也比较简单,

2. 统一封装 请求拦截 响应拦截

路径/src/utils/http.js

import axios from 'axios';
// import qs from 'qs'
import store from '@/store/index'       //已经设置路径别名，否则相对路径引用
import { ElMessage, ElLoading } from "element-plus";
let loading = null
const service = axios.create({
    timeout: 5000,                                   //超时时间
    baseURL: "http://yzs.xx.com",             // 我们在请求接口的时候就不用写前面 会自动我们补全
    // transformRequest: data => qs.stringify(data)    //post请求参数处理,防止post请求跨域
})
// http request 拦截器
service.interceptors.request.use(config => {
    loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    //如果存在jwt，则将jwt添加到每次请求之中..
    if (store.state.jwt) {
        config.params = {
            ...config.params,
            jwt: store.state.jwt
        }
    }
    return config
}, err => {
    return err
})
// http response 拦截器
service.interceptors.response.use(response => {
    loading.close()
    return response
    //接收返回数据..
    // const res = response.data
    //判断返回数据是否存在状态code和错误提示信息..
    // if (!res.code || !res.msg) {
    //     return showMessage('响应数据格式错误', "error")
    // }
    //判断状态code是否为指定数值(200)..
    // if (res.code != 200) {
    //     return showMessage(res.msg)
    // }
    // return res
}, err => {
    console.log("33333333333333333")

    loading.close()
    return showMessage(err.message)
})

//封装错误提示信息..
function showMessage(message, type = "error", showClose = true) {
    ElMessage({
        showClose,          //是否显示X
        message,         //错误提示信息
        type,        //显示类型
        duration: 3 * 1000    //展示时间
    })
    return Promise.reject()
}
export default service;

具体的逻辑 一定要根据自己的业务来自己实现

3. api封装

/src/api/loginHttp.js

import http from '@/util/http.js'
export const getLogin = (parmas) => {
    return http
        .post("/login/info", parmas)
}

4. 组件使用

import  * as api from "@/api/loginHttp.js";
let name = ref();
let psw = ref();
let login = async () => {
  let a = {
    phone: name.value, //1860xxxxx753,
    password: psw.value, //"0987654",
  };
  // try {
    let res = await api.getLogin(a);
    if (res.data.code == 200) {
      ElMessage({
        message: "成功",
        type: "success",
      });
    } else {
    }
  // } catch (error) {
  //   console.log("-----error:", error);
  // }
};

1.具名导入
2.单值响应式 value
3.try catch 看情况使用

参考资料

vue2 axios配置

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉