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)
            }
        }) 
    }
}

 
もう1つのパッケージ方法:

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)
}

 
転載先:https://www.cnblogs.com/xuemei/p/10087338.html