axios拦截器
参考iview-admin项目所得
拦截器可以用于api请求的错误处理,包括请求拦截和响应拦截。axios既可以用着前端项目也可以用在node后端项目中,所以把这套移植过来。
前端项目可以在lib下创建api.request.js
和axios.js
文件夹src/libs/axios.js
import axios from 'axios'
import store from '@/store'
// import { Spin } from 'iview'
const addErrorLog = errorInfo => {
const { statusText, status, request: { responseURL } } = errorInfo
let info = {
type: 'ajax',
code: status,
mes: statusText,
url: responseURL
}
if (!responseURL.includes('save_error_logger')) store.dispatch('addErrorLog', info)
}
class HttpRequest {
constructor (baseUrl = baseURL) {
this.baseUrl = baseUrl
this.queue = {}
}
getInsideConfig () {
const config = {
baseURL: this.baseUrl,
headers: {
//
}
}
return config
}
destroy (url) {
delete this.queue[url]
if (!Object.keys(this.queue).length) {
// Spin.hide()
}
}
interceptors (instance, url) {
// 请求拦截
instance.interceptors.request.use(config => {
// 添加全局的loading...
if (!Object.keys(this.queue).length) {
// Spin.show() // 不建议开启,因为界面不友好
}
this.queue[url] = true
return config
}, error => {
return Promise.reject(error)
})
// 响应拦截
instance.interceptors.response.use(res => {
this.destroy(url)
if (res.status === 200) {
const { data, status } = res
return { data, status }
}
}, error => {
this.destroy(url)
let errorInfo = error.response
if (!errorInfo) {
const { request: { statusText, status }, config } = JSON.parse(JSON.stringify(error))
errorInfo = {
statusText,
status,
request: { responseURL: config.url }
}
}
addErrorLog(errorInfo)
return Promise.reject(error)
})
}
request (options) {
const instance = axios.create()
options = Object.assign(this.getInsideConfig(), options)
this.interceptors(instance, options.url)
return instance(options)
}
}
export default HttpRequest
addErrorLog是添加错误日志的方法,可不关注,这部分主要是输出了HttpRequest这个类,里面包含request请求方法。request方法返回的其实是这一步封装拦截器和baseurl的axios实例。
baseurl是从下面这里来的src/libs/api.request.js:
import HttpRequest from '@/libs/axios'
import config from '@/config'
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
const axios = new HttpRequest(baseUrl)
export default axios
baseurl的作用是,如果配置了这个值,那么请求接口的时候会把baseurl的值添加在请求url的前面,实际使用方法如下src/api/user.js
:
import axios from '@/libs/api.request'
export const login = ({ userName, password }) => {
const data = {
userName,
password
}
return axios.request({
url: 'login',
data,
method: 'post'
})
}
proxy代理
需要注意的是,vue使用了代理,那么要把baseurl设置为' '
,否则代理不成功。vue.config.js
代码中有注释提到
const path = require('path')
const resolve = dir => {
return path.join(__dirname, dir)
}
// 项目部署基础
// 默认情况下,我们假设你的应用将被部署在域的根目录下,
// 例如:https://www.my-app.com/
// 默认:'/'
// 如果您的应用程序部署在子路径中,则需要在这指定子路径
// 例如:https://www.foobar.com/my-app/
// 需要将它改为'/my-app/'
// iview-admin线上演示打包路径: https://file.iviewui.com/admin-dist/
const BASE_URL = process.env.NODE_ENV === 'production' ?
'/' :
'/'
module.exports = {
// Project deployment base
// By default we assume your app will be deployed at the root of a domain,
// e.g. https://www.my-app.com/
// If your app is deployed at a sub-path, you will need to specify that
// sub-path here. For example, if your app is deployed at
// https://www.foobar.com/my-app/
// then change this to '/my-app/'
baseUrl: BASE_URL,
// tweak internal webpack configuration.
// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
// 如果你不需要使用eslint,把lintOnSave设为false即可
lintOnSave: false,
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('src')) // key,value自行定义,比如.set('@@', resolve('src/components'))
.set('_c', resolve('src/components'))
.set('_v', resolve('src/view/components'))
},
// 设为false打包时不生成.map文件
productionSourceMap: false,
// 这里写你调用接口的基础路径,来解决跨域,如果设置了代理,那你本地开发环境的axios的baseUrl要写为 '' ,即空字符串
// devServer: {
// proxy: 'localhost:3000'
// }
devServer: {
// open: process.platform === 'darwin',
//将服务启动后默认打开浏览器
open: true,
host: '0.0.0.0',
port: 8090,
https: false,
hotOnly: false,
proxy: { // 设置代理
'/api': {
target: 'https://localhost:8090',
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
}
},
before: app => {}
},
}
后端也可以参考前端的axios来配置