vue3.0实现axios封装

vue3.0 axios封装和2.0的大致相似

1. 在src目录下创建文件
   
   config.js

export const METHOD = {
  GET: "get",
  POST: "post",
  PUT: "put",
  DELETE:"delete"
};

export const PATH = {
  getJson: "/mock/index.json",
  detail: "/mock/detail.json",
};

core.js

import axios from "axios";
import { METHOD } from "./config";


const instance = axios.create({
  baseURL: 'http://localhost:8080',
  timeout: 5000,

});

// let loading = null;
// 添加请求拦截器
instance.interceptors.request.use(
  function(config) {
   
    return config;
  },
  function(error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
instance.interceptors.response.use(
  function(response) {
 
    return response;
  },
  function(error) {
    
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

export function request(method, url, parmas) {
  switch (method) {
  case METHOD.GET:
    return GET(url, parmas);
  case METHOD.POST:
    return POST(url, parmas);
  case METHOD.PUT:
    return PUT(url, parmas)
  case METHOD.DELETE:
    return DELETE(url, parmas)
  }
}

function GET(url, params) {
  return instance.get(url, params);
}

function POST(url, params) {
  return instance.post(url, params);
}
function PUT(url, params) {
  return instance.put(url, params);
}
function DELETE(url, params) {
  return instance.delete(url, params);
}

index.js

import { METHOD, PATH } from "./config";
import { request } from "./core";

const APIClient = {
  getJson(params) {
    return request(METHOD.GET, PATH.getJson, params);
  },
  detail(params) {
    return request(METHOD.GET, PATH.detail, params);
  },
};

export default APIClient;

2. 在main.js引入
   

import App from './App.vue'
import router from './router'
import store from './store'
import Vant from 'vant';
import 'vant/lib/index.css';

import http from './network/index'
// 移动端适配
import 'lib-flexible/flexible'; 


const app = createApp(App)
app.config.globalProperties.$http = http

app.use(store).use(router).use(http).use(Vant).mount('#app');

具体使用

import {getCurrentInstance=} from "vue";


 const { ctx } = getCurrentInstance();
//getCurrentInstance();
//在vue3中没有了this实例，需要单独引入
    ctx.$http.getJson().then((res) => {
      console.log(res.data.data);
      state.iconList = res.data.data.iconList;
      state.recommendList = res.data.data.recommendList;
      state.swiperList = res.data.data.swiperList;
      state.weekendList = res.data.data.weekendList;
    });