Vue接口封装的示例分析

这篇文章主要介绍了Vue接口封装的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

首先根据接口写好对应页面的请求

内容如图尽量保证js文件名称与页面文件名称相同（易于查找）

根据文件目录动态引入/导出接口

提高便捷性

 const modulesFiles = require.context(    './', // 在当前目录下查找    false, // 不遍历子文件夹    /\.js$/ // 正则匹配 以 .js结尾的文件) const modules = modulesFiles.keys().reduce((modules, modulePath) => {   const moduleName = modulePath.replace(/^.\/(.*)\.js/,'$1')   const value = modulesFiles(modulePath)   modules[moduleName] = value.default   return modules   }, {})export default modules

根据项目情况编写拦截/插入内容

import axios from 'axios'import { MessageBox, Message } from 'element-ui'import store from '@/store'import { getToken } from '@/utils/auth'// create an axios instanceconst service = axios.create({  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url  // withCredentials: true, // send cookies when cross-domain requests  timeout: 5000 // request timeout})// request interceptorservice.interceptors.request.use(  config => {    // 在发送请求之前做些什么    if (store.getters.token) {      // let each request carry token让每个请求携带令牌      // ['X-Token'] is a custom headers key 是一个自定义键      // please modify it according to the actual situation请根据实际情况修改      config.headers['X-Token'] = getToken()    }    return config  },  error => {    // do something with request error    console.log(error) // for debug    return Promise.reject(error)  })// response interceptorservice.interceptors.response.use(      response => {    const res = response.data    // console.log(res);    // 如果自定义代码不是20000，则判断为错误.    if (res.code !== 200) {      Message({        message: res.message || 'Error',        type: 'error',        duration: 5 * 1000      })            // 50008: 非法token; 50012: 其他客户端已登录; 50014: Token 已过期;      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {        // to re-login        MessageBox.confirm('您已注销，可以取消以停留在此页面，或重新登录', '确认注销', {          confirmButtonText: 'Re-Login',          cancelButtonText: 'Cancel',          type: 'warning'        }).then(() => {          store.dispatch('user/resetToken').then(() => {            location.reload()          })        })      }      return Promise.reject(new Error(res.message || 'Error'))    } else {      return res    }  },  error => {    console.log('err' + error) // for debug    Message({      message: error.message,      type: 'error',      duration: 5 * 1000    })    return Promise.reject(error)  })export default service

编写env文件

# just a flagENV = 'development'# base apiVUE_APP_BASE_API = 'http://192.168.2.44:5001/v1'

vue继承api

import serve from './api/index'Vue.prototype.$api = serve;

使用

getAssetsList() {  this.$api.assets    .getAssetsList(this.queryInfo.num, this.queryInfo.size)    .then((res) => {      this.assetsList = res.data.cards      this.total = res.data.page.totalCount    })    .catch(() => {      this.$message.error({        message: "失败",        duration: 700,      })    })},

vue是什么

Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

感谢你能够认真阅读完这篇文章，希望小编分享的“Vue接口封装的示例分析”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网行业资讯频道，更多相关知识等着你来学习!