（uni-app）微信小程序之网络请求封装

话不多说，直接上代码！！！

一、目录结构

目录结构仅为个人建议，可随意更改。注：utils文件夹下可放一些公共方法之类的文件，便于管理。

二、请求封装（utils > request.js）

let baseURL = ''
// 	根据环境变量改变请求接口统一前缀
if(process.env.NODE_ENV === 'development'){
	baseURL = 'https://www.baidu.com'	//	开发环境
}else{
	baseURL = 'https://127.0.0.1'	//	开发环境
}

const cookie =  uni.setStorageSync('cookie', 'hello');

/** 
 * post方法，对应post请求 
 * @param {String} url [请求的url地址] 
 * @param {Object} params [请求时携带的参数] 
 */
export function post(url, params) {
    return new Promise((resolve, reject) => {
        uni.request({
            url: baseURL + url,
            data: params,
            header: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
				'cookie': cookie
            },
            method: "POST",
            success: (response) => {
                let res = response.data
                if (res.code === 200) {
                    resolve(res)
                } else {
                    reject(res)
                    showError(res);
                }
            },
            fail: (error) => {
                if (error && error.response) {
                    reject(error.response)
                    showError(error.response);
                }
            },
        });
    })
}

/**
 * get方法，对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function get(url, params) {
    return new Promise((resolve, reject) => {
        uni.request({
            url: baseURL + url,
            data: params,
            header: {
                'Accept': 'application/json',
                'Content-Type': 'application/x-www-form-urlencoded', //自定义请求头信息
                'cookie': cookie
            },
            method: "GET",
            success: (response) => {
                let res = response.data
                if (res.code === 200) {
                    resolve(res)
                } else {
                    reject(res)
                    showError(res);
                }
            },
            fail: (error) => {
                if (error && error.response) {
                    reject(error.response)
                    showError(error.response);
                }
            }
        });
    })
}

const showError = error => {
    let errorMsg = ''
    switch (error.code) {
     	case 301:
            errorMsg = '未授权，请登录'
            break
        case 400:
            errorMsg = '请求参数错误'
            break 
        case 403:
            errorMsg = '跨域拒绝访问'
            break
        case 404:
            errorMsg = '请求地址不存在'
            break
        case 500:
            errorMsg = '服务器内部错误'
            break
        case 504:
            errorMsg = '请求超时'
            break
        default:
            errorMsg = "请求失败"
            break
    }
    uni.showToast({
        title: errorMsg,
        icon: 'none',
        duration: 3000,
        complete: function() {
            setTimeout(function() {
                uni.hideToast();
            }, 3000);
        }
    });
}

三、模块接口（api > modules > mine.js）

import { post, get } from "../../utils/request.js"

export const getPermissions = params => get('/system/getPermissions', params)

其他模块接口写法同上 👆

四、主入口 （api > index.js）

const mine = require('./modules/mine')
const awardPond = require('./modules/awardPond')
const standings = require('./modules/standings')

export default {
	...mine,
	...awardPond,
	...standings,
}

五、全局挂载 （main.js）

// 网络请求
import api from "@/api/index"
Vue.prototype.$api = api;

五、业务代码中使用

this.$api.getPermissions({a:1}).then(res=>{
	console.log(res)
	...
}).catch(err=>{
	console.log(err)
	...
})

总结

基于以上代码，进行了api统一管理后，所有和请求相关的内容都可以放置在api中统一管理，并且还带来一个好处， 如果你在开发前已经拿到了后端给的接口文档，那你就可以直接根据接口文档把所有和请求相关的事务先集中完成，然后再去做业务，这样不用在接口和业务之间来回切换，提升开发效率。

加油！奥里给！！！