官网：https://www.quanzhan.co/luch-request/
 
下载luch-request插件，将插件放在common目录里
在根目录下的common目录里创建http目录，新建index.js
commom/http/index.js
 
import Request from '@/common/luch-request/index.js'
const http = new Request();
import {baseUrl} from './baseUrl.js'
 
let defaultUrl = ''
if(process.env.NODE_ENV === 'production'){
	defaultUrl = baseUrl
}else{
	defaultUrl = 'xxxx'
}
 
http.setConfig((config) => { /* 设置全局配置 */
	config.baseURL = defaultUrl
	config.custom = {
		loading:true
	} 
	config.header = {
		
		// a: 1, // 演示用
		// b: 2 // 演示用
	}
	return config
})
 
//请求前拦截，用来动态加参
http.interceptors.request.use((config) => { // 可使用async await 做异步操作
	if(config.url !== '/logins' && config.url!=='/captcha/logins'){
		config.header.Authorization ='Bearer '+ uni.getStorageSync("token")
	}
	
	console.log('请求前拦截header',config)
	if(config.url == '/images'){
		config.header = {
        'Accept': 'application/json',
        'Content-Type': 'multipart/form-data',
		'Authorization':'Bearer' +' ' + uni.getStorageSync("token")
      }
	}
	config.header = {
		...config.header,
		a: 1 // 演示拦截器header加参  
	}
	// 演示custom 用处  
	if (config.custom.loading) {
		uni.showLoading()
	}
	return config
}, (config) => {
	return Promise.reject(config)
})
 
 
// 请求后
http.interceptors.response.use((response) => {
	
	if (response.config.custom.loading) {
		uni.hideLoading()
	}
	if (response.statusCode > 300 ||response.statusCode< 200) { 
		console.log('reject')
	  return Promise.reject(response)  
	} 
	return response.data
}, (response) => { // 请求错误。可以使用async await 做异步操作  
	console.log(response,'错误')
	if (response.config.custom.loading) {
		uni.hideLoading()
	}
	if(response.statusCode == 401){
		uni.clearStorageSync();
		uni.showToast({
		    title: '登录失败，请重新登录',
		    duration: 2000
		});
		
		if(response.config.url !== "/logins"){
			uni.reLaunch({
				url:'/pages/login/login'
			})
		}
	}else{
		uni.showToast({
		    title: response.data.messages[0].content,
			icon: 'none',
		    duration: 2000
		});
	}
	return Promise.reject(response)
})
export default http
 
4、在main.js里引入
 
import * as http from './common/http/index.js'
 
Vue.prototype.$http = http;
 
5、在页面里调用
 
this.$http.get(`/i/list`).then(res => {
	this.data = res
}).catch(err => {})
 
this.$http.post('/logins', {
	mobile: this.form.mobile
}).then(res => {
	....				
}).catch(err => {})
 
baseUrl.js 里 为 export let baseUrl = ‘http://192.168.1.1’,也可以直接写在这个页面
 
转载：https://blog.csdn.net/lll_liuhui/article/details/109055111

第一种方式
 
内容区：
 
<view class="content">
	<button type="default" @click="testInternet">测试网络</button>
	<view>网络状态：{{isOnline}}</view>
</view>
 
js代码：
 
//测试网络状态
async testInternet() {
	uni.showLoading({
		title: '请求中'
	})
	var [err, res] = await uni.request({
		method: 'GET',
		url: 'http://127.0.0.1',
		timeout: 2000
	})
	uni.hideLoading()
	if (res) {
		this.isOnline = true
	} else {
		this.isOnline = true
	}
	console.log('可以上网？')
	console.log(this.isOnline)
}
 
第二种方式
 
uni.request同步化,具体代码参考
 
