vue优化项目结构之service请求篇

敲代码要有点逼格、要有点追求、

1.暴露问题

一般地，我们在vue项目中经常会用到vue-resource或者axios来进行网络数据请求、刚接触不久的同学会很自然的直接调用其api来进行请求，例如：

这种将url直接写死的，直接拖出去打死吧、【如果服务地址发生变化，整个项目接口都需要去更改】

 这种稍微好点的，知道将地址配成一个全局变量。【总感觉还是太过累赘，而且并不能直观反应这段请求的目的是做什么的】

2.思考我们需要怎么做

理想状况下，我们希望在需要调用接口的时候直接调用一个方法，传入参数，然后拿到数据，类似这样：

【方法名很直观，没有暴露出接口地址，代码不会乱】

3.vue项目结构升级

a.这里我们将抽离出service来管理各个模块的请求;

b.将抽离出一个文件api.js来统一管理请求接口的地址;

c.并将axios或者vue-resource的请求做一个封装http.js，方便调用；

首先看一下完整结构：

先看一下http.js:

/**
 * http utils, provide general check for http response
 */

axios.defaults.headers.post['Content-Type'] = 'application/json'
axios.defaults.withCredentials = true

axios.interceptors.request.use(function (config) {
    // 动态设置参数
    //config.headers = Object.assign(config.headers || {}, {accessToken: '63F5640A1FE54E22A53AA8879373CEB8'})

    // config.params = Object.assign(config.params || {}, {deviceType: 'wap'})

    return config

}, function (error) {
    // Do something with request error
    return Promise.reject(error)
})

const getSettings= () => {
    return axios.defaults // 返回 axios 配置对象供外部设置或自定义特殊处理
}

const checkHttp = (res) => {
    if (!res) {
        let errObj = {
            message: '响应数据为空',
            response: null
        }

        throw errObj
    }

    let status = res.status
    if (status === 200) {
        return res.data
    }

    let errObj = {
        message: '请求错误',
        response: res
    }

    throw errObj
}

const checkResult = (res) => {
    let data = checkHttp(res)
    var ua = navigator.userAgent.toLowerCase();
    if (data.retCode == '1000') {

        return data
    }


    if (data.retCode == '2005'){
        if(ua.match(/MicroMessenger/i)=="micromessenger") {

            window.location = "http://www.ucaigou.net/weixin/user/auth?autoCreateUserFlag=0&gotoUrl=http://mobile.ucaigou.net"
            return
        } else {

            return
        }
    }

    let errObj = {
        message: data.retMsg || '请求错误',
        response: res
    }

    throw errObj
}

export const get = (url, params, headers) => {
    return axios.get(url, {params, headers}).then(checkResult)
}

export const post = (url, data, headers) => {
    return axios.post(url, data, headers).then(checkResult)
}

export const formPost = (url, params) => {
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
    let formData = ""
    if(params) {
        for (var key in params) {
            formData += key + "=" + params[key] + "&"
        }
    }
    return axios.post(url, formData).then(checkResult)
}

export const put = (url, data) => {
    return axios.put(url, data).then(checkResult)
}

export const del = (url) => {
    return axios.delete(url)
}

/**
 * raw json request
 */
export const getJson = (url, params) => {
    return axios.get(url, params).then(checkHttp)
}

export default {get, post,formPost, put, del, getJson, getSettings}

【这段代码可以提出来公用，其实也就是对axios的各种方法进行提取封装】

 

看看api.js文件：

import {devMode} from 'utils/env'
const DEFAULT_API_BASE = devMode ? '/' : '//www.xxxxxx.net/'

const _dataPath = (url) => {
    return `${DEFAULT_API_BASE}/${url}`
}

/**
 * API请求参数和响应内容的具体说明可参考
 * 
 */
export default {
    PROV_CITY_DICT: _dataPath('api/provCityDist'), // 省市区查询
    TOWN_DICT: _dataPath('api/town'), // 区县(四级地址)查询
    CATEGORY_LIST: _dataPath('api/product/category'), // 商品分类查询
    PRODUCT_LIST: _dataPath('api/product/list'), // 商品列表查询
    PRODUCT_DETAIL: _dataPath('api/product/detail'), // 商品详情查询
    HOME_BANNER_LIST: _dataPath('api/home/banner/list'), // banner位
    HOME_SCENE_LIST: _dataPath('api/home/scene/list'), // 场景采购(高校采购场景方案)
    HOME_FLOOR_LIST: _dataPath('api/home/floor/list'), // 楼层数据
    RECOMMEND_PRODUCT_LIST:_dataPath('api/product/recommend'), // 推荐商品列表
    PRODUCT_KEYWORD_SUGGEST:_dataPath('api/product/suggest'), // 商品关键词联想
    ADDR_ADD: _dataPath('api/address/add'), // 用户地址添加
    ADDR_DEL: _dataPath('api/address/delete'), // 用户地址删除
    ADDR_UPDATE: _dataPath('api/address/update'), // 用户地址更新
    ADDR_LIST: _dataPath('api/address/list'), // 用户全部地址查询
    ADDR_QUERY: _dataPath('api/address/query'), // 用户地址查询
    ADDR_DEFAULT: _dataPath('api/address/default'), // 获取用户默认收货地址
    CART_ADD: _dataPath('api/shoppingCart/add'), // 购物车添加
    CART_QUERY: _dataPath('api/shoppingCart/query'), // 购物车列表查询
    CART_UPDATE: _dataPath('api/shoppingCart/update'), // 购物车更新数量
    CART_DEL: _dataPath('api/shoppingCart/delete'), // 购物车删除
     .........


}

【这段代码将项目中用到的所有接口地址全部进行了配置】

接下来看看service文件：

import http from 'utils/http'
import api from 'api'


/**
 * 订单列表
 */


export const orderList = async (params) => {
    const sendParams = Object.assign({ // 默认参数
        "pageNum": 1,
        "pageSize": 15,
    }, params)

    return http.post(api.ORDER_LIST, sendParams)
}


/**
 * 订单详情
 */

export const orderDetail = async (params) => {
    return http.get(`${api.ORDER_DETAIL}?id=${params}`)
}


/**
 * 查看物流
 */

export const orderEpress = (params) => {
    return http.post(api.ORDER_EXPRESS, params)
}

【导入http.js、api.js，可以看到每一个service方法都返回一个promise对象】

使用方法：

import {orderList,cancleOrder,orderRecevce} from 'services/order.service'

【使用时导入需要用到的方法，并调用】

完结、