封装axios并动态生成可修改的接口请求地址

2,072 阅读1分钟
axiosFn.js
import axios from './request.js'
import qs from 'qs';

export function getAjax(url, params = {}) {
  return new Promise((reslove, reject) => {
    axios.get(url, {
        params: params
      })
      .then(res => {
        reslove(res);
      })
      .catch(err => {
        if (err.response) {
          this.$message({
            type: 'error',
            message: err.response.data.message
          });
        }
        reject(err)
      })
  })
}
export function postAjax(url, params = {}) {
  return new Promise((reslove, reject) => {
    axios.post(url, params, {
        headers: {
          'Content-Type': 'application/json'
        }
      })
      .then(res => {
        reslove(res);
      })
      .catch(err => {
        if (err.response) {
          this.$message({
            type: 'error',
            message: err.response.data.message
          });
        }
        reject(err)
      })
  })
}
export function postAjaxS(url, params = {}) {
  return new Promise((reslove, reject) => {
    axios.post(url, qs.stringify(params), {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      })
      .then(res => {
        reslove(res);
      })
      .catch(err => {
        reject(err)
      })
  })
}
export function putAjax(url, params = {}) {
  return new Promise((reslove, reject) => {
    axios.put(url, qs.stringify(params), {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      })
      .then(res => {
        reslove(res);
      })
      .catch(err => {
        reject(err)
      })
  })
}
export function http(url, type, headers, params = {}) {
  return new Promise((reslove, reject) => {
    console.log(headers)
    axios({
      url: url,
      method: type,
      data: params,
      headers: {
        'Content-Type': headers
      },
    }).then(res => {
      reslove(res)
    }).catch(err => {
      if (err.response) {
        this.$message({
          type: 'error',
          message: err.response.data.message
        });
      }
      reject(err)
    })
  })
}
 request.js
     import axios from 'axios'
    import {
      Message,
    } from 'element-ui'
    // import store from '../store'
    // 创建axios实例
    const service = axios.create({
      // baseURL: process.env.BASE_API, // api的base_url
      baseURL: '',
      timeout: 60000 // 请求超时时间
    });
    if (process.env.NODE_ENV === 'development') {
      service.baseURL = ''
      // service.baseURL = ''
      console.log('开发环境')
      // 编译环境
    } else {
      // 测试环境
      if (process.env.type === 'test') {
        console.log('测试环境')
        // service.baseURL = ''
        // 正式环境
      } else {
        console.log('生产传经')
        // service.baseURL = ''
      }
    }
    // respone拦截器
    service.interceptors.response.use(
      response => {
        /**
         * code为非200是抛错 可结合自己业务进行修改
         */
        const res = response.data;
        // return res
        if (res.resultCode != 'success' && res.message) {
          Message.error(res.message);
        }
        return res
      },
      error => {
        return Promise.reject(error)
      }
    )
    export default service
main.js
    import {
      getAjax,
      postAjax,
      postAjaxS,
      putAjax,
      http
    } from './axios/axiosFn.js'
    Vue.prototype.$gAjax = getAjax;
    Vue.prototype.$pAjax = postAjax;
    Vue.prototype.$pSAjax = postAjaxS;
    Vue.prototype.$putAjax = putAjax;
    Vue.prototype.$http = http;
    //开发所需要的环境(打包需要注释以下的代码)
    Vue.prototype.ipQX = 'http://192.000.0.00:8080'; //设置成Vue的全局属性
    Vue.prototype.ipSB = 'http://192.000.0.00:8080'; //设置成Vue的全局属性
    Vue.prototype.ipSC = 'http://192.000.0.00:8080'; //设置成Vue的全局属性
    Vue.prototype.ipZL = 'http://192.000.0.00:8080'; //设置成Vue的全局属性
    Vue.prototype.ipAD = 'http://192.000.0.00:8080'; //设置成Vue的全局属性
    Vue.prototype.ipXJ = 'http://192.000.0.00:8080'; //设置成Vue的全局属性
    //打包所需要的(开发环境需要注释以下的代码)
    --------------------------------------------------------------------
    (以下开发环境注释)
    Vue.prototype.$gAjax('serverconfig.json').then((result) => {
    Vue.prototype.ipQX = result.data.ipQX; //设置成Vue的全局属性
    Vue.prototype.ipSB = result.data.ipSB; //设置成Vue的全局属性
    Vue.prototype.ipSC = result.data.ipSC; //设置成Vue的全局属性
    Vue.prototype.ipZL = result.data.ipZL; //设置成Vue的全局属性
    Vue.prototype.ipAD = result.data.ipAD; //设置成Vue的全局属性
    Vue.prototype.ipXJ = result.data.ipXJ; //设置成Vue的全局属性
    -----------------------------------------------------------------------
      new Vue({
        el: '#app',
        router,
        // store,
        components: {
          App
        },
        data() {
          return {
            Bus
          }
        },
        template: '<App/>'
      })
      (以上的部分开发环境也需要)
------------------------------------------------------------------------------------
    }).catch((error) => {
    //   console.log(error)
    })
    (开发环境注释)
----------------------------------------------------------------------------
 serverconfig.json(打包完后会有一个文件,修改端口时只需要在此文件里修改就可以) 
 {
      "data": {
        "ipQX": "http://192.000.0.00:8080",
        "ipSB": "http://192.000.0.00:8080",
        "ipSC": "http://192.000.0.00:8080",
        "ipZL": "http://192.000.0.00:8080",
        "ipAD": "http://192.000.0.00:8080",
        "ipXJ": "http://192.000.0.00:8080",
      }
    }