request----------接口的写法
1.request.js文件
import axios from 'axios'
import Cookies from 'js-cookie'
import { Message, Notification, Loading } from 'element-ui'
// import store from '@/store'
// import { getToken } from '@/utils/auth'
// 开始加载动画
let loading
function startLoading() {
loading = Loading.service({
lock: true, // 是否锁定
text: '正在交互...', // 加载中需要显示的文字
background: 'rgba(0,0,0,.7)'// 背景颜色
})
}
// 结束加载动画
function endLoading() {
loading.close()
}
// create an axios instance
const service = axios.create({
// baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
// timeout: 5000 // request timeout
})
// request interceptor
service.interceptors.request.use(
// 遮挡曾关
// Loading.service({ fullscreen: true }),
config => {
// do something before request is sent
// if (config.method === 'post') {
// config.data = config.params
// config.params = {}
// }
startLoading()
if (localStorage.getItem('token') || Cookies.get('token')) {
// let each request carry token
// ['X-Token'] is a custom headers key
// please modify it according to the actual situation
config.headers['api_key'] = localStorage.getItem('token').length > 20 ? localStorage.getItem('token') : Cookies.get('token')
// return
}
return config
},
error => {
// do something with request error
// console.log(error) // for debug
return Promise.reject(error)
}
)
// response interceptor
service.interceptors.response.use(
/**
* If you want to get http information such as headers or status
* Please return response => response
*/
/**
* Determine the request status by custom code
* Here is just an example
* You can also judge the status by HTTP Status Code
*/
// 遮挡曾关
// Loading.service({ fullscreen: false }),
response => {
endLoading()
const res = response.data
// console.log(res)
// if the custom code is not 20000, it is judged as an error.
if (res.code !== 0 || res.code !== 200) {
if (res.warr === true) {
Notification({
title: '警告',
message: res.warrmsg,
type: 'warning'
})
}
return res
} else {
Message({
message: res.msg || 'Error',
type: 'error',
duration: 5 * 1000
})
return Promise.reject(new Error(res.msg || 'Error'))
}
},
error => {
endLoading()
console.log('err' + error) // for debug
Message({
message: error.msg,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default service
2.公用base地址的引入
1.ApiConfig
window.ApiConfig ={
base: "http://xxxxxxxxx.xxxx.xxx:xxxx/",//业务地址
sys:'http://xxx.xx.xxx.xxx:xxxxx/xxxxx/',
ykbase:'http://xxx.xx.xxx.xxx:xxxxx/xxxxx/',// 各模块管理
srm_java_wf: "http://xxx.xx.xxx.xxx:xxxxx/xxxxx/", //工作流地址
}
2------1.可以直接引入
// 可以直接引入
const base3 = window.ApiConfig.srm_java_wf
or2------2.request引入
写在【vue.config.js】文件内
'use strict'
const path = require('path')
const defaultSettings = require('./src/settings.js')
function resolve(dir) {
return path.join(__dirname, dir)
}
const name = defaultSettings.title || 'vue Element Admin' // page title
// If your port is set to 80,
// use administrator privileges to execute the command line.
// For example, Mac: sudo npm run
const port = 9527 // dev port // 端口号
// All configuration item explanations can be find in https://cli.vuejs.org/config/
module.exports = {
/**
* You will need to set publicPath if you plan to deploy your site under a sub path,
* for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
* then publicPath should be set to "/bar/".
* In most cases please use '/' !!!
* Detail: https://cli.vuejs.org/config/#publicpath
*/
publicPath: './',
outputDir: 'dist',
assetsDir: 'static',
lintOnSave: process.env.NODE_ENV === 'development',
productionSourceMap: false,
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
}
// proxy: {
// // change xxx-api/login => mock/login
// // detail: https://cli.vuejs.org/config/#devserver-proxy
// [process.env.VUE_APP_BASE_API]: {
// target: `http://127.0.0.1:${port}/mock`,
// changeOrigin: true,
// pathRewrite: {
// ['^' + process.env.VUE_APP_BASE_API]: ''
// }
// }
// },
// after: require('./mock/mock-server.js')
},
configureWebpack: {
// provide the app's title in webpack's name field, so that
// it can be accessed in index.html to inject the correct title.
externals: {
// 此处引号中的urlConfig必须和window.urlConfig一致
urlConfig: 'ApiConfig' // ❤❤❤❤❤❤
},
name: name,
resolve: {
alias: {
'@': resolve('src')
}
}
},
chainWebpack(config) {
config.plugins.delete('preload') // TODO: need test
config.plugins.delete('prefetch') // TODO: need test
// set svg-sprite-loader
config.module
.rule('svg')
.exclude.add(resolve('src/icons'))
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()
// set preserveWhitespace
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
options.compilerOptions.preserveWhitespace = true
return options
})
.end()
config
// https://webpack.js.org/configuration/devtool/#development
.when(process.env.NODE_ENV === 'development',
config => config.devtool('cheap-source-map')
)
config
.when(process.env.NODE_ENV !== 'development',
config => {
config
.plugin('ScriptExtHtmlWebpackPlugin')
.after('html')
.use('script-ext-html-webpack-plugin', [{
// `runtime` must same as runtimeChunk name. default is `runtime`
inline: /runtime\..*\.js$/
}])
.end()
config
.optimization.splitChunks({
chunks: 'all',
cacheGroups: {
libs: {
name: 'chunk-libs',
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: 'initial' // only package third parties that are initially dependent
},
elementUI: {
name: 'chunk-elementUI', // split elementUI into a single package
priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
},
commons: {
name: 'chunk-commons',
test: resolve('src/components'), // can customize your rules
minChunks: 3, // minimum common number
priority: 5,
reuseExistingChunk: true
}
}
})
config.optimization.runtimeChunk('single')
}
)
}
}
【使用】
const urlConfig = require('urlConfig')
const base = urlConfig.ykbase
3.post、get接口
import request from '@/utils/request'
/* 费用申请************************************************************** */
const urlConfig = require('urlConfig')
const base = urlConfig.ykbase
export default {
// 费用申请-主页-查询列表接口
fyPagingQuery(para) {
return request({
url: `${base}FYSQ/fysq/pagingQuery`,
method: 'post',
data: para
})
},
// 费用申请-编辑--保存
fyPreservation(para) {
return request({
url: `${base}FYSQ/fysq/preservation`,
method: 'post',
data: para
})
},
// 费用申请删除
fyDeletion(para) {
return request({
url: `${base}FYSQ/fysq/deletion`,
method: 'post',
data: para
})
},
// 编辑
fyEditQuery(query) {
return request({
url: `${base}FYSQ/fysq/editQuery`,
method: 'get',
params: query
})
},
// 费用类型
fyGetFxlx(query) {
return request({
url: `${base}FYSQ/fysq/getFxlx`,
method: 'get',
params: query
})
}
}
4.全局注册:使用时this.api.xxxxx(xx)
使用reuest方法的接口卸载了modules文件里,如下图所示
上图的index.js文件
index.js
/**
* './modules/':要读取的文件夹
* true:是否读取子目录,不读取设置false
* /\.js$/ 匹配.js类型的文件
* files:获取的api集合
*/
const files = require.context('./modules/', true, /\.js$/)
let apiMaps = {}
files.keys().forEach(key => {
apiMaps = Object.assign(apiMaps, files(key).default)
// modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
})
export default apiMaps
然后写入main.js文件里进行全局注册
import api from './api/index'
Vue.prototype.api = api1
如下图:
使用方法:
this.api.XXXXX(query).then(res => {...})
this.api.XXXXXXXX().then(res => {...})