美文网首页前端
基于vue-resource的网络层封装

基于vue-resource的网络层封装

作者: SunnySky_ | 来源:发表于2017-11-27 17:54 被阅读299次

    好的架构封装,不仅可以加快开发的速度,还能使得逻辑更加简明,不用关心内部的实现。在此介绍一下vue-resource基于es6出来的神器promise的封装处理。

    首先抽出一个baseHttp.js,用于处理vue-resource的方法调用

    import Vue from 'vue'
    let vue = new Vue()
    
    //GET请求,将url和请求参数传入,通过Promise,将成功和失败的数据派发出去
    export function getHttp(url, params) {
      return new Promise((resolve, reject) => {
        vue
          .$http({
            url: url,
            params: params,
            method: 'GET'
          })
          .then(response => {
            resolve(response.body)
          }, response => {      
            reject(response.bodyText)
          })
      })
    }
    
    //POST请求,将url,请求参数和body传入,通过Promise,将成功和失败的数据派发出去
    export function postHttp(url, params, body) {
      return new Promise((resolve, reject) => {
        vue
          .$http({
            url: url,
            params: params,
            body: JSON.stringify(body),
            method: 'POST'
          })
          .then(response => {
            resolve(response.body)
          }, response => {
            reject(response.bodyText)
          })
      })
    }
    

    核心部分已经讲完了,就是这么简单。

    然后写一个net.js,用于处理需要的请求处理

    Examples

    import {getHttp, postHttp} from './basehttp'
    
    /**
      *  GET请求
      *  请求url为app/user/{user_id}?aaaa=1234
     **/
    export function getUserInfo(userId) {
      let url = 'app/user/{user_id}'
      let params = {
        user_id: userId,
        aaaa: 1234
      }
      return getHttp(url, params)
    }
    
    
    /**
     * POST请求
     * 请求app/user/query/{user_id}?aaaa=1234
     * 请求body { serverId: String,  scope: String }
     */
    export function postUserInfo(userId, serverId, scope) {
      let url = 'app/user/query/{user_id}'
      let params = {
        user_id: userId,
        aaaa: 1234
      }
      let body = {
        serverId: serverId,
        scope: 'personal'
      }
      return postHttp(url, params, body)
    }
    
    

    调用

    经过封装后,调用就变得非常简单了

    import * as http from '../../api/net'
    
    //getUserInfo调用
    http.getUserInfo(userId)
      .then(response => {
               //成功处理
             }, reject => {
               //失败处理
             })
    
    //postUserInfo
    http.postUserInfo(userId, serverId, scope)
      .then(response => {
               //成功处理
             }, reject => {
               //失败处理
             })
    

    相关文章

      网友评论

        本文标题:基于vue-resource的网络层封装

        本文链接:https://www.haomeiwen.com/subject/mjidbxtx.html