关于前端:vuenodeexpress做中间层开发二使用axios

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 来配置