目前前端项目开发问题整理

记录项目中我观察到的一些问题，希望大家多多指教，积极讨论。

ajax框架问题

目前element后台所用superagent代码截取

// post.js文件
// 存放post请求
import { server_url, dumbWrapper } from './vars.js'
import request from 'superagent'
// 常规post请求
const factory = (url) => (params) => {
        return Promise.resolve(new Promise((resolve, reject) => {
            request.post(server_url + url).set('Content-Type', 'application/x-www-form-urlencoded').send(params).end((error, res) => {
                error
                    ?
                    reject(error) :
                    resolve(res.body);
            })
        }))
    }
    // json方式传参的post请求
const factoryJson = (url) => (params) => {
        return Promise.resolve(new Promise((resolve, reject) => {
            request.post(server_url + url).type('application/json').send(params).end((error, res) => {
                error
                    ?
                    reject(error) :
                    resolve(res.body);
            })
        }))
    }
// 登陆
export const login = factory('/user/login')

// var.js文件
import {NO,dealCode} from '../Utils/utils.js'
export const server_url = ''
export const failAction =()=>{
Vue.prototype.$message({
    message: '服务器错误',
    type: 'warning'
});
}
export const dumbWrapper = ({
  promise,
  finallyCB = NO,
  successCB = NO,
  failCB = failAction
}) => {
  promise.then((ret) => {
    dealCode(ret, successCB)
    finallyCB()
  }, (e) => {
    failCB(e)
    finallyCB()
  })
}

// 实际使用时
dumbWrapper({
  promise: updateTotalMoney(postData),
  successCB: (e) => {
    this.$message({
      type: 'success',
      message: '保存成功',
    });
    this.getCommonInfo();
  }
});

这样做有以下几个缺点

1. post.js实际只定义了api访问地址，但不会定义所传参数；这使得url和params，一个写在post.js中，一个写在具体组件代码中；而据我的理解，所传参数也应该是在post.js中规定好的。
   所传参数在post.js中定义的好处：
   1.1 写组件代码的时候，不需要再去翻看api文档，直接看post.js；post.js一次写好，和ajax有关的只需要在这一处进行维护即可。
   1.2 可以利用es6的特性，定义参数初始值；对参数应有的校验可直接进行。
2. dumbWrapper函数没有返回 promise对象。这就使得所有的回调必须包含在dumbWrapper的successCB函数中。

个人的建议

对所用框架我没有什么意见，我用我较熟悉的jquery做例子。

const sendAjax = (url, payload, params = {}) => {
  const query = $.param(payload || '')
  // 发送请求前，if语句相当于一个请求拦截器，例子中，若此时没有网络连接，则对请求进行拦截
  if (navigator.onLine) {
    return new Promise((resolve, reject) => {
      $.ajax({
        type: 'post',
        url,
        data: {
          ...payload,
        },
        success(data){
          if (data.state !== 0 && localStorage.getItem('userType') === 'user') {
            // ajax返回错误
            dealCode(data.state);
          } else if (data.state === 0 || data.state === undefined) {
            // ajax返回正确，将返回值缓存起来
            localStorage.setItem(`${url}?${query}`, JSON.stringify(data));
          }
          resolve(data);
        },
        error(data){
          reject();
        },
        // 给一些特殊的ajax请求预留好接口
        ...params,
      })
    })
  } else {
    // 无网络的时候返回本地存储的值
    const cache = localStorage.getItem(`${url}?${query}`);
    return new Promise((resolve, reject) => {
      if (cache) {
        resolve(JSON.parse(cache));
      } else {
        reject();
      }
    });
  }
}

export const getUnreadList = (page = 1, portalId) => {
  return sendAjax(
    '/home/article/lists',
    { page: page,
      number: 10,
      isopen: 2,
      portal_id: portalId,
    }
  );
}

这是一个较为简单的demo；但我个人感觉我这种写法更科学。我希望大家讨论利弊，总结出一个统一的方案。