封装 axios

Vue 项目中使用 axios：

在 main.js 中引入 axios：

import axios from 'axios'
Vue.prototype.axios = axios

第一种：只封装统一的 url

• 在 api.js 文件中：

// export const baseUrl = 'http://xxx.xx.xx.xxx:1224/api/v1'
export const baseUrl = '/apis/index.php/api/v1'

export const register = baseUrl + '/che' //注册

• 在 vue.config.js 中

const path = require('path')

module.exports = {
  // publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'assets',

  devServer: {
    host: 'localhost',
    port: 8888,
    proxy: {
      '/apis': {
        target: 'http://xxx.xx.xx.xxx:1224', // target host
        ws: true, // proxy websockets
        changeOrigin: true, // needed for virtual hosted sites
        pathRewrite: {
          '^/apis': '/' // rewrite path
        }
      }
    }
  }
}

使用：
正常请求方式：

this.axios
  .post(selectClientNotes, {
    kid: this.dynamicId,
    page: this.dynamicPage
  })
  .then((res) => {
    if (res.data.status_code === 200) {
      this.gridData = res.data.data
      this.dynamicCount = res.data.count
    }
  })

file 文件格式传输

let formData = new FormData()
formData.append('excel', file.file)

this.axios
  .post(importClient, formData, {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  })
  .then((res) => {
    if (res.data.status_code === 200) {
      this.$message.success(res.data.msg)
    } else {
      this.$message.error(res.data.msg)
    }
  })

第二种：封装请求方法

• 在 util 文件夹下的定义 request.js 文件，封装请求方式

import axios from 'axios'

//统一请求路径前缀
let base = process.env.NODE_ENV == 'development' ? '/apis/sxt' : 'http://xxx.xx.xxx.xx:8080/sxt' //测试

export const getRequest = (url, params) => {
  return axios({
    method: 'get',
    url: `${base}${url}`,
    params: params
  })
}

// 登录状态下 (用)
export const getTokenRequest = (url, params) => {
  let accessToken = sessionStorage.getItem('token')
  return axios({
    method: 'get',
    url: `${base}${url}`,
    params: params,
    headers: {
      jwt: accessToken
    }
  })
}

//使用form格式传参数
export const postRequest = (url, params) => {
  return axios({
    method: 'post',
    url: `${base}${url}`,
    data: params,
    transformRequest: [
      function(data) {
        let ret = ''
        for (let it in data) {
          ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
        }
        return ret
      }
    ],
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  })
}

export const postJsonRequest = (url, params) => {
  return axios({
    method: 'post',
    url: `${base}${url}`,
    data: params,
    headers: {
      'Content-Type': 'application/json'
    }
  })
}

//使登录状态下 form格式传 （用）
export const postTokenRequest = (url, params) => {
  let accessToken = sessionStorage.getItem('token')
  return axios({
    method: 'post',
    url: `${base}${url}`,
    data: params,
    transformRequest: [
      function(data) {
        let ret = ''
        for (let it in data) {
          ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
        }
        return ret
      }
    ],
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
      jwt: accessToken
    }
  })
}

// 登录状态下，Json 格式传 （用）
export const postTokenJsonRequest = (url, params) => {
  let accessToken = sessionStorage.getItem('token')
  return axios({
    method: 'post',
    url: `${base}${url}`,
    data: params,
    headers: {
      'Content-Type': 'application/json',
      jwt: accessToken
    }
  })
}

// 品牌商：批量导入供应商
export const postUploadRequest = (url, params) => {
  let accessToken = sessionStorage.getItem('token')
  return axios({
    method: 'post',
    url: `${base}${url}`,
    data: params,
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
      jwt: accessToken
    }
  })
}

// 文件上传格式 post请求
export const postUploadMethod = (url, params) => {
  return axios({
    method: 'post',
    url: `${base}${url}`,
    data: params,
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  })
}

//请求图片流
export const postImageFlow = (url, params) => {
  return axios({
    method: 'post',
    url: `${base}${url}`,
    data: params,
    responseType: 'arraybuffer',
    transformRequest: [
      function(data) {
        let ret = ''
        for (let it in data) {
          ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
        }
        return ret
      }
    ],
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  })
}

• api 文件夹下 index.js

//统一请求路径前缀在 utils/request.js中修改
const { getRequest, getTokenRequest, postRequest, postJsonRequest, postTokenRequest, postTokenJsonRequest, postUploadRequest, postUploadMethod, postImageFlow } = require('../utils/request')

// 用户注册
export const registerSubmit = (params) => {
  return postRequest('/brand/login/registerSubmit.jhtml', params)
}
export const getBrandOrSupplier = (params) => {
  return getTokenRequest('/brand/login/getBrandOrSupplier.jhtml', params)
}

• vue.config.js 文件

const path = require('path')
const CompressionPlugin = require('compression-webpack-plugin')
module.exports = {
  publicPath: './',
  devServer: {
    host: '127.0.0.1',
    port: 8089,
    proxy: {
      '/apis': {
        target: 'http://xxx.xx.xxx.xx:8080', // target host
        ws: true, // proxy websockets
        changeOrigin: true, // needed for virtual hosted sites
        pathRewrite: {
          '^/apis': '/' // rewrite path
        }
      }
    }
  },
  //打包时不生成 .map 文件，避免看到源码
  productionSourceMap: false,
  //部署优化
  configureWebpack: {
    // //使用CDN : 决定的是以哪种模式去加载所引入的额外的包
    // externals: {
    //   vue: 'Vue',
    //   axios: 'axios',
    //   'vue-router': 'VueRouter',
    //   vuex: 'Vuex',
    //   ElementUI: 'ElementUI'
    // },

    // GZIP压缩 : 很大程度减少包的大小，非常适合于上线部署
    plugins: [
      new CompressionPlugin({
        test: /\.js$|\.html$|\.css/, // 匹配文件
        threshold: 10240 // 对超过10k文件压缩
      })
    ]
  }
}