Vue axios 封装

公司项目要求用H5写 作为一个iOS菜鸟搞起来啊，首先是搭建项目框架，项目框架直接用vue-cli搭建好，接下来是网络请求的封装，之前写过一个小项目网络请求用的vue-resource 后来看到尤雨溪大神推荐用Axios 再网上看了很多网络请求的封装，都不是很满意，最后总结了一下封装了一个网络请求

首先创建一个网络请求的Js文件

// 引入axios
import axios from 'axios'
// 这里是我在token过期的情况 调用原生的登录方法
var jsbridge = require('../../static/js/jsbridge.js')
var Rxports = {
  ajax: function (opt) {
    var opts = opt || {}
    if (!opts.url) {
      return false
    }
    var token = sessionStorage.getItem('token')
    axios({
      // 请求方式
      method: opts.type || 'post',
      // 请求url
      url: opts.url,
      // 请求参数
      params: opts.data || {},
      // 请求头
      headers: opts.headers || {
        'Content-Type': 'application/json',
        'X-Requested-With': 'XMLHttpRequest',
        'source': 'ios',
        'token': token
      },
      // 请求超时时间
      timeout: opts.time || 10 * 1000,
      responseType: opts.dataType || 'json'
    }).then(function (res) {
      // 下面的是根据业务需求做的处理
      if (res.data.code === 'ACK') {
        if (opts.success) {
          opts.success(res.data.data, res)
        } else {
          opts.error('网络请求错误，请稍后再试', res)
        }
      } else if (res.data.code === 'BUSINESS_ERROR') {
        if (opts.error) {
          opts.error(res.data.message, res)
        } else {
          opts.error('网络请求错误，请稍后再试', res)
        }
      } else if (res.data.code === 'NACK') {
        if (opts.error) {
          opts.error(res.data.message, res)
        } else {
          opts.error('网络请求错误，请稍后再试', res)
        }
      }
    }).catch(function (error) {
      // token过期的情况调用原生方法
      if (error.response.data.code === 'UNAUTHORIZED') {
        jsbridge.setupWebViewJavascriptBridge(function (bridge) {
          bridge.callHandler('goLogin', function (response) {
          })
        })
        sessionStorage.removeItem('token')
      } else {
        if (opts.error) {
          opts.error(error, error)
        } else {
          opts.error('网络请求错误，请稍后再试', error)
        }
      }
    })
  }
}
export default Rxports

最后使用方法

import api from '../fetch/api'
api.ajax({
  'type': 'post',
   'url': '', // 请求url
   'params': {
     // 请求参数
    },
    'success': function (data) {
     // 请求成功处理
    },
    'error': function (error) {
     // 错误原因提示
      Toast(error)
    }
 })

这么看起来，也是挺简单的