uniapp开发微信小程序笔记6-网络请求
前言：在vue2中我们使用的是axios发起网络请求，在uni-app中也有专门发起网络请求的api，官网介绍地址：uni.request(OBJECT) | uni-app官网
一、基础语法
uni-app中提供了uni.request()方法来发送网络请求，eg：
uni.request({
url: "https://api",
mothod: "GET",
success: (res) => {
console.log(res.data);
}
})二、校验合法域名
微信小程序中发送网络请求，要验证服务器地址是否合法
如果服务器地址不合法，控制台会出现以下报错：
解决方案1：开发过程中打开“不校验合法域名”的配置
微信开发者工具-详情-本地设置-勾选“不校验合法域名”
这种方法只适用于开发过程中
解决方案2：将服务器地址配置成合法域名
登录微信公众平台，就是之前看AppID的地方
将我们要请求的域名配置到【request合法域名中】
配置完成后，需要重启微信小程序开发者工具才会生效
这里需要注意一点的是 ，小程序官方要求https才能配成合法的域名，但是我们有时候开发的时候是http的，那我们就要使用方案1
三、封装网络请求：
官方文档中提到了获取请求值时，uni-request中需要至少传入success/fail/complete参数中的一个才会返回对象，如果想用promise也可以，但是返回的数据是一个数组，res[0]是null，res[1]里面才是我们要的值，如下图所示
这样取值过于繁琐，如果通过success回调函数来接受请求结果的话，后端的数据也是在响应对象的data属性中，所以我们需要对uni.request()方法做进一步的封装。
1、封装请求
在uni-app项目根目录中创建utils/request.js文件，然后在该文件中对请求进行配置：
//params 接收一个对象，对象中包含请求url、请求类型method、请求参数 data等
const request = (params) => {
new Promise((resolve,reject) => {
//发送请求
uni.request({
...params,
success(res) {
resolve(res.data)
}
})
})
}
export default request;2、调用请求
import request from "@/utils/request.js"
export default {
async created(){
const res=await request({
url:"xxx",
method:"GET",
data:"xxx"
})
}
}3、请求提示框
如果项目中希望所有的请求在发送是都给用户发送相应的提示，就在封装中再加上请求提示框
//params 接收一个对象，对象中包含请求url、请求类型method、请求参数 data等
const request = (params) => {
new Promise((resolve, reject) => {
//显示提示框
uni.showLoading({
title: "加载中"
});
//发送请求
uni.request({
...params,
success(res) {
resolve(res.data)
},
//请求结束，不论成功或失败都会触发
complete() {
//隐藏
uni.hideLoading();
}
})
})
}
export default request;效果展示：
注：这里只是简单的进行封装，实际项目中需要与自己封装的api进行搭配使用，将url固定的部分也分离出来
原文地址：https://blog.csdn.net/wzy_PROTEIN/article/details/143878466
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！