uniapp原生请求封装

陆先森

有没有小伙伴遇到过这种问题，在开发uniapp项目中，打包为app后使用axios请求是无法使用了，这里根据自己开发的项目并且结合网上的大神做了一个uniapp的请求封装（写的很细，大神略过，小白可以康康，有不足的地方多多指点，不喜勿喷）

1.在项目根目录创建一个文件夹apis

目录直接上图

在api里面存放自己的api文件，也贴一个图吧

可以通过传入isLoading来控制这个请求是否开启loading效果

2.request.js中代码如下

 let baseURL = 'https://www.baidu.com';
 /*
   baseURL可以根据环境变量来判断，改为
   let baseURL = process.env.NODE_ENV === 'development' ? 'http://192.168.5.202:8070' : 'https://www.baidu.com';
 */

//默认参数
let config = {
        baseURL: baseURL,
        header: {
                'content-type': 'application/json',
                'token': uni.getStorageSync('token')//根据自身情况是否添加token
        },
        method: 'POST',
        dataType: 'json',
        responseType: 'text',
        sslVerify: false, //是否验证ssl证书
}

//暴露设置token的方法
export function setToken(token) {
        uni.setStorageSync("token", token)
        config.header.token = token
}

/**
 *  拦截器
 * home.php?mod=space&uid=275307 {*} options
 */
let Interceptor = options => {
        options.url = config.baseURL + options.url;
        options.dataType = options.dataType || config.dataType;
        options.data = { ...options.data,
                    language: uni.getStorageSync('language') || 'zh-CN'//根据自身情况，是否后端需要多语言配置，不需要就删掉
        };
        options.header = { ...options.header,
                ...config.header
        };

        options.method = options.method || config.method;
        options.sslVerify = options.sslVerify || config.sslVerify;
        //如果传入loading为true,则显示loadding
        if (options.isloading) {
                uni.showLoading({
                        title: '加载中',
                        mask: true
                })
        }
        return options;
}

/**
 * 响应器
 * @param {*} res
 */
let Responder = res => {
        uni.hideLoading();
        if (res.data.code === "200") {
                return Promise.resolve(res.data);
        } else if (res.data.code === "302") {
                        uni.reLaunch({
                                url: "/pages/login/login"
                        })
                return Promise.reject({msg:"登录失效"});
        } else {
                return Promise.reject(res.data);
        }
}

/**
 * 请求
 *
 * */
let request = (options = {}) => {

        options = Interceptor(options);

        //发起请求
        return new Promise((resolve, reject) => {
            // 判断有无网络验证
            uni.getNetworkType({
                    success(res) {
                            if (res.networkType == 'none') {
                                    uni.showModal({
                                            title: '没有网络',
                                            content: '请检查您的网络',
                                            showCancel: false,
                                            success: (res) => {
                                                    uni.hideLoading()
                                            }
                                    });
                            }else{
                                    uni.request({
                                            ...options,
                                            success: res => {
                                                    resolve(Responder(res))
                                            },
                                            fail: err => {
                                                    reject(err)
                                            }
                                    })
                            }
                    }
            })

        })
}

export default {
        get(url, data, options = {}) {
                options.url = url
                options.data = data
                options.method = 'GET'
                return request(options)
        },
        post(url, data, options = {}) {
                options.url = url
                options.data = data
                options.method = 'POST'
                return request(options)
        }

}

3.index.js中代码如下

/*这里是用到的正则来匹配api文件下的所有js文件后做的一统一暴露，不需要我们一个js一个js文件引入啦*/
let api = {};
const context = require.context("./api", true, /\.js$/);
context.keys().forEach((e) => {
  api = { ...api, ...context(e).default };
});
export default {
        ...api
}

4.最后一步就很简单了，我们只需要在main.js中挂载这些api就行啦

   import api from "./apis"
   Vue.prototype.$api = api;

5.下面看一下在文件中使用方式吧

   onlogin() {
      this.$api
        .login({
          account: this.form.username,
          password: this.form.pwd,
        })
        .then((res) => {
          setToken(res.data.token);
          uni.switchTab({
            url: "/pages/index/index",
          });
        })
        .catch((err) => {
          this.$u.toast(err.msg);
        });
    },