封装ajax请求

封装方法（Promise封装ajax）

这里使用ES6的Promise封装一个ajax请求，可以做一些公共的操作，比如拦截token处理登录校验

let request = ({type, url, data, headers, dataType, params, contentType, isBody, async}) => {//ES6语法
    let requestObj = {
        url: url,
        type: type
    }
    if (headers) {
        requestObj['headers'] = headers;
    }
    if (params) {
        requestObj['data'] = params;
    }
    if (data) {
        requestObj['data'] = data
    }
    if (dataType) {
        requestObj['dataType'] = dataType
    }
    if (contentType) {
        requestObj['contentType'] = contentType
    }
    if (isBody) {
        requestObj['contentType'] = 'application/json;charset=utf-8'
        requestObj['data'] = JSON.stringify(data)
    }
    if (!async) {
        requestObj['async'] = async
    }

    //进行Promise封装
    return new Promise((resolve, reject) => {//这句话是套路,记住
        $.ajax({
            ...requestObj,
            success: function (res) {
                resolve(res);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                reject(jqXHR, textStatus, errorThrown)
            }
        })
    });
}

可以看见request是一个函数， 参数是一个对象， 里面包含ajax的一些请求参数， 返回一个包装了ajax请求的Promise对象， 参数中isBody为ture时设置contentType和将data数据转为字符串，这是为了springboot参数用@requestBody时， 发送请求时简化一些步骤， 当springboot接口参数设置为@requestBody时， 须加上参数： {isBody： true}

如何使用

最上方图中有一个basic.js文件， 我们在这个文件中编写请求。（建议将api请求专门放到一个或多个js文件中）

function api_login(data) {
    return request({
        type: 'post',
        url: "/login",
        data: data
    })
}

function api_getInfo() {
    return request({
        type: 'get',
        url: "/user/info"
    })
}

以上定义了2个request请求， 一个是登录， 一个是登录成功后获取用户信息。 他们都返回一个Promise对象。

在项目中使用， 下面是一个用户登录

function login(){
	// ......登录验证
	发送请求到后端验证用户名， 密码
	api_login(data).then(res => {
        if (res.errcode) {
            $("#loginErrMsg").text(res.errmsg)
            return;
        }
        localStorage.setItem("accessToken", res.data.accessToken);
        localStorage.setItem("refreshToken", res.data.refreshToken)
        api_getInfo().then(res => {
            localStorage.setItem("user", JSON.stringify(res.data))
            window.location.href = "/"
        });
    }).catch(error => {
        $("#loginErrMsg").text("系统异常，登录失败")
    });
}

这里判断登录内容无误后， 开始发送请求， 使用我们之前定义的api_login方法进行登录请求， res为后台返回的数据， 将token和refreshToken保存到本地， 登录后再获取用户的个人信息。 一个登录验证就完成了。

总结

回过头看。 我们先定义一个request.js文件， 分为2部分， 一部分定义一个拦截器， 捕获401，403等请求， 做出相应的处理， 再定义一个request函数， 参数为平时我们用的ajax请求参数对象， 返回一个promise对象， 里面包含了ajax请求。 再定义了一个basic.js文件， 里面存放了各种需要请求后台的接口方法， 每个方法定义了url， type等。 最后再我们自己的js文件中就可以直接使用了， 由于返回的是promise对象， 所以可以通过.then()链式调用了。