vue3简单封装axios

安装依赖

npm install axios --save
npm install qs --save

在项目目录中创建axios.js

import axios from "axios";
import qs from "qs";

// axios.defaults.baseURL = ''  //正式
axios.defaults.baseURL = 'http://127.0.0.1:8080' //测试地址，按需更改

//post请求头
axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=UTF-8";
//允许跨域携带cookie信息
axios.defaults.withCredentials = true;
//设置超时
axios.defaults.timeout = 15000;

axios.interceptors.request.use(
  config => {
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

axios.interceptors.response.use(
  response => {
    if (response.status === 200) {
      return Promise.resolve(response);
    } else {
      return Promise.reject(response);
    }
  },
  error => {

    window.alert(JSON.stringify(error), '请求异常', {
      confirmButtonText: '确定',
      callback: (action) => {
        console.log(action)
      }
    });
  }
);
export default {
  /**
   * @param {String} url
   * @param {Object} data
   * @returns Promise
   */
  post(url, data) {
    return new Promise((resolve, reject) => {
      axios({
        method: 'post',
        url,
        data: qs.stringify(data),
      })
        .then(res => {
          resolve(res.data)
        })
        .catch(err => {
          reject(err)
        });
    })
  },

  get(url, data) {
    return new Promise((resolve, reject) => {
      axios({
        method: 'get',
        url,
        params: data,
      })
        .then(res => {
          resolve(res.data)
        })
        .catch(err => {
          reject(err)
        })
    })
  }
};

在main.js中

import axios from './util/axios';
app.config.globalProperties.$axios = axios;

封装api使用

import axios from "./axios";
let {get, post } = axios
//get举例
 export const getCaptcha = data => get("/xxxx",data)

//POST
export const postModel = data => post("/xxxx",data)

在组建中调用api

import {getCaptcha, postModel} from "@/request/api"

// 放在函数，或者生命周期里
postModel({
 //data
}).then(res => {
  console.log(res)
})