vue项目中api接口管理总结

import Vue from 'vue'import axios from 'axios'import qs from 'qs'import { Message, Loading } from 'element-ui'// 响应时间axios.defaults.timeout = 5 * 1000// 配置cookie// axios.defaults.withCredentials = true// 配置请求头axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'// 静态资源Vue.prototype.$static = ''// 配置接口地址axios.defaults.baseURL = ''var loadingInstance// POST传参序列化(添加请求拦截器)axios.interceptors.request.use( config => {  loadingInstance = Loading.service({   lock: true,   text: '数据加载中，请稍后...',   spinner: 'el-icon-loading',   background: 'rgba(0, 0, 0, 0.7)'  })  if (config.method === 'post') {   config.data = qs.stringify(config.data)  }  return config }, err => {  loadingInstance.close()  Message.error('请求错误')  return Promise.reject(err) })// 返回状态判断(添加响应拦截器)axios.interceptors.response.use( res => {  if (res.data.code === 200) {   loadingInstance.close()   return res  } else {   loadingInstance.close()   Message.error(res.data.msg)  } }, err => {  loadingInstance.close()  Message.error('请求失败，请稍后再试')  return Promise.reject(err) })// 发送请求export function post (url, params) { return new Promise((resolve, reject) => {  axios   .post(url, params)   .then(    res => {     resolve(res.data)    },    err => {     reject(err.data)    }   )   .catch(err => {    reject(err.data)   }) })}export function get (url, params) { return new Promise((resolve, reject) => {  axios   .get(url, {    params: params   })   .then(res => {    resolve(res.data)   })   .catch(err => {    reject(err.data)   }) })}

api1.jsimport { post } from '../axiosconfig/'export default {  login(params) {    return post('/users/api/login', params)  }}api2.jsimport { post } from '../axiosconfig/'export default {  regist(params) {    return post('/users/api/regist', params)  }}index.jsimport user from './api1.js'import active from './api2.js'export default { api1, api2}

import api from './api/'Vue.prototype.$api = api

登录组件中doLongin() { let params={} this.$api.api1.login(params).then(res => {  console.log(res) })}注册组件中doRegist() { let params={} this.$api.api2.regist(params).then(res => {  console.log(res) })}