vue中对axios的全局封装

记录一下vue中对axios的封装， 以便于日后复制粘贴用，没有用vuex,没有进行模块化管理 ，有需要得可以说一下，抽空加上

下边上代码：

根目录建一个request文件夹，建一个http.js文件

因为是自己开发 所以api没用上 没有进行模块化管理

import axios from 'axios' // 引入axios
// import store from '../store/index' // 引入Vuex
// import router from '../router' // 引入vue-router
import { Message } from 'element-ui' //局部引入UI框架组件
import Qs from 'qs'
// 环境的切换
if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = '/api' // 开发环境   配置跨域了
  
} else if (process.env.NODE_ENV === 'debug') {
  axios.defaults.baseURL = '' // 调试环境
} else if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = '上线的地址' // 生产环境
}

// 请求超时时间
axios.defaults.timeout = 20000;

// 请求拦截器
axios.interceptors.request.use(
    config => {
      // console.log("请求数据",config.data)
        // const token = getCookie('名称');注意使用的时候需要引入cookie方法，推荐js-cookie
        if(config.method == "get"){
          if(sessionStorage.getItem("token")){
            config.params.tk = sessionStorage.getItem("token")
          }
        }
        if(config.method == "post"){
          if(sessionStorage.getItem("token")){
            config.data.tk = sessionStorage.getItem("token")
          }
        }
        // console.log("请求数据111",config.data)
        config.data = Qs.stringify(config.data);
        config.headers = {
          'Content-Type':'application/x-www-form-urlencoded'
        }
        // if(token){
        //   config.params = {'token':token}
        // }
        return config;
    },
    error => {
        return Promise.error(error)
    }
)

// 响应拦截器
axios.interceptors.response.use(
  // 服务码是200的情况
  response => {
    // console.log("这是返回",response.data.success)
    if (response.status === 200) {
        switch (response.data.success) {
            // 未登录
            case false:
            Message({
                message: response.data.message,
                type: 'error',
                offset:380,
                duration:1000
            });
            break;
        }
        return Promise.resolve(response);
    } else {
        return Promise.reject(response)
    }
  },
  // 服务器状态码不是200的情况
  error => {
    if (error.response.status) {
      switch (error.response.status) {
        // 404请求不存在
        case 404:
          Message({
            message: '网络请求不存在',
            type: 'error',
            offset:380,
            duration:1000
          });
          break;
        // 其他错误，直接抛出错误提示
        default:
          Message({
            message: error.response.data.message,
            type: 'error',
            offset:380,
            duration:1000
          });
      }
      return Promise.reject(error.response)
    }
  }
)

/**
 * get方法，对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 * @param {Object} config [请求时url后直接加的参数，默认为空]
 */
export function get(url, params,config = {add: '' }) {
  return new Promise((resolve, reject) => {
    axios.get(url,{
      params: params
    },config).then(res => {
      resolve(res.data)
    }).catch(err => {
      reject(err.data)
    })
  })
}
/**
 * post方法，对应post请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 * @param {Object} config [是否启用multipart/form-data格式请求，默认为false]
 */
export function post(url, params,config = {isUpload: false }) {
  return new Promise((resolve, reject) => {
    axios.post(url, params,config)
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err.data)
      })
  })
}

在main.js中引入：

import {get,post} from './request/http';
Vue.prototype.$get = get
Vue.prototype.$post = post

应用：

this.$post("地址",{
    参数
 }).then(res=>{
     console.log(res)
 }).catch(err=>{
     console.log(err)
 })