vue axios二次封装教程

vue axios二次封装教程

这段时间告诉项目需要，用到了vue。

刚开始搭框架的时候用的是vue-resource后面看到官方推荐axios就换过来了 顺便封装了一下

定义公共参数与引入组件：

import axios from 'axios'  
import qs from 'qs'  
  
axios.interceptors.request.use(config => {  
  store.commit('UPDATE_LOADING',true) //显示loading  
  return config  
}, error => {  
  return Promise.reject(error)  
})  
  
  
axios.interceptors.response.use(response => {  
  return response  
}, error => {  
  return Promise.resolve(error.response)  
})  
  
function errorState(response) {  
  store.commit('UPDATE_LOADING',false)  //隐藏loading  
  console.log(response)  
  // 如果http状态码正常，则直接返回数据  
  if (response && (response.status === 200 || response.status === 304 || response.status === 400)) {  
    return response  
      // 如果不需要除了data之外的数据，可以直接 return response.data  
  }else{  
    Vue.prototype.$msg.alert.show({  
            title: '提示',  
            content: '网络异常'  
    })  
  }  
    
}  
  
function successState(res) {  
  store.commit('UPDATE_LOADING',false) //隐藏loading  
  //统一判断后端返回的错误码  
  if(res.data.errCode == '000002'){  
       Vue.prototype.$msg.alert.show({  
            title: '提示',  
            content: res.data.errDesc||'网络异常',  
            onShow () {  
            },  
            onHide () {  
              console.log('确定')  
            }  
       })  
  }else if(res.data.errCode != '000002'&&res.data.errCode != '000000') {  
      Vue.prototype.$msg.alert.show({  
            title: '提示',  
            content: res.data.errDesc||'网络异常',  
            onShow () {  
  
            },  
            onHide () {  
              console.log('确定')  
            }  
       })  
  }  
}  
const httpServer = (opts, data) => {  
  
    let Public = { //公共参数  
      'srAppid': ""  
    }  
  
    let httpDefaultOpts = { //http默认配置  
          method:opts.method,  
          baseURL,  
          url: opts.url,  
          timeout: 10000,  
          params:Object.assign(Public, data),  
          data:qs.stringify(Object.assign(Public, data)),  
          headers: opts.method=='get'?{  
            'X-Requested-With': 'XMLHttpRequest',  
            "Accept": "application/json",  
            "Content-Type": "application/json; charset=UTF-8"  
          }:{  
            'X-Requested-With': 'XMLHttpRequest',  
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'  
          }  
    }  
  
    if(opts.method=='get'){  
      delete httpDefaultOpts.data  
    }else{  
      delete httpDefaultOpts.params  
    }  
      
    let promise = new Promise(function(resolve, reject) {  
      axios(httpDefaultOpts).then(  
        (res) => {  
          successState(res)  
          resolve(res)  
        }  
      ).catch(  
        (response) => {  
          errorState(response)  
          reject(response)  
        }  
      )  
  
    })  
  return promise  
}  
  
export default httpServer  

封装理由：

1、可以和后端商量好错误码在这统一提示统一处理，省去不必要的麻烦

2、如果做接口全报文加解密都可以在此处理

接口统一归类：

const serviceModule = {  
  getLocation: {  
    url: ' service/location/transfor',  
    method: 'get'  
  }  
}  
const ApiSetting = {...serviceModule }  
  
export default ApiSetting  

归类好处:

1、后期接口升级或者接口名更改便于维护

http调用：

<script>  
import http from "../../lib/http.js";  
import ApiSetting from "../../lib/ApiSetting.js";  
export default {  
  created: function() {  
    http(ApiSetting.getLocation,{"srChannel": "h5",})  
    .then((res)=>{  
      console.log(res)  
    },(error)=>{  
      console.log(error)      
    })  
   },  
  methods: {  
    
  }  
}  
</script>