uni-app request请求封装

首先创建一个common文件,文件中写一个request.js
uni-app request请求封装
话不多说直接上代码


export  default {
	// 全局配置
	common:{
		baseUrl: "http://ceshi.dishait.cn",
		header:{
			"Content-type" : "application/json;charset=UTF-8"
		},
		data:{},
		method:"GET",
		dataType:'json'
	},
	// 请求返回  promise
	request(options={}){
		let common = this.common;
		// 组织参数
		options.url = common.baseUrl + options.url;
		options.header = options.header  || common.header;
		options.data = options.data  || common.data;
		options.method = options.method || common.method;
		options.dataType = options.dataType || common.dataType;
		
		// 请求
		return new Promise((res,rej)=>{
			uni.request({
				...options,
				success(result){
					let {statusCode,data}  = result;
					
					// 返回原始数据
					if(options.native){
						return res(result)
					}
					// 服务端失败
					if(statusCode !== 200 ){
						if(options.toast !== false){
							uni.showToast({
								title:data.msg  || "服务端失败",
								icon:"none"
							})
						}
						return rej(data)
					}
					
					res(data)
				},
				fail({errMsg}) {
					uni.showToast({
						title:errMsg  || "请求失败",
						icon:"none"
					})
					return rej()
				}
			})
		})
		
	},
	
	// get请求
	get(url,data={},options={}){
		options.url = url;
		options.data = data;
		options.method = 'GET';
		return this.request(options)
	},
	
	
	// post请求
	post(url,data={},options={}){
		options.url = url;
		options.data = data;
		options.method = 'POST';
		return this.request(options)
	},
	
	
	// delete请求
	delete(url,data={},options={}){
		options.url = url;
		options.data = data;
		options.method = 'DELETE';
		return this.request(options)
	}
	
}

然后在main.js引入

import Vue from 'vue'
import App from './App'
//引入request
import request from '@/common/request.js'
Vue.config.productionTip = false

App.mpType = 'app'
//挂载到vue的原型上
Vue.prototype.$http = request
const app = new Vue({
	...App
})
app.$mount()

组件中使用

mounted() {
			this.$http.get("/app_index").then(res => {
				this.swiperImages = res.swiperImages
				
			})
		}
上一篇:npm-link基本使用


下一篇:discuz 格子广告位 对齐