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'

【使用時導入需要用到的方法，並調用】

完結、