百万前端之uniapp封装网络请求

1.创建文件

首先，创建一个名为 api 的文件夹，并在该文件夹下创建两个 JavaScript 文件：api.js 和 request.js。

/api

├── api.js

└── request.js

2. 文件内容

request.js —— 封装 HTTP 请求

// 全局请求封装
const base_url = 'https://127.0.0.1:80/'
// 请求超出时间
const timeout = 5000

export default params => {
	let url = params.url
	let method = params.method || 'get'
	let data = params.data || {}
	let header = {
		'Content-Type': 'application/json;charset=UTF-8',
		...params.header
	}
	return new Promise((resolve, reject) => {
		uni.request({
			url: base_url + url,
			method: method,
			header: header,
			data: data,
			timeout,
			success(response) {
				const res = response
				// 根据返回的状态码做出对应的操作
				if (res.statusCode == 200) {
					resolve(res.data)
				}
			},
			fail(err) {
				console.log(err)
				if (err.errMsg.indexOf('request:fail') !== -1) {
					uni.showToast({
						title: '网络异常',
						icon: 'error',
						duration: 2000
					})
				} else {
					uni.showToast({
						title: '未知异常',
						duration: 2000
					})
				}
				reject(err)
			},
		})
	}).catch(() => {})
}

api.js —— 定义 API 接口

// api.js
import request from './request.js'

// 获取用户信息
export function getUser(data) {
	return request({
		url: 'user/info',
		method: 'GET',
		data
	})
}
// 获取首页banner图
export function getBanner() {
	return request({
		url: 'index/banner',
		method: 'GET',
	})
}

页面使用

import { getUser } from '../../api/api'
export default {
    methods:{
        getUserDate () {
		    const data= {
					page: 1,
					size: 10,
					mall_id: 1
				};
				getUser (data).then(res => {
					this.List = res.data
				})		
		},
    }
}