vue+node(express)做中间层开发二--使用axios

axios拦截器

拦截器可以用于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来配置