Vue2.X项目超简单整合Axios并使用

记录一下通用的Vue项目超简单整合Axios，复制粘贴代码后npm run serve或npm start，如控制台提示缺少依赖包，npm导入一下即可。

src/api/request.js

import axios from 'axios';
// import Nprogress from 'nprogress'
// import 'nprogress/nprogress.css'
import {
    ElMessage } from 'element-plus'

/**
 * 注意：
 * 由于项目部署到 Nginx 反向代理服务器，Nginx 默认超时时间为 60秒 * 2 （即 proxy_connect_timeout 默认超时时间的 60 秒 + proxy_read_timeout 默认超时时间的 60 秒），
 * 因此需要设置 Nginx 的 proxy_connect_timeout 和 proxy_read_timeout 超时配置，axios 的 timeout 才可起作用。
 * 另外，proxy_connect_timeout 不能超过 75 秒，此配置不是等待后端返回页面的时间，而 proxy_read_timeout 才是声明等待后端返回页面的时间的配置。
 */
const http = axios.create({
   
  baseURL: '/loveProject/api/',
  timeout: 3800 * 1000,
})

const NETWORK_ERROR = '网络错误，请联系开发人员'

/**
 * 请求拦截器
 */
http.interceptors.request.use((req) => {
   
  console.log('请求拦截器 =>', req)
  Nprogress.start()
  return req;
}, (error) => {
   
  Nprogress.done()
  return Promise.reject(error);
});

/**
 * 响应拦截器
 */
http.interceptors.response.use(function (res) {
   
  console.log('响应拦截器 =>', res)
  Nprogress.done()
  const {
   code, data, msg} = res.data
  if (code == 200) {
   
    return data
  } else {
   
    ElMessage.error((msg || NETWORK_ERROR))
    return Promise.reject(msg || NETWORK_ERROR)
  }
});

export default http

src/api/User/index.js

import http from '../request'

export default {
   
  /**
   * 根据userId查询用户
   * @param {*} userId 
   * @returns 
   */ 
  getUserById(userId) {
   
    return http.get(`https://***.com/zhiquan181/api/getUserById?userId=${
     userId}`)
  },

  /**
   * 查询所有用户
   * @returns 
   */ 
  getUsers() {
   
    return http.get(`/getUsers`)
  },

  /**
   * 保存用户信息
   * @param {*} data 
   * @returns 
   */
  saveJobRerunInfo(data) {
   
    return http({
   
      method: "POST",
      url: `https://***.com/zhiquan181/api/saveUserInfo`,
      headers: {
   
        "Content-Type": "application/json"
      },
      data
    })
  }
}

src/api/index.js

import Vue from 'vue'
import userApi from './User/index'
import axios from 'axios'

Vue.prototype.$http = {
   
  ...userApi,
}

Vue.prototype.$axios = axios

src/main.js

import Vue from 'vue'
import App from './App.vue'
import './utils/elementui'
import router from './router'
import store from './store'
import './api/index'
import './assets/less/public.css'
import './utils/moment'
import './assets/theme/index.css'
import moment from 'moment'
Vue.config.productionTip = false
Vue.prototype.$moment = moment;

new Vue({
   
  router,
  store,
  render: h => h(App)
}).$mount('#app')

vue.config.js

const CompressionPlugin = require('compression-webpack-plugin')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const vConsolePlugin = require('vconsole-webpack-plugin')

module.exports = {
   
  outputDir: "static",// 定义打包目录，全局可访问
  publicPath: "/zhiquan181",// 定义公共地址，全局可访问
  lintOnSave: true,
  productionSourceMap: false,
  configureWebpack: (config) => {
   
    config.externals = {
   
      'vue': 'Vue',
      'element-ui': 'ELEMENT',
      'vue-router': 'VueRouter',
      'vuex': 'Vuex',
      'axios': 'axios',
      "moment": "moment"
    }

    /**
     * 压缩模块，针对于生产环境
     */
    const pluginsPro = [
      new CompressionPlugin({
    // 文件开启Gzip，也可以通过服务端(如：nginx)
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
        threshold: 10240,// 对超过10k的数据压缩
        minRatio: 0.8// 只有压缩率小于这个值的资源才会被处理
      }),
      new BundleAnalyzerPlugin()
    ];

    /**
     * 调试模块，针对于开发环境
     */
    const pluginsDev = [
      new vConsolePlugin({
   
        filter: [], // 需要过滤的入口文件
        enable: false // 发布代码前记得改回 false
      })
    ];

    if (process.env.NODE_ENV === 'production') {
   
      // 生产环境，启用压缩
      config.plugins = [...config.plugins, ...pluginsPro];
    } else {
   
      // 开发环境，启用调试
      config.plugins = [...config.plugins, ...pluginsDev];
    }
  },
  devServer: {
   
    open: true,
    overlay: {
   
      warnings: false,
      errors: true
    },
    hotOnly: false,
    proxy: {
   
      "/": {
   
        target: 'http://0.0.0.0:8080/',// 服务器地址
        changeOrigin: true,
        secure: false,
        ws: true
      }
    }
  }
}

src/view/App.vue

created() {
   
    this.getUserById(10001);
},
methods: {
   
    async getUserById(userId) {
   
        const res = await this.$http.getUserById(userId);
        if (res.success) {
   
            this.$message({
   
              message: res.msg,
              type: "success",
            });
        } else {
   
            this.$message({
   
              message: res.msg,
              type: "warning",
            });
        }
    }
}

顺便附上单独使用Axios的 Get 和 Post 两种方式

// get
axios.get(
  url, 
  {
   
    params:{
   },
    headers : {
   
      'auth-token': sessionStorage.getItem('auth-token')
    }
  }
)
.then((res) => {
   
  console.log('get =>', res);
}).catch(err =>{
   
  console.error(err)
})

// post
axios.post(
  url,
  data,
  {
   
    headers: {
   
      'Content-Type': 'application/json',
    },
  }
)
.then((res) => {
   
  console.log('post =>', res)
}).catch(err =>{
   
  console.error(err)
})