【从零开始搭建uniapp开发框架】（九）—— ajax网络请求封装

框架开源地址：https://gitee.com/yunhaotian/uniapp_mobileFrame

ajax网路请求封装了POST、GET、 PUT、DELETE四种接口请求方式

在 common 文件夹下新建 sju.ajax.js 文件

 

 

 

 

 

 

sju.ajax.js源码：

?

1

/**<br> * ajax相关方法的封装<br> */<br>import base from '@/common/sju.base.js';<br>import login from '@/common/sju.login.js'<br>import alert from '@/common/sju.alert.js'<br><br>//基准地址域名，这些地址域名按照自己需要添加<br>let app = ""<br>let api = ""<br>let web = ""<br>// 开发环境<br>if (process.env.NODE_ENV === 'development') {<br>    app = 'https://www.xxx.com/';//H5部署域名<br>    api = 'https://www.xxx.com/';//接口域名<br>    web = 'https://www.xxx.com/';//后台地址域名<br>}<br>// 生产环境(发布环境)<br>if (process.env.NODE_ENV === 'production') {<br>    app = 'https://www.xxx.com/';//H5部署域名<br>    api = 'https://www.xxxx.com/';//接口域名<br>    web = 'https://www.xxx.com/';//后台地址域名<br>}<br><br>let ajax = {<br>    // 对外公开的网址<br>    appUrl: app,<br>    apiUrl: api,<br>    adminUrl: web,<br>    <br>    /**<br>     * @description ajax Post请求,返回json数据<br>     * <br/>success回调方法的参数就是返回数据res的.data.data属性值<br>     * <br/>res.data.result为true时才执行success回调方法,为false是封装统一处理<br>     * @param {string} url 请求的地址<br>     * @param {object} data 请求参数<br>     * @param {function} success 成功后回调的方法<br>     * @param {function} fail 失败后回调的方法<br>     * @param {bool} showLoading 是否显示加载框(默认false)<br>     * @param {string} type 内容类型(默认application/x-www-form-urlencoded 表单默认的提交数据的格式）)<br>     * /api/xxx/xxx<br>     */<br>    post: function(url, data, success, showLoading,type) {<br>        if (base.isNull(showLoading))<br>            showLoading = false;<br>        if (base.isNull(type))<br>            type = 'application/x-www-form-urlencoded';    //默认表单提交数据的格式<br><br>        base.logInfo("ajax post url:" + url);<br>        if (showLoading == true)<br>            alert.showLoading();<br>        console.info(ajax.apiUrl + url);<br>        uni.request({<br>            url: ajax.apiUrl + url,<br>            data: data,<br>            method: 'POST',<br>            timeout: 600000,//超时时间，单位 ms<br>            header: {<br>                'content-type':type,<br>                'token': login.getValue('token')<br>            },<br>            success: (res) => {<br>                console.info(res);<br>                if (res.statusCode == "200") {     //和后台接口协定请求成功返回的状态<br>                    console.info('------api请求返回数据:' + url);<br>                    success(res.data);             //接口请求成功后返回结果数据<br>                } else {<br>                    if(res.data.error!="")<br>                    {<br>                        alert.showError(res.data.error);    //接口请求出错，弹窗展示接口报错内容<br>                    }<br>                    else<br>                    {<br>                        alert.showError('系统繁忙，请稍后再试'); //接口不返回报错内容，展示<br>                    }<br>                }<br>            },<br>            fail: (res) => { //接口调用失败的回调<br>                console.info(res);<br>                alert.showError('系统繁忙，请稍后再试');<br>            },<br>            complete: (res) => { //接口调用结束的回调<br>                console.info('ajax complete');<br>                if (showLoading == true)<br>                    uni.hideLoading();<br>            }<br>        });<br>    },<br>    /**<br>     * @description  ajax get请求,返回数据格式不定<br>     * <br/>success回调方法的参数就是返回的原始数据<br>     * @param {string} url 请求的地址<br>     * @param {object} data 请求参数<br>     * @param {function} success 成功后回调的方法<br>     */<br>    get: function(url, data, success) {<br>        base.logInfo("ajax get url:" + url);<br>        alert.showLoading();<br>        uni.request({<br>            url: ajax.apiUrl + url,<br>            method: 'GET',<br>            timeout: 600000,<br>            header: {<br>                'token': login.getValue('token')<br>            },<br>            data: data,<br>            success: (res) => {<br>                if (res.statusCode == "200") {<br>                    console.info('------api请求返回数据:' + url);<br>                    success(res.data);<br>                } else {<br>                    if(res.data.error!="")<br>                    {<br>                        alert.showError(res.data.error);<br>                    }<br>                    else<br>                    {<br>                        alert.showError('系统繁忙，请稍后再试');<br>                    }<br>                }<br>            },<br>            fail: (res) => {<br>                console.info(res);<br>                alert.showError('网络请求出错');<br>            },<br>            complete: (res) => {<br>                alert.hideLoading();<br>            }<br>        });<br>    },<br>    /**<br>     * @description ajax PUT请求,返回json数据<br>     * @param {string} url 请求的地址<br>     * @param {object} data 请求参数<br>     * @param {function} success 成功后回调的方法<br>     * @param {function} fail 失败后回调的方法<br>     * @param {bool} showLoading 是否显示加载框(默认false)<br>     * /api/xxx/xxx<br>     */<br>    put: function(url, data, success, showLoading) {<br>        if (base.isNull(showLoading))<br>            showLoading = false;<br>    <br>        base.logInfo("ajax post url:" + url);<br>        if (showLoading == true)<br>            alert.showLoading();<br>        console.info(ajax.apiUrl + url);<br>        uni.request({<br>            url: ajax.apiUrl + url,<br>            data: data,<br>            method: 'PUT',<br>            timeout: 600000,<br>            header: {<br>                // 'content-type':'application/x-www-form-urlencoded',application/json <br>                'content-type':'application/json',<br>                'token': login.getValue('token')<br>            },<br>            success: (res) => {<br>                console.info(res);<br>                if (res.statusCode == "200") {<br>                    console.info('------api请求返回数据:' + url);<br>                    success(res.data);<br>                } else {<br>                    if(res.data.error!="")<br>                    {<br>                        alert.showError(res.data.error);<br>                    }<br>                    else<br>                    {<br>                        alert.showError('系统繁忙，请稍后再试');<br>                    }<br>                }<br>                // uni.hideLoading();<br>            },<br>            fail: (res) => {<br>                console.info(res);<br>                alert.showError('系统繁忙，请稍后再试');<br>            },<br>            complete: (res) => {<br>                console.info('ajax complete');<br>                if (showLoading == true)<br>                    uni.hideLoading();<br>            }<br>        });<br>    },<br>    <br>    /**<br>     * @description ajax DELETE请求,返回json数据<br>     * @param {string} url 请求的地址<br>     * @param {object} data 请求参数<br>     * @param {function} success 成功后回调的方法<br>     * @param {function} fail 失败后回调的方法<br>     * @param {bool} showLoading 是否显示加载框(默认false)<br>     * /api/xxx/xxx<br>     */<br>    delete: function(url, data, success, showLoading) {<br>        if (base.isNull(showLoading))<br>            showLoading = false;<br>    <br>        base.logInfo("ajax post url:" + url);<br>        if (showLoading == true)<br>            alert.showLoading();<br>        console.info(ajax.apiUrl + url);<br>        uni.request({<br>            url: ajax.apiUrl + url,<br>            data: data,<br>            method: 'DELETE',<br>            timeout: 600000,<br>            header: {<br>                // 'content-type':'application/x-www-form-urlencoded',application/json <br>                'content-type':'application/json',<br>                'token': login.getValue('token')<br>            },<br>            success: (res) => {<br>                console.info(res);<br>                if (res.statusCode == "200") {<br>                    console.info('------api请求返回数据:' + url);<br>                    success(res.data);<br>                } else {<br>                    if(res.data.error!="")<br>                    {<br>                        alert.showError(res.data.error);<br>                    }<br>                    else<br>                    {<br>                        alert.showError('系统繁忙，请稍后再试');<br>                    }<br>                }<br>                // uni.hideLoading();<br>            },<br>            fail: (res) => {<br>                console.info(res);<br>                alert.showError('系统繁忙，请稍后再试');<br>            },<br>            complete: (res) => {<br>                console.info('ajax complete');<br>                if (showLoading == true)<br>                    uni.hideLoading();<br>            }<br>        });<br>    },<br>    <br>}<br><br>export default ajax;<br><br>

 

把封装的方法导入整个框架，在main.js写引入方法

 

?

1 2 3

import sjuAjax from './common/sju.ajax.js'   Vue.prototype.sjuAjax = sjuAjax;

 

 

页面调用方法示例：

?

1 2 3 4 5 6

this.sjuAjax.post('/api/xxx/xxx', {     text: '数据',//请求参数     test:'数据'     }, data => {         console.log(data)//请求接口成功返回结果 })