如何在UNIAPP里发送网络请求 #在axios里内嵌request的大聪明前来填坑

目录

1）用axios封装，内嵌request🤪 

2）请求调用，对比axios和request哦😩

3）在多个地方进行网络请求的时候，不想重复写入请求地址的前缀，so我们需要封装一下。😕

4）封装request请求，偷懒写请求前缀，并且获取请求头获取数据：🤔

---

关于uniapp如何使用网络请求？在我们官网文档里的用法直接uni.request(obj)就🆗了，but因为习惯了axios去做请求，又懒得去查官方文档，就傻傻的用了axios去内嵌一个request请求，接下来展示一下“大聪明的高光时刻”吧。

1）用axios封装，内嵌request🤪 

2）请求调用，对比axios和request哦😩

import axios from '@/utils/axios.js';

// 未封装request时，需要填写完整的url请求地址
uni.request({
	method:"POST",
	url:"http://localhost:8888/api/userInfo/login",
	data:{code:loginRes.code},
	success(res) {
		// console.log(res.data.data);
		// console.log(res.header);
		console.log("登录请求发送之后获取的请求头数据",res);
	}
})

我们在做网络请求的时候，直接调用uniapp的请求api即可，而做了axios内嵌request就是在uni,request外层多加一层axios请求罢了。

// 已被我弃用，但是这个封装得挺好的哦，在做vue项目的时候可以食用。
// axios.post('/api/userInfo/login',{
// 	code: loginRes.code,
// }).then(res => {
// 	console.log("登录请求发送之后获取的请求头数据",res);
// 	const authorization = res.header.Authorization;
// 	that.setAuthorization(authorization);
// 	// console.log(that.getAuthorization);
// 	const text = res.data.data;
// 	const obj = that.convertTextToObject(text);
// 	// 将用户登录之后的信息存进vuex里
// 	that.storageUserInfo(obj);
// 	console.log("检查是否成功将数据存进vuex",that.$store.state);
// 	that.goToIndex();
// })

3）在多个地方进行网络请求的时候，不想重复写入请求地址的前缀，so我们需要封装一下。😕

而我上面做的是一个微信一键登录请求，请求的时候需要拿到一个请求头，为了后续做登录拦截的时候数据渲染所适用的。

当我们在一键登录的时候会返回一个请求头，我们需要将它存进vuex里，在网络请求的时候，需要有请求头才能拿到数据，否则就不能。如：

如何将它存进vuex呢，在上一篇文章就总结了哈😬

 

 4）封装request请求，偷懒写请求前缀，并且获取请求头获取数据：🤔

// 我的后端请求地址
let baseURL = 'http://localhost:8888';
// 是否在控制台显示接口请求日志,本地环境启用,打包环境禁用
let showHttpLog = false;

import { mapGetters } from "vuex";
 
export const myRequest = (options) => {
	//加载loading
	// uni.showLoading({ 
	//     title:'数据加载中'
	// })
	return new Promise((resolve, reject) => {
		uni.request({
			url: baseURL + options.url, //接口地址：前缀+方法中传入的地址
			method: options.method || 'GET', //请求方法：传入的方法或者默认是“GET”
			data: options.data || {}, //传递参数：传入的参数或者默认传递空集合
			headers: {
			    //自定义请求头信息 vuex拿出来的请求头数据
				Authorization: this.getAuthorization
			},
			success: (res) => {
				//返回的数据（不固定，看后端接口，这里是做了一个判断，如果不为true，用uni.showToast方法提示获取数据失败)
				if (res.data.success != true) {
					return uni.showToast({
						title: '获取数据失败',
						icon: 'none'
					})
				}
				// 如果不满足上述判断就输出数据
				resolve(res)
			},
			// 这里的接口请求，如果出现问题就输出接口请求失败
			fail: (err) => {
				console.log(err)
				reject(err)
			}
		})
	})
}

我们导入之后，直接调用即可。

// 导入我的请求方法
import { myRequest } from '@/utils/request.js'

// 登录获取到用户的openid拿到code
// 调用请求参数
methods: {
    ...mapMutations(["storageUserInfo","setAuthorization"]),
	// 用户一键登录获取用户的openid
	wxLogin() {
        let that = this;
		uni.login({
			provider: 'weixin',
			success: function(loginRes) {
                // myRequest({
				// 	url: '/api/userInfo/login',
				// 	method: 'post', 
				// 	data: {
				// 		code: loginRes.code,
				// 	},
			// })
            }
        })
    }
}

本期内容到此结束，感谢观看！