UniApp中封装request网络请求包含GET、POST、PUT、DELETE等

一、在项目根目录创建common文件夹，用于放置config.js、api.js、request.js等等文件，在config.js文件中用于配置api的开发环境及生产环境的host，代码如下:

let BASE_URL = ''

if (process.env.NODE_ENV == 'development') {
    BASE_URL = '  ' // 开发环境hosts
} else {
    BASE_URL = '      ' // 生产环境
}

const configService = {
    baseUrl: BASE_URL,
};

export default configService

二、api.js文件可以用来放置项目中接口请求需要用到的url,方便统一管理，后期更改时更方便修改。代码如下：

export const userAPI = {
    login: '/userAuth/login',
    register: ''
} 

也可以根据实际需求创建如userAPI、productAPI等等的名称的API，用于区分不同功能模块的请求接口

三、就是request.js文件了，通过uni.request Api来实现网络请求。代码如下：

import configService from './config.js'//引入配置文件，用于拼接host
// 封装请求
function request(url, method, data, isForm) {
    return new Promise((resolve, reject) => {
        uni.request({
            url,
            data,
            method,
            header: {
                // 'Accept': '*/*',
                'Content-Type': isForm ? 'application/x-www-form-urlencoded' :
                "application/json", //根据后台接口确定类型JSON application/json或                form："application/x-www-form-urlencoded";
                "Authorization": `Bearer ${uni.getStorageSync(ACCESS_TOKEN)}`//用户登录成功后将token存在localStorage中，用于后续接口请求认证
            },
            success: (res) => {
                resolve(res)
            },
            fail: (err) => {
                reject(err)   //可以在这里统一处理err，一般可以提示服务器无法连接，检查网络等。
            }
        })
    })
}

function get(url, data = {}, isForm = true) {
    return request(configService.baseUrl + url, "GET", data, isForm);
}

function post(url, data = {}, isForm = true) {
    return request(configService.baseUrl + url, "POST", data, isForm);
}

function put(url, data = {}, isForm = true) {
    return request(configService.baseUrl + url, "PUT", data, isForm);
}

function del(url, data = {}, isForm = true) {//function中delete为关键字，改用del
    return request(configService.baseUrl + url, "DELETE", data, isForm);
}

const httpService= {
    get: get,
    post: post,
    put: put,
    delete: del
}

export default httpService

四、可以在根目录创建service文件夹，在文件夹内根据需求创建如userService.js用于处理用户相关网络请求回来的数据，代码如下：

import { userAPI } from "@/common/apis/userApi.js"
import httpService from "@/common/request.js"

export function login(userName, pwd) {
    let url = userAPI.login;
    let params = {
        userName: userName,
        password: pwd
    }
    let promise = httpService.post(url, params).then((res) => {
        return res;
    }, (error) => {
        return error;   
    });
    return promise;
}

最后，在pages文件中的login.vue中调用对应userService.js中对应的方法即可。代码如下

<script>
    import {login} from "@/services/userService.js"
    export default {
        data() {
            return {
                userName:'',//双向绑定用户输入的用户名、密码
                pwd:''
            }
        },
        methods: {
            async doLogin(){
                let res = await login(this.userName,this.pwd)
                console.log(res)  //处理登录成功，存储token到localStorage，跳转页面。登录失败，提醒用户。
            }
        }
    }
</script>

以上名称可以根据实际需求修改，适用于APP和微信小程序