vue axios 二次封装

来源：互联网发布：java版dvd碟片出租系统编辑：程序博客网时间：2024/05/16 11:54

这段时间告诉项目需要，用到了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>

阅读全文

0 0