基于vue2.0的axios进行二次封装

时间:2017年11月07日分类:Javascript

封装理由:

  • 配置通用项,精简代码,统一编码规范
  • 统一处理请求错误,进行提示,省去不必要的麻烦
  • 便于处理接口全报文加解密
  • 接口统一归类,后期接口升级或者接口名更改便于维护

定义公共参数与引入组件(httpAxios.js)

import axios from 'axios'
import qs from 'qs'

//请求时的拦截器
axios.interceptors.request.use(config = >{
    // 发送请求之前做一些处理,loading...
    return config
},
error = >{
    // 当请求异常时做一些处理
    return Promise.reject(error)
})

// 请求完成后的拦截器
axios.interceptors.response.use(response = >{
    // 返回响应时做一些处理
    // 这里的return response返回的是一个对象, 内容如下:
    // {
    //      data: { },        // 服务器提供的响应
    //      status: 200,      // 服务器响应的HTTP状态代码
    //      statusText: 'OK', // 服务器响应的HTTP状态消息
    //      headers: {},      // 服务器响应头
    //      config: {}        // axios 的配置
    // }
    return response
},
error = >{
    // 当响应异常时做一些处理
    // 这里我们把错误信息扶正, 后面就不需要写 catch 了
    return Promise.resolve(error.response)
})

function errorState(response) {
    //  ..隐藏loading
    // console.log(response)
    // console.log('失败,统一判断后端返回的错误码')
    // 如果http状态码正常,则直接返回数据
    if (response && (response.status === 200 || response.status === 304 || response.status === 400)) {
        return response // 如果不需要除了data之外的数据,可以直接 return response.data
    } else {
        console.log('网络异常')
    }
}

function successState(res) {
    //  ..隐藏loading
    // console.log(res)
    // console.log('成功,统一判断后端返回的错误码')
    //统一判断后端返回的错误码
    // if (res.data.errCode == '000002') {
    //   console.log(res.data.errDesc || '网络异常')
    // } else if (res.data.errCode != '000002' && res.data.errCode != '000000') {
    //   console.log(res.data.errDesc || '网络异常')
    // }
}

const httpServer = (opts, data) = >{
    // 公共参数
    let Public = {
        'testParam': ""
    }
    // http默认配置
    let httpDefaultOpts = {
        method: opts.method,
        // 请求协议
        //baseURL,  // 基础 url 前缀
        url: opts.url,
        // 请求的地址
        timeout: 10000,
        // 超时时间, 单位毫秒
        params: Object.assign(Public, data),
        // get 请求时带的参数
        // 这里的 data 为什么需要用qs.stringify(data)包一下, 
        // 数据处理, 主要是配合下面headers里的Content-Type, 转成表单提交, 让后端可以直接用 $_POST 拿到数据
        data: qs.stringify(Object.assign(Public, data)),
        // post 请求的数据
        // 请求头信息
        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
    }

    /* 
   * 将异常部分直接封装到业务调用的 then 方法中 例如:
    promise(apiSetting.getProjects).then(
      res => {
        //... do something
      },
      error => {
        //... do something
      }
    ) 
  */
    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

 

接口统一归类(apiSetting.js),好处:后期接口升级或者接口名更改便于维护

const serviceModule = {
    getProjects: {
        url: '/static/data/projects.json',
        method: 'get'
    },
    getProgress: {
        url: '/static/data/progresses.json',
        method: 'get'
    },
    getPage: {
        url: '/static/data/page.json',
        method: 'get'
    },
    getMembers: {
        url: '/static/data/members.json',
        method: 'get'
    }
}
const apiSetting = {...serviceModule}

export default apiSetting

 

http调用(index.vue)

<template>
    <div id=app>
        <!-- something -->
    </div>
</template>
<script>
    import http from "@/services/httpAxios.js";
    import apiSetting from "@/services/apiSetting.js";

    export default {
        data() {
            return {};
        },
        computed: {},
        mounted() {
            http(apiSetting.getProjects).then(
            res = >{
                this.$store.commit("loadProject", res.data.data);
            },
            error = >{
                console.log(error);
            })
        },
        methods: {}
    };
</script>

请求失败

通常请求失败有两种原因:

  • 网络异常/服务器宕机
  • 后端抛出错误

每个后端在请求失败时返回的数据结构大同小异,前后端可以商量好,例如:

{
 "message": ok",
 "success": true
}

 

非原创,参考:

Vue 中统一处理 ajax 请求错误
http://blog.csdn.net/qq_28027903/article/details/77648482

  • 查看[1432]
  • |
  • 评论[1]

相关标签

javascript vue2.0 axios

1条评论

  1. 2018-10-14 23:09:45

    很有用,感谢博主的精彩分享

发表你的评论

回到顶部