uView请求数据配置

以对_

已于 2022-10-03 09:53:38 修改

阅读量1.2k

点赞数

分类专栏： uni-app学习记录文章标签： vue.js javascript 前端

于 2022-09-30 10:18:04 首次发布

本文链接：https://blog.csdn.net/qq_44161722/article/details/127117343

版权

uni-app学习记录专栏收录该内容

22 篇文章 0 订阅

订阅专栏

官方链接：https://v1.uviewui.com/js/http.html
其实文档里写的很清楚，但第一次配置时还是很懵

请求数据的简单使用方法

第一步、需要进行参数配置，根据文档要求，在根目录下新建/common/http.interceptor.js文件，即先创建common目录(如果没有的话)，再创建http.interceptor.js文件，将拦截器相关代码写在里面。

// common/http.interceptor.js

// 这里的Vue为Vue对象(非创建出来的实例)，vm为main.js中“Vue.use(httpInterceptor, app)”这一句的第二个参数，
// 为一个Vue的实例，也即每个页面的"this"
// 如果需要了解这个install方法是什么，请移步：https://uviewui.com/components/vueUse.html
// 这里的vm，就是我们在vue文件里面的this，所以我们能在这里获取vuex的变量，比如存放在里面的token
const install = (Vue, vm) => {
	// 此为自定义配置参数，具体参数见上方说明
	Vue.prototype.$u.http.setConfig({
		
		baseUrl: 'https://xxxxxxx', // 请求的本域名（写你请求的域名即可）
		method: 'POST',
		// 设置为json，返回后会对数据进行一次JSON.parse()
		dataType: 'json',
		showLoading: true, // 是否显示请求中的loading
		loadingText: '请求中...', // 请求loading中的文字提示
		loadingTime: 800, // 在此时间内，请求还没回来的话，就显示加载中动画，单位ms
		originalData: false, // 是否在拦截器中返回服务端的原始数据
		loadingMask: true, // 展示loading的时候，是否给一个透明的蒙层，防止触摸穿透
		// 配置请求头信息
		header: {
			'content-type': 'application/x-www-form-urlencoded'
		},
	});
}
export default {
	install
}

第二步、在根目录的main.js 的new Vue()和app.$mount()之间引入此文件，在new Vue()后面的原因是，外部JS文件需要引用vue的实例，也即this对象，要等main.js中通过new创建了实例之后才能引用。在app.$mount()之前的原因是，在Vue挂载this实例(也即初始化App.vue)之前配置请求信息，所以在App.vue中也能正常发出请求

import App from './App'
import Vue from 'vue'
// 引入uView 框架
import uView from "uview-ui";
Vue.use(uView);

Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
    ...App
})

// http拦截器，此为需要加入的内容，如果不是写在common目录，请自行修改引入路径
import httpInterceptor from '@/common/http.interceptor.js'
// 这里需要写在最后，是为了等Vue创建对象完成，引入"app"对象(也即页面的"this"实例)
Vue.use(httpInterceptor, app)

app.$mount()

以上配置完成后，即可发送请求，获取到数据

this.$u.get('index.php?_mall_id=1&r=api/home/indexs').then(res => {
	console.log(res);
});

请求拦截

// common/http.interceptor.js

