Vue二次封装axios为插件使用详解

case 502:
err.message = '网关错误'
break

case 503:
err.message = '服务不可用'
break

case 504:
err.message = '网关超时'
break

case 505:
err.message = 'HTTP版本不受支持'
break

default:
}
}
console.error(err)
// 此处我使用的是 element UI 的提示组件
// Message.error(`ERROR: ${err}`);
return Promise.reject(err) // 返回接口返回的错误信息
}
)

//请求处理
instance(options)
.then((res) => {
resolve(res)
return false
})
.catch((error) => {
reject(error)
})
})
}

interface.js

import axios from './api' // 倒入 api
/* 将所有接口统一起来便于维护
 * 如果项目很大可以将 url 独立成文件，接口分成不同的模块
 * 此处的数据依然来自 Easy Mock
 */
// 单独倒出
export const query = params => {
  return axios({
    url: '/query',
    method: 'get',
    params
  })
}
export const mock = params => {
  return axios({
    url: '/mock',
    method: 'get',
    params
  })
}
export const upload = data => {
  return axios({
    url: '/upload',
    method: 'post',
    data
  })
}
// 默认全部倒出
// 根绝需要进行
export default {
  query,
  mock,
  upload
}

index.js

封装成 Vue 插件，便（提）于（高）使（B）用（格）

// 倒入所有接口
import apiList from './interface'
const install = Vue => {
  if (install.installed)
    return;
  install.installed = true;
  Object.defineProperties(Vue.prototype, {
    // 注意哦，此处挂载在 Vue 原型的 $api 对象上
    $api: {
      get() {
        return apiList
      }
    }
  })
}
export default install

使用

到此为止，万事俱备就差用了，在 mian.js 中做如下操作：

// 倒入 http 文件夹下的 index.js
import api from './http/index'
Vue.use(api)
// 此时可以直接在 Vue 原型上调用 $api 了

总结

以上二次封装较为全面，基本完成了我们之前的需求
在错误的处理上还需要与后端协定好返回值，做具体的约定
封装回调有点多，在使用的时候也需要加上 then() 来处理结果，async & await 了解一下哟，好东西当然要藏起来，我才不会分享出来呢…