vue中对axios的封装

import axios from 'axios'
import qs from 'qs'
import Vue from 'vue'
var vm=new Vue()
import Element from 'element-ui'
var ports=window.sessionStorage.ports;
axios.interceptors.request.use(config => {
    return config
}, resor => {
    return Promise.reject(resor)
})
axios.interceptors.response.use(response => {
    return response
}, resor => {
    return Promise.resolve(resor.response)
})
function checkStatus (response) {
    // 如果http状态码正常，则直接返回数据
    if (response && (response.status === 200 || response.status === 304)) {
        return response.data
        // 如果不需要除了data之外的数据，可以直接 return response.data
    }else if(response &&response.status === 400 ){
        return {
            status: 400,
            message: '参数不匹配',
            result:false
        }
    }
    // 异常状态下，把错误信息返回去
    return {
        status: -404,
        message: '网络异常',
        result:false
    }
}
export default {
    post (url,data) {
        return axios({
        method: 'post',
        baseURL: ports,
        url,
        data: qs.stringify(data),
        timeout: 10000,
        }).then(
            (response) => {
                return checkStatus(response)
            }
        ).then((res)=>{
            if(res.result){
                return Promise.resolve(res.model)
            }else{
                // vm.$alert(res.message,'错误提示')
                return Promise.reject(res)
            }
        })
    },
    postJson (url,data) {
      return axios({
        method: 'post',
        baseURL: ports,
        url,
        data: data,
        headers:{
          'Content-Type':'application/json; charset=utf-8'
        },
        timeout: 10000,
      }).then(
        (response) => {
          return checkStatus(response)
        }
      ).then((res)=>{
        if(res.result){
          return Promise.resolve(res.model)
        }else{
            // vm.$alert(res.message,'错误提示')
            return Promise.reject(res)
        }
      })
    },
    postFormData (url,data) {
        return axios({
        method: 'post',
        baseURL: ports,
        url,
        data: qs.stringify(data),
        timeout: 10000,
        headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
        }
        }).then(
            (response) => {
                return checkStatus(response)
            }
        ).then((res)=>{
            if(res.result){
                return Promise.resolve(res.model)
            }else{
                // vm.$alert(res.message,'错误提示')
                return Promise.reject(res)
            }
        })
    },
    get (url,params) {
        return axios({
        method: 'get',
        baseURL: ports,
        url,
        params, // get 请求时带的参数
        timeout: 10000,
        }).then(
            (response) => {
                return checkStatus(response)
            }
        ).then((res)=>{
            if(res.result){
                return Promise.resolve(res.model)
            }else{
                // vm.$alert(res.message,'错误提示')
                return Promise.reject(res)
            }
        }) 
    }
}

另一种封装方式：

import axios from 'axios'
axios.defaults.timeout = 10000
axios.defaults.headers.post['Content-Type'] = 'application/x-www=form-urlencoded'
let port = '';
//请求方法
export default{
  fetchGet (url, params) {
    params = params?this.setParams(params):{};
    return new Promise((resolve, reject) => {
      axios.get(this.getPocPort() + url, {params}).then(res => {
        resolve(res.data)
      }).catch(error => {
        reject(error)
      })
    })
  },
  fetchQuickSearch (url) {
    return new Promise((resolve, reject) => {
      axios.get(this.getPocPort() + url).then(res => {
        resolve(res.data)
      }).catch(error => {
        reject(error)
      })
    })
  },
  fetchPost (url, params) {
    params = params?this.setParams(params):{};
    return new Promise((resolve, reject) => {
      axios.post(this.getPocPort() + url, params).then(res => {
        resolve(res.data)
      }).catch(error => {
        reject(error)
      })
    })
  },
  fetchPostJson(url, params) {
    return new Promise((resolve, reject) => {
      axios.post(this.getPocPort() + url, params).then(res => {
        resolve(res.data)
      }).catch(error => {
        reject(error)
      })
    })
  },
  setParams(params){
    let fdata = new URLSearchParams();
          for(let attr in params){
              fdata.append(attr,params[attr]);
          }
      return fdata;    
  },
  getPocPort(){
    if(!port){
       port = localStorage.getItem('pocPort');
    }
    return port;
  }
}

 js中引入方式：

import http from './public'
const port = '';
// 考核类型
export const page = (params) => {
  return http.fetchPost(port + '/channel/channelPage', params)
}