优雅的使用axios发起请求

使用Vue开发必然少不了axios，现在就分享下自己对axios的封装，使用起来更优雅

API模块目录

便于开发、维护，讲api模块单独提取出来，分config.js配置文件与api模块文件夹

axios/
--|  config.js
--|  api/
----|  login.js

功能实现

config.js 文件（axios/目录）

// 引用axios
import axios from 'axios'

/**
 * [http request 请求之前拦截器]
 * 根据需求在config中添加对应的内容
 */
axios.interceptors.request.use(
  config => {
    config.headers.token = 'token123'
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

/**
 * [返回状态判断(添加响应拦截器)]
 * code == 200时then，否则catch
 * @return
 */
axios.interceptors.response.use(
  response => {
    if (response.data && esponse.data.code !== 200) {
      return Promise.reject(response)
    }
    return response
  },
  error => {
    if (error.response && error.response.status === 401) {
      // status === 401, 处理服务器返回错误码
    }
    return Promise.reject(error.response)
  }
)

/**
 * [deployUse 添加公共参数]
 * @param  {Obj} data 参数
 *               data.timestamp [时间戳]
 * @return {Obj}
 */
function deployUse(data = {}) {
  data.timestamp = new Date().getTime()
  return data
}

/**
 * [errorState 后台接口错误状态处理]
 */
function errorState(response) {
  if (response && (response.status === 200 || response.status === 304 || response.status === 400)) {
    return response.data
  } else {
    return {
      status: -404,
      msg: '网络异常'
    }
  }
}

/**
 * [配置axios]
 * @param  {Obj} opts 配置
 *               opts.method 请求方式 [*必填]
 *               opts.baseURL axios默认url
 *               opts.url 请求url [*必填]
 *               opts.headers 请求headers
 * @param  {Obj} data 请求数据
 * @return {Obj} res
 */
const timeout = 30 * 1000
const httpServer = (opts, data) => {
  // 设置默认headers
  let headers = {}
  // http默认配置
  let httpDefaultOpts = {
    method: opts.method, // 必填
    baseURL: opts.baseURL || process.env.VUE_APP_API,
    url: opts.url, // 必填
    timeout,
    headers: Object.assign(headers, opts.headers)
  }

  // 根据请求方式，提交参数
  if (opts.method === 'get') {
    httpDefaultOpts.params = deployUse(data)
  } else {
    httpDefaultOpts.data = deployUse(data)
  }

  // 使用Promise发起axios请求
  let promise = new Promise((resolve, reject) => {
    axios(httpDefaultOpts)
      .then(res => {
        resolve(res.data)
      })
      .catch(response => {
        errorState(response)
        reject(response)
      })
  })

  return promise
}

export default {
  httpServer
}

login.js 文件（axios/api/目录）

// 创建一个api示例
// 引用封装axios配置文件
import axiosApi from '@/axios/config'

/*
* 创建一个用户登录接口
* @param {Obj} params              接口参数
*/
export const userLogin = params => {
  return axiosApi.httpServer(
    {
      url: '/api/login',
      method: 'post'
    },
    params
  )
}

axios封装好了，并创建了一个接口实例！

使用示例

login.vue页面文件，在页面中引用api/login.js

import { userLogin } from '@/axios/api/login'

userLogin({
  username: 'test',
  pw: '111111'
}).then(res => {
  // 请求成功
}).catch(err => {
  // 请求失败
})

接口状态相关的已经在拦截器处理了，获取的数据可以放心大胆的使用，不用担心没有数据出现异常等情况了！