node最佳实践2-支持axios

axios拦截器可以用于api请求的错误处理，包括请求拦截和响应拦截。axios既可以用着前端项目也可以用在node后端项目中。

安装axios npm install axios

安装qs npm install qs

新建src/libs/axios.js和src/libs/api.request.js

// src/libs/axios.js
import axios from 'axios'

class HttpRequest {
  constructor (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 }
        }
      }
      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

这部分主要是输出了HttpRequest这个类，里面包含request请求方法。request方法返回的其实是这一步封装拦截器和baseurl的axios实例。

baseurl是从下面这里来的src/libs/api.request.js:

// src/libs/api.request.js
import HttpRequest from './axios'
import config from '../config'
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.prod

const axios = new HttpRequest(baseUrl)
export default axios

// src/config/index.js
export default {
  baseUrl: {
    dev: 'http://www.xxxx/',  // 测试服务器
    prod: 'http://www.xxxx/'  // 正式服务器
  }
}

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'
  })
}

新建一个api文件夹，用来放api，server/node_api/src/api/users.js

import express from 'express'
import axios from '../libs/api.request'
import qs from 'qs'
/**
 * 登陆
 */
export const login = (data) => {
  return axios.request({
    url: 'hdapi/admin/login',
    method: 'post',
    data: qs.stringify(data)
  })
}

/**
 * 登陆
 */
export const getUserInfo = (query) => {
  return axios.request({
    url: 'hdapi/admin/queryUserByToken',
    method: 'get',
    params: query
  })
}

现在开始用usersRouter了。编辑server/node_api/src/app.js新增

import usersRouter from './routes/users'
...
app.use('/users', usersRouter)

编辑server/node_api/src/routes/users.js，把controller操作写在这里面

import express from 'express'
import { login, getUserInfo } from '../api/users'

var router = express.Router()

router.post('/login', (req, res, next) => {
  login({user_name: 'admin', user_pwd: '666'}).then(result => {
    const {result: { data: { data: {user, token }}}} = {result}
    console.log('token',token)
    res.send({
      token,
      user
    })
  })
})

export default router

用apifox访问一下localhost:3000/users/login，程序会访问baseurl配置好的路径，并且返回数据。