记录项目中我观察到的一些问题，希望大家多多指教，积极讨论。
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();
}
});
这样做有以下几个缺点
- post.js实际只定义了api访问地址，但不会定义所传参数；这使得url和params，一个写在post.js中，一个写在具体组件代码中；而据我的理解，所传参数也应该是在post.js中规定好的。
所传参数在post.js中定义的好处：
1.1 写组件代码的时候，不需要再去翻看api文档，直接看post.js；post.js一次写好，和ajax有关的只需要在这一处进行维护即可。
1.2 可以利用es6的特性，定义参数初始值；对参数应有的校验可直接进行。 - 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；但我个人感觉我这种写法更科学。我希望大家讨论利弊，总结出一个统一的方案。