// 这里的Vue为Vue对象(非创建出来的实例)，vm为main.js中“Vue.use(httpInterceptor, app)”这一句的第二个参数，
// 为一个Vue的实例，也即每个页面的"this"
// 如果需要了解这个install方法是什么，请移步：https://uviewui.com/components/vueUse.html
// 这里的vm，就是我们在vue文件里面的this，所以我们能在这里获取vuex的变量，比如存放在里面的token
const install = (Vue, vm) => {
	// 此为自定义配置参数，具体参数见上方说明
	Vue.prototype.$u.http.setConfig({
		
			baseUrl: 'https://xxxxxx', // 请求的本域名
			method: 'POST',
			// 设置为json，返回后会对数据进行一次JSON.parse()
			dataType: 'json',
			showLoading: true, // 是否显示请求中的loading
			loadingText: '请求中...', // 请求loading中的文字提示
			loadingTime: 800, // 在此时间内，请求还没回来的话，就显示加载中动画，单位ms
			originalData: false, // 是否在拦截器中返回服务端的原始数据
			loadingMask: true, // 展示loading的时候，是否给一个透明的蒙层，防止触摸穿透
			// 配置请求头信息
			header: {
				'content-type': 'application/x-www-form-urlencoded'
			},
		
	});
	// 请求拦截部分，如配置，每次请求前都会执行
	Vue.prototype.$u.http.interceptor.request = (config) => {
		
		const token = vm.token;
		// 引用token
		config.header['X-Access-Token'] = token;
		config.header['X-App-Platform'] = 'wxapp';
		
		return config;
		// 如果return一个false值，则会取消本次请求
	}
	
	// 响应拦截，如配置，每次请求结束都会执行本方法
	Vue.prototype.$u.http.interceptor.response = (res) => {
		if(res.code == 200) {
			// res为服务端返回值，可能有code，result等字段
			// 这里对res.result进行返回，将会在this.$u.post(url).then(res => {})的then回调中的res的到
			// 如果配置了originalData为true，请留意这里的返回值
			return res.result;
		} else if(res.code == 201) {
			// 假设201为token失效，这里跳转登录
			vm.$u.toast('验证失败，请重新登录');
			setTimeout(() => {
				// 此为uView的方法，详见路由相关文档
				vm.$u.route('/pages/user/login') // 登录页面
			}, 1500)
			return false;
		} else {
			// 如果返回false，则会调用Promise的reject回调，
			// 并将进入this.$u.post(url).then().catch(res=>{})的catch回调中，res为服务端的返回值
			return false;
		}
	}
}

export default {
	install
}

API集中管理

如果在项目中，接口较多，那么可以创建一个文件进行http接口API集中管理，这里说的集中管理，是指把各个请求，统一放到一个文件中进行管理，这样的好处是不用每次调用this.$u.get时都需要传入url参数，一些固定的请求参数也可以不用显式的传入，如下为配置后的使用示例：
API集中管理的文档：https://v1.uviewui.com/js/apiManage.html

this.$u.api.getSearch().then(res => {
	console.log(res);
})

第一种方法

第一步、在目录common下，创建http.api.js

// /common/http.api.js

// 如果没有通过拦截器配置域名的话，可以在这里写上完整的URL(加上域名部分)
let hotSearchUrl = '/ebapi/store_api/hot_search';
let indexUrl = '/ebapi/public_api/index';

// 此处第二个参数vm，就是我们在页面使用的this，你可以通过vm获取vuex等操作，更多内容详见uView对拦截器的介绍部分：
// https://uviewui.com/js/http.html#%E4%BD%95%E8%B0%93%E8%AF%B7%E6%B1%82%E6%8B%A6%E6%88%AA%EF%BC%9F
const install = (Vue, vm) => {
	// 此处没有使用传入的params参数
	let getSearch = (params = {}) => vm.$u.get(hotSearchUrl, {
		id: 2
	});
	
	// 此处使用了传入的params参数，一切自定义即可
	let getInfo = (params = {}) => vm.$u.post(indexUrl, params);
	
	// 将各个定义的接口名称，统一放进对象挂载到vm.$u.api(因为vm就是this，也即this.$u.api)下
	vm.$u.api = {getSearch, getInfo};
}

export default {
	install
}

第二步、在main.js中进行挂载，如果您配置了拦截器，这部分的引入代码，需要写在拦截器引入的后面

import App from './App'
import Vue from 'vue'

import uView from "uview-ui";
Vue.use(uView);

Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
    ...App
})

// http拦截器，此为需要加入的内容，如果不是写在common目录，请自行修改引入路径
import httpInterceptor from '@/common/http.interceptor.js'
// 这里需要写在最后，是为了等Vue创建对象完成，引入"app"对象(也即页面的"this"实例)
Vue.use(httpInterceptor, app)

// http接口API集中管理引入部分
import httpApi from '@/common/http.api.js'
Vue.use(httpApi, app)

app.$mount()

第三步、使用

// 调用getSearch接口
this.$u.api.getSearch().then(res => {
	console.log(res);
})

// 调用getInfo接口
this.$u.api.getInfo({id: 3}).then(res => {
	console.log(res);
})

第二种封装方法

这里也需要进行参数配置，具体配置见开头

const http = uni.$u.http
export const getBrand = (data) => http.get('/index.php',data);

使用：

import { getBrand } from '@/common/http.api.js';

export default {
	methods:{
		getBrand({
			_mall_id:1,
			r:'api/car/brand'
		}).then(res => {
			console.log(res);
		});
	}
}