<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<view class="content">
			<button type="default" @click="testInternet">测试网络</button>
			<view>网络状态：{{isOnline}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				isOnline: false
			}
		},
		onLoad() {
			// this.doTest()
			this.doTest2()
		},
		methods: {
			async doTest(){
				var test1 = await this.getTest1()
				if(test1){
					var test2=await this.getTest2()
				}
				console.log('22222222222222')
			},
			doTest2(){
				this.getTest1()
					.then((res)=>this.getTest2())
					.then((res)=>this.getTest3())
					.catch((err)=>{
						console.log(err)
					})
			},
			getTest1(){
				return new Promise((resolve,reject)=>{
					uni.request({
						url:'http:172.18.5.3',
						method:'GET',
						success: (res) => {
							console.log(res.statusCode)
							console.log('test1')
							resolve(true)
						},
						fail:(err)=>{
							console.log(err)
							console.log('test1')
							reject(false)
						}
					})
				})
			},
			getTest2(){
				return new Promise((resolve,reject)=>{
					uni.request({
						url:'http:172.18.5.3',
						method:'GET',
						success: (res) => {
							console.log(res.statusCode)
							console.log('test2')
							resolve('suc')
						},
						fail:(err)=>{
							console.log(err)
							console.log('test2')
							reject('err')
						}
					})
				})
				
			},
			getTest3(){
				return new Promise((resolve,reject)=>{
					uni.request({
						url:'http:172.18.5.3',
						method:'GET',
						success: (res) => {
							console.log(res.statusCode)
							console.log('test3')
							resolve('suc')
						},
						fail:(err)=>{
							console.log(err)
							console.log('test3')
							reject('err')
						}
					})
				})
				
			},
			//测试网络状态
			async testInternet() {
				uni.showLoading({
					title: '请求中'
				})
				var [err, res] = await uni.request({
					method: 'GET',
					url: 'http://172.18.5.3',
					timeout: 2000
				})
				uni.hideLoading()
				if (res) {
					this.isOnline = true
				} else {
					this.isOnline = false
				}
				console.log('可以上网？')
				console.log(this.isOnline)
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

首先安装luch-request ，我是用插件中心直接导入，然后根目录下utils下放插件luch-request
 
根据文档在main.js里创建实例
 在全局配置里可以设置默认参数和拦截器
 静态参数就放在config里，比如type,event之列，动态的就使用拦截器传参，比如token。返回的参数也可以用拦截器来获取，比如response codes 判断登录状态、权限
 
 //引入全局请求插件
import { http,api } from '@/config/common.js' // 全局挂载引入，配置相关在该index.js文件里修改
Vue.prototype.$http = http
Vue.prototype.$api = api
 
然后根目录下创建config目录，建立common.js。在这里引入插件，与全局配置，拦截器。
 局部配置的优先级高于全局配置，这个根据需要使用
 
import Request from '@/utils/luch-request/index.js'
export const apiBaseUrl = 'http://www.baidu.com'
const api = new Request()
const http = new Request()
export {
  http,
  api
}
http.config.header = {website:'123dfdf465132'}
api.config.header={aaaaaaa:'sdfsdfsdfsdfsd'}
api.setConfig((config) => { /* 设置全局配置 */
  config.header = {
    ...config.header,
    a: 1111111, // 演示
    b: 2222 // 演示
  }
  return config
})


//请求前拦截，用来动态加参,例如token
api.interceptors.request.use((config) => { // 可使用async await 做异步操作
  config.baseURL = apiBaseUrl
  config.header = {
    ...config.header,
    token:uni.getStorageSync('token')
    // 'testaaa': '11' // 演示拦截器header加参
  }

  // 演示custom 用处
  // if (config.custom.auth) {
  //   config.header.token = 'token'
  // }
  // if (config.custom.loading) {
  //  uni.showLoading()
  // }
  /**
   /* 演示
   if (!token) { // 如果token不存在，return Promise.reject(config) 会取消本次请求
      return Promise.reject(config)
    }
   **/
  return config
}, config => { // 可使用async await 做异步操作
  return Promise.reject(config)
})


// 请求后
api.interceptors.response.use((response) => {
  console.log(response)
  return response
}, (response) => { /*  对响应错误做点什么 （statusCode !== 200）*/
  console.log(response)
  console.log(response.statusCode);
  //未登录时清空缓存跳转
  if(response.statusCode ==401){
	  uni.clearStorageSync();
	  uni.switchTab({
	  	url:"/pages/user/user"
	  })
  }
  return Promise.reject(response)
})
 
用的时候在页面里直接调用
 
 
		this.$http.post('/api/demo/test1', {userName: 'name', password: '123456'} ).then(res => {
		
		}).catch(err => {
		
		})

1.首先在根目录新建common/http目录，然后在http中新建两个js如 图
 
 
2.http.js代码
 
import Vue from 'vue'
const request = (params) => {
	// 显示加载数据的提示
	uni.showLoading({
		title: '加载中',
		mask: true
	})
	return new Promise(function(resolve, reject) {
		const baseUrl = Vue.prototype.$baseUrl;
		let token_value;
		try {
			token_value = uni.getStorageSync('token');
			if (token_value) {
				token_value = 'Bearer ' + token_value;
			}
		} catch (e) {
			// error
		}
		uni.request({
			method: params.method,
			data: params.data,
			url:baseUrl + params.url,
			header: {
                    此处是token 可不加，如果加了需要配置后端允许跨域
				'Authorization': 'token'
			},
			success(res) {
				setTimeout(function() {
					resolve(res)
				}, 500);
			},
			fail(err) {
				reject(err)
			},
			complete() {
				setTimeout(function() {
					uni.hideLoading()
				}, 500);

			}
		})
	})
}
export default request;
 
3.api.js 存放的是所有的接口
 
import request from "./http.js"
import Vue from 'vue'
export default {
	//获取app版本
	api_getUpdateApp: function(params) {
		return request({
			method: "POST",
			url: "index/app_fun/getUpdateApp",
			data: params
		});
	},
	///获取首页的功能列表
	api_getFunList:function(params) {
		return request({
			method:"POST",
			url:"api/app_fun/getFunList",
			data:params
		})
	},

}
 
 3.配置main.js,允许全局使用
 
import Vue from 'vue'
import App from './App'
import api from 'common/http/api.js'

Vue.prototype.$api = api

 if (process.env.NODE_ENV === 'development') {
 	//开发环境
 	Vue.prototype.$http="http://192.168.0.103/"
 	Vue.prototype.$baseUrl = "http://192.168.0.103/public/index.php/"
 	Vue.prototype.$fileUrl = "http://192.168.0.103/public/"
 } else {
 	//生产环境
	Vue.prototype.$http="https://s.june.com/"
 	Vue.prototype.$baseUrl = "https://s.june.com/public/index.php/"
 	Vue.prototype.$fileUrl = "https://s.june.com/public/" //图片展示域名
 }
App.mpType = 'app'

const app = new Vue({
	...App
})
app.$mount()
 
4.页面中调用接口
 
<template>
	<view class="content">

	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
			
			}
		},
		onLoad() {
               /* 该接口是在api.js中定义过的 */
			this.$api.api_getUpdateApp({
				user_id:'sdfsdfsd',
				name:'测试'
			}).then(res=>{
				/* 成功的回调 */
			}).catch(err=>{
				/* 失败回调 */
			}).finish(e=>{
				/* 成功或者失败都会执行 */
			})
		},
		methods: {

		}
	}
</script>

<style>

</style>