uni-app封装request

670 阅读1分钟

新建request.js

// request.js
const baseUrl = 'https://api.xxx.com/api/' // 请求地址

// 封装 Promise
export const request = (options = {}) => {
	return new Promise((resolve, reject) => {
		uni.request({
			url: baseUrl + options.url, // 拼接url
			method: options.method || 'GET', // 请求方法
			data: options.data || {}, // 请求参数
			header: options.header || {
				'Content-Type': 'application/json'
			}, // 请求header
			success: (res) => {
				// 请求成功
				resolve(res);
			},
			fail: (err) => {
				// 请求失败处理
				uni.showToast({
					icon: "none",
					title: '请求失败'
				});
				console.log(baseUrl + options.url, err);
				reject(err);
			},
		});
	});
};

新建api.js,统一管理接口

// api.js
import { request } from './request.js'; // 引入封装好的request.js

export const getData = (params) => {
    return request({
        url: 'getData',
        method: 'GET',
        data: params,
    });
};

页面中使用

// 页面中使用
import { getData } from '../../api/api.js'; // 引入api.js

export default {
    data() {
        return {
            list: [],
        };
    },
    onLoad() {
        this.getData();
    },
    methods: {
        getData({current:1,pageSize:10}).then(res => {
            this.list = res.data;
        }).catch(err => {}
            console.log(err);
        );
    }
};