vue2.0 结合elementui封装的一个请求_vue2+elementui发送请求

confing/dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
 
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  //BASE_API: '"http://xxxxcom:8080"',
  BASE_API: '"http://xxxxx:8888"',
  API_VERSION: '"v2"'
})

axios/axios-config.js

import store from '../../store'
export default {
  serviceConfig: function () {
    return {
      // 基础url前缀
      baseURL: process.env.BASE_API,
      transformResponse: [function (response) {
        // 这里提前处理返回的数据
        return response
      }],
      // 是否跨域请求
      // withCredentials: true,
      // 请求头信息
      headers: {
        'Accept': 'application/json, text/plain, */*; charset=utf-8',
        'token': store.state.app.account.token
      },
      // 设置超时时间
      timeout: 30000,
      // 返回数据类型
      responseType: 'json'
    }
  }
}

axios/axios-service.js

import axios from 'axios'
import qs from 'qs'
import config from './axios-config'
import store from '../../store'
console.log(config);
 
import {
  MessageBox,
  Message,
  Loading
} from 'element-ui'
 
const loadingOption = {
  lock: true,
  fullscreen: false,
  text: '加载中...',
  spinner: 'el-icon-loading',
  background: 'rgba(0, 0, 0, 0.7)'
};
let loadObj;
 
axios.interceptors.request.use(function (config) {
  if (!window.LOADING_CLOSE) {
    loadObj = Loading.service(loadingOption)
  }
  return config
}, function (err) {
  console.log(err)
})
 
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  if (!window.LOADING_CLOSE) {
    loadObj.close()
  }
  const data = response.data
  if (data.code === '401' || data.code === '1001') {
    MessageBox.alert('登录信息过期，请重新登录', {
      confirmButtonText: '确定',
      showClose: false,
      callback: action => {
        // 删除用户信息
        store.dispatch('DeleteAccount').then(() => {
          window.location.reload()
        })
      }
    })
  } else {
    return response.data
  }
}, function (err) {
  if (!window.LOADING_CLOSE) {
    loadObj.close()
  }
  if (err && err.response) {
    switch (err.response.status) {
      case 400:
        err.message = '请求参数错误'
        break
      case 401:
        this.$store.dispatch('DeleteAccount')
        this.$router.push({
          path: '/'
        })
        err.message = '未授权，请登录'
        break
      case 403:
        err.message = '拒绝访问'
        break
      case 404:
        err.message = '请求地址出错'
        break
      case 408:
        err.message = '请求超时'
        break
      case 500:
        err.message = '服务器内部错误'
        break
      case 501:
        err.message = '服务未实现'
        break
      case 502:
        err.message = '网关错误'
        break
      case 503:
        err.message = '服务不可用'
        break
      case 504:
        err.message = '网关超时'
        break
      case 505:
        err.message = 'HTTP版本不受支持'
        break
      default:
    }
  }
  return Promise.reject(err)
})
export default {
  post: function (url, data, callback) {
    axios.post(url, data, config.serviceConfig())
      .then(callback)
      .catch(function (error) {
        Message({
          type: 'error',
          message: error
        })
      })
  },
  delete: function (url, data, callback) {
    const param = qs.stringify(data)
    axios.delete(url + '?' + param, config.serviceConfig())
      .then(callback)
      .catch(function (error) {
        Message({
          type: 'error',
          message: error
        })
      })
  },
  put: function (url, data, callback) {
    axios.put(url, data, config.serviceConfig())
      .then(callback)
      .catch(function (error) {
        Message({
          type: 'error',
          message: error
        })
      })
  },
  patch: function (url, data, callback) {
    axios.patch(url, data, config.serviceConfig())
      .then(callback)
      .catch(function (error) {
        Message({
          type: 'error',
          message: error
        })
      })
  },
  get: function (url, data, callback) {
    const param = qs.stringify(data)
    axios.get(url + '?' + param, config.serviceConfig())
      .then(callback)
      .catch(function (error) {
        Message({
          type: 'error',
          message: error
        })
      })
  },
  list: function (url, data, callback) {
    const param = qs.stringify(data)
    axios.post(url + '?' + param, data, config.serviceConfig())
      .then(callback)
      .catch(function (error) {
        Message({
          type: 'error',
          message: error
        })
      })
  },
  attach: function (url, string, data, callback) {
    const param = qs.stringify(string)
    axios.post(url + '?' + param, data, config.serviceConfig())
      .then(callback)
      .catch(function (error) {
        Message({
          type: 'error',
          message: error
        })
      })
  }
}

api/orders.js文件根据自己需要创建

import service from './axios/axios-service'
const module = 'admin'
const API_TODO_ROUTER = module + '/api/' + process.env.API_VERSION
 
 
const getById = function (data, callback) {
  service.list(API_TODO_ROUTER + '/saleOrder/getById', data, callback)
}
const getByNo = function (data, callback) {
  service.list(API_TODO_ROUTER + '/saleOrder/getByNo', data, callback)
}
 
 
const Orders = {
 
  getById: getById,
  getByNo: getByNo,
 
}
 
export default Orders

页面使用

import ordersApi from "@/api/orders";
 methods: {
 
 
 handleEdit(row) {
      ordersApi.getById({ id: row.id }, response => {
        if (response.code === "0000" && response.data) {
          this.$refs.orderDialog.open(0, response.data);
        } else {
          this.$message.error(response.msg);
        }
      });
    },
}