better-api
前后端交互接口封装管理(AJAX HTTP)
var BetterAPI = require('better-api')
var $ = require('jquery')
var message = require('face-message')
var api = new BetterAPI({
defaultSettings: {
dataType: 'json'
},
loading: function (isLoading, failArg) {
if (isLoading) {
message.loadingBar.show(2)
}
else {
switch (failArg[1]) {
case 'abort':
break;
case undefined:
message.loadingBar.hide()
break
default:
message.loadingBar.fail()
}
}
},
input: function (req) {
return req
},
output: function (res, req) {
return res
},
fetch: function (data, settings, callback) {
settings.data = data
return $.ajax(settings)
.done(callback.net.done)
.fail(callback.net.fail)
.always(callback.after)
},
defaultCallback: {
net: {
fail: function (jqXHR, textStatus) {
switch(textStatus) {
case 'timeout':
message.error('网络超时')
break
case 'abort':
break
default:
message.error('网络错误')
}
}
}
},
judgeResponseType: function (res) {
return res.status
},
defaultResponseType: {
pass: function () {
message.success('操作成功')
},
fail: function (res) {
message.error('fail:' + res.msg)
},
error: function (res) {
message.error('error:' + res.msg)
}
}
})
var apiPass = api.create({
settings: {
url: 'http://118.25.125.213:9823/onface/echo/mock/pass',
type: 'get'
}
})
var apiFail = api.create({
settings: {
url: 'http://118.25.125.213:9823/onface/echo/mock/fail',
type: 'get'
}
})
var apiNetFail = api.create({
settings: {
url: '/404',
type: 'get'
}
})
var apiDelay = api.create({
settings: {
url: 'http://118.25.125.213:9823/onface/echo/mock/pass?$delay=1000',
type: 'get'
}
})
$(function () {
$('#jquery-pass').on('click', function () {
apiPass(
// data
{
name: 'nimo'
},
// callback
{
pass: function () {
message.success('操作成功')
},
fail: function (res) {
message.error(res.msg)
}
}
)
})
$('#jquery-fail').on('click', function () {
apiFail(
// data
{
name: 'nimo'
},
// callback
{
pass: function () {
alert('操作成功')
},
fail: function (res) {
message.error(res.msg)
}
}
)
})
$('#jquery-fail-detailAction').on('click', function () {
apiFail(
// data
{
name: 'nimo'
},
// callback
{
pass: function () {
message.success('操作成功')
},
fail: function (res) {
this.defaultAction()
message.error('More message (fail)')
}
}
)
})
$('#jquery-net-fail').on('click', function () {
apiNetFail()
})
$('#jquery-net-fail-custom').on('click', function () {
apiNetFail({}, {}, {
net: {
fail: function () {
message.error('（自定义）网络错误')
}
}
})
})
$('#jquery-net-fail-defaultAction').on('click', function () {
apiNetFail({}, {}, {
net: {
fail: function () {
this.defaultAction()
message.error('More message ($net.fail)')
}
}
})
})
$("#jquery-abort").on('click', function () {
var api = apiDelay({}, {}, {
net: {
fail: function () {
console.log(arguments)
}
}
})
api.abort()
})
$('#jquery-loading').on('click', function () {
apiDelay({}, {}, {
loading: function (isLoading) {
console.log('isLoading', isLoading)
}
})
})
})
var BetterAPI = require('better-api')
var axios = require('axios')
var message = require('face-message')
var CancelToken = axios.CancelToken
var api = new BetterAPI({
defaultSettings: {
dataType: 'json'
},
loading: function (isLoading, failArg) {
// console.log(failArg)
// if (isLoading) {
// message.loadingBar.show(2)
// }
// // failArg = [jqXHR, textStatus, errorThrown]
// else if (failArg[1] !== 'abort') {
// message.loadingBar.fail()
// }
// // else if (failArg[1] === 'abort') {
// // message.loadingBar.hide()
// // }
// else {
// message.loadingBar.hide()
// }
},
input: function (req) {
return req
},
output: function (res, req) {
return res
},
fetch: function (data, settings, callback) {
settings.data = data
settings.method = settings.type.toUpperCase()
if (settings.method === 'GET') {
// settings.url = `${settings.url}?${qs.stringify(settings.data)}`
settings.params = data
delete settings.data
}
let axiosCencel
settings.cancelToken = new CancelToken((cancel) => {
axiosCencel = cancel
})
axios(settings)
.then(function(res){
callback.net.done(res.data)
callback.after()
})
.catch(function(error){
callback.after()
if (error.response || error.request || error.message === 'abort') {
callback.net.fail(error)
}
else {
throw error
}
})
return {
abort: () => {
if (typeof axiosCencel === 'function') {
axiosCencel('abort')
}
}
}
},
defaultCallback: {
net: {
fail: function (error) {
if (/timeout/.test(error.message)) {
message.error('网络超时')
}
else if (/abort/.test(error.message)) {
// cancel request
}
else {
message.error('网络错误' + error.message)
}
}
}
},
judgeResponseType: function (res) {
return res.status
},
defaultResponseType: {
pass: function () {
message.success('操作成功')
},
fail: function (res) {
message.error('fail:' + res.msg)
},
error: function (res) {
message.error('error:' + res.msg)
}
}
})
var apiTimeout = api.create({
settings: {
url: 'http://118.25.125.213:9823/onface/echo/mock/pass?$delay=1000',
type: 'get',
timeout: 400
}
})
$('#axios-timeout').on('click', function () {
apiTimeout()
})
var apiNotfound = api.create({
settings: {
url: '/errorUrl',
type: 'get',
timeout: 400
}
})
$('#axios-404').on('click', function () {
apiNotfound()
})
var apiAbort = api.create({
settings: {
url: 'http://118.25.125.213:9823/onface/echo/mock/pass?$delay=1000',
type: 'get'
}
})
$('#axios-abort').on('click', function () {
var reqeust = apiAbort(
{},
{},
{
loading: function (isLoading, failArg) {
if (isLoading) {
message.loadingBar.show()
}
else {
message.loadingBar.hide()
}
}
}
)
reqeust.abort()
})
校验接口返回格式是非常重要的，虽然写校验代码需要时间。但是“某些情况下”相比调试找bug的时间会少很多。
var BetterAPI = require('better-api')
var message = require('face-message')
var $ = require('jquery')
// https://onface.github.io/types/
var Types = require('face-types')({isRequired: true})
var {
string, bool,number, array,
oneOf, arrayOf, object,
objectOf, shape
} = Types
var notRequiredTypes = require('face-types')({isRequired: false})
var api = new BetterAPI({
check: function (res, req, settings) {
if (settings.url !== 'some_special_url') {
Types.check(
{
status: oneOf(['pass', 'fail'])
},
res,
'ajax',
settings.url
)
}
},
defaultSettings: {
dataType: 'json'
},
loading: function (isLoading, failArg) {
if (isLoading) {
message.loadingBar.show(2)
}
else {
switch (failArg[1]) {
case 'abort':
break;
case undefined:
message.loadingBar.hide()
break
default:
message.loadingBar.fail()
}
}
},
input: function (req) {
return req
},
output: function (res, req) {
return res
},
fetch: function (data, settings, callback) {
settings.data = data
return $.ajax(settings)
.done(callback.net.done)
.fail(callback.net.fail)
.always(callback.after)
},
defaultCallback: {
net: {
fail: function (jqXHR, textStatus) {
switch(textStatus) {
case 'timeout':
message.error('网络超时')
break
case 'abort':
break
default:
message.error('网络错误')
}
}
}
},
judgeResponseType: function (res) {
return res.status
},
defaultResponseType: {
pass: function () {
message.success('操作成功')
},
fail: function (res) {
message.error('fail:' + res.msg)
},
error: function (res) {
message.error('error:' + res.msg)
}
}
})
var apiAccount = api.create({
settings: {
url: 'http://118.25.125.213:9823/onface/echo/mock/account',
type: 'get'
},
check: {
pass: function (res, req, settings) {
var { string, bool,number, array,
oneOf, arrayOf, object,
objectOf, shape
} = require('face-types')({isRequired: true})
var notRequired = require('face-types')({isRequired: false})
Types.check(
{
data: shape({
test1: string,
test2: notRequiredTypes.string,
username: string,
age: number,
domains: arrayOf(string),
projects: arrayOf(
shape({
name: string,
url: string
})
),
currentProject: shape({
name: string,
url: string
})
})
},
res,
'ajax',
settings.url
)
}
}
})
$('#check-account').on('click', function () {
apiAccount()
})
var apiFail = api.create({
settings: {
url: 'http://118.25.125.213:9823/onface/echo/mock/fail',
type: 'get'
},
check: {
fail: function (res, req, settings) {
Types.check(
{
msg: string
},
res,
'ajax',
settings.url
)
}
}
})
$('#check-fail').on('click', function () {
apiFail()
})