axios在vue.js中的应用

介绍

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。也是vue.js作者推荐的库

实现功能

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF

浏览器支持

浏览器兼容性.png

项目中需要配置完成的功能

创建axios实例，统一配置实现如下功能

• axios本身的配置
  • 配置URL前缀
  • 超时时间
  • 跨域cookie
  • ...
• HTTPRequest拦截器
  • 调用加载信息
  • 请求头中加入身份验证Token
  • 针对 IE 浏览器 GET 请求缓存的处理
  • ... 其它业务代码
• HTTPResponse拦截器
  • 隐藏加载信息
  • 针对返回值统一处理
  • ....其它业务代码

具体封装代码如下：

其中部分业务代码已经被摘除，实现思路仅供参考

import axios from 'axios'
import store from '@/store'
import { Loading, Message, MessageBox } from 'element-ui'

// 加载顶部进度条
import NProgress from 'nprogress'
NProgress.configure({ showSpinner: false })

// 关闭nprogress和loading
function closeLoading () {
  NProgress.done()
  loadingService.close()
}

// 跨域请求，允许保存cookie
axios.defaults.withCredentials = true

// 创建axios实例、配置baseURL、超时时间
const service = axios.create({
  baseURL: process.env.VUE_APP_API_BASEURL, // 从环境进程中根据运行环境获取的api的base_url
  timeout: 50000 // 请求超时时间
})

let loadingService
/**
  * request拦截器
  * 发送请求前请求头中设置cookie
  */
service.interceptors.request.use(config => {
  NProgress.start()
  loadingService = Loading.service({
    lock: true,
    text: 'Loading',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.1)'
  })

  let token = store.getters.token
  if (token && token.access_token && Date.now() < token.expires_in) {
    // 让每个请求携带身份验证信息
    if (!config.headers['Authorization']) {
      config.headers['Authorization'] = `Bearer ${token.access_token}`
    }
  }

  // 判断如果是get请求增加随机数，防止IE浏览器缓存api请求
  if (config.method === 'get') {
    if (config.params && Object.keys(config.params).length > 0) {
      config.params['cache'] = new Date().getTime()
    } else {
      config = Object.assign({}, config, { params: { cache: new Date().getTime() } })
    }
  }
  return config
}, error => {
  console.error(error) 
  Promise.reject(error)
})

/**
  * respone拦截器
  * 通过response自定义code来标示请求状态，处理相应问题
  */
service.interceptors.response.use(
  response => {
    closeLoading()
    const { status }= response.data

    // 状态码：-1：未登录 /1：请求成功 /-2：请求失败 /-3：无权限 /-4：系统错误
    if (status === 1) {
      return response.data.data
    } else {
      let errorMessage = response.data.message
      switch (
        case -1:
          // 清除本地保存的Token
          // 跳转到登录页面
          break
        case -2:
          // 提示错误信息
          break
        default:
           // 提示错误信息
      }
      return Promise.reject(new Error(errorMessage))
    }
  },
  // 服务端错误
  error => {
    console.
    console.error('err' + error) // for debug
    return Promise.reject(error)
  }
)

export default service

调用过程

注意：在实例调用中传入的配置会覆盖上一步在构造函数 axios 上的配置

import request from '@/XXX/request.js'

/* 用户登录 */
export function loginByUsername (reqParams) {
  return request({
    // baseURL: '/api', 
    // headers: { },
    url: '/auth/oauth/token',
    method: 'post',
    params: reqParams
  })
}

有其他问题或更好思路，欢迎私信一起讨论。

参考文档