类似ajax封装函数,JS 封装一个async式的AJAX函数

其实也没什么，就是用上ES7的异步函数，让ajax使用起来更方便。这个方便主要是体现在：无回调 & 无then链式 & 轻松收集异常。

大致分3步：

1、封装API类(这步不用异步函数)

这一步一般会单独建立一个文件！

// 定义一个API类，专门用于获取各类数据

class Api {

// 有的ajax请求是会做鉴权的，constructor里放这些鉴权参数

constructor (token) {

this.token =token;

}

// opt 里存放特定请求需要的参数，如url等

getUser (opt) {

return new Promise((resolve, reject) => {

$.ajax({

headers:{

token:this.token

url:opt.url,

data:opt.data,

success:function(data){

resolve(data);

error:function(error,status){

reject(error);

}

})

}

//其他API定义区

...

}

2、进一步封装特定API(使用异步函数)

这一步一般是在特定的需要调用某API时用到

// const api = new Api(token)一般会提前执行，比如在vue组件script的import和export default之间执行，这也是为了避免该语句在每个具体api里都执行一次。

// 在vue中，可以将该函数放在methods里

async function loadUserData (opt) {

try{

const user = await api.getUser(opt)；

// 根据user状态执行业务逻辑

...

}catch(e){

// 请求异常的处理逻辑

}

第三步：使用API

// 在vue中，可以将该代码放在mounted里

loadUserData(opt)

经过这三步，基本就实现了无回调，无then链式调用和轻松处理错误这几个比较烦人的问题啦！

参考

类似ajax封装函数,JS 封装一个async式的AJAX函数相关推荐

R语言attributes函数（获取属性、设置属性）、attr函数（改变一个属性）、structure函数（改变数据形状）实战
R语言attributes函数(获取属性.设置属性).attr函数(改变一个属性).structure函数(改变数据形状)实战目录
C语言：定义一个函数int isprime(int n)，用来判别一个正整数n是否为素数，若为素数函数返回值为1，否则为0。在主函数中输入一个整数x，调用函数isprime(x)来判断这个整数x是
原题: 定义一个函数int isprime(int n),用来判别一个正整数n是否为素数,若为素数函数返回值为1,否则为0.在主函数中输入一个整数x,调用函数isprime(x)来判断这个整数x是不是 ...
高阶函数、js函数内返回一个内部函数详解----＞函数柯里化
高阶函数如果一个函数符合下面2个规范中的任何一个,那该函数就是高阶函数. 若A函数,接收的参数是一个函数,那么A就可以称之为高阶函数. 若A函数,调用的返回值依然是一个函数,那么A就可以称之为高阶函 ...
原声ajax的函数式封装,原生 js 封装 ajax的两种方式（get,post）
/*ajax封装 @param option:传入一个对象属性分别为(顺序可以打乱): url:请求的路径 type:请求的不同类型get或post data:发送的数据,格式:key1=value ...
【js封装】js封装自己的公共方法，以后方便调用
从事前端开发快一年了,很多东西都是不系统的,尽管保存,但是调用还需要去找,浪费时间,所以我要封装一个文件,直接引入文件,调用省事省时间. 正文: 首先我想到有两种封装方法,一个是prototype,另 ...
html表单实现ajax登陆,node.js+jQuery实现用户登录注册AJAX交互
最近实现了Node.js当作后台,jQuery写前台AJAX代码的,实现用户登录和注册的功能,刷新了前后端交互的三观.特记录一下. 1.login.ejs实现form框架用户名密码 form不加m ...
第六章函数，编写一个判断水仙花数的函数，从主函数输入正整数n，在主函数中调用判断水仙花数的函数，找出n以内所有的水仙花数。（水仙花数指3位数的各个数字的立方和等于这个三位数本身）。
例子:380 153 #include<stdio.h> #include<math.h> int main() {int n;printf("输入一个三位数:&qu ...
c语言若对函数未加,【单选题】C 语言程序中,若对函数类型未加显式说明,则函数的隐含说明类型为A. void B. double C. int D. char...
参考答案如下要修改已输入文本的字号,单选对函的隐在选择文本后,单击______按钮后,可选择字号. A) 加粗 B) 新建 C) 字号下拉式列 ()栏位于PowerPoint 2007主窗口的底部, ...
MATLAB不定积分的运算,matlab中怎么把积分函数 int 得到的不定积分式代入 solve 函数中进行计算？...
答:syms r x fun=int(r*exp(-2*(r/2)^2),r,0,x); x=solve(fun-0.5) x = 2^(1/2)*log(2)^(1/2) -2^(1/2)*log( ...

类似ajax封装函数,JS 封装一个async式的AJAX函数

类似ajax封装函数,JS 封装一个async式的AJAX函数相关推荐

最新文章

热门文章