文章目录

前言
一、准备
二、网络请求
- 1.微信小程序请求网络的方法
- 2.发送网络请求
- 3.网络请求的封装
- 4.网络返回请求数据的处理
三、本地存储

前言

这节我们来看下在微信小程序中如何进行网络请求的。

一、准备

在调用网络请求方法之前需要做一些配置否则会导致请求不成功，有两种配置方式：
1、在小程序后台-开发-开发设置-服务器域名中进行配置。打开后台>开发管理>开发设置，在开发设置中可以添加服务器域名，配置为服务器域名后，可与小程序进行网络通信。

2、还可以打开微信开发工具>详情>本地设置，将不校验合法域名这一选项勾选。

二、网络请求

1.微信小程序请求网络的方法

小程序提供了组件wx.request来发送网络请求：

RequestTask wx.request(Object object)

主要的参数说明：

2.发送网络请求

注：本文章使用的接口来自黑马优购小程序的接口文档

发送请求的代码如下：

//1发送异步请求获取轮播图数据wx.request({url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',success: (result) => {console.log(result)this.setData({swiperList:result.data.message})},fail: (res) => {},complete: (res) => {},})

该处使用的url是网络接口请求的地址
若请求成功数据会通过success的参数result获得，通过result.data.message可以取到返回的数据。
我们可以打印或者通过调试器里的AppData查看变量是否获取到我们请求的数据了：

3.网络请求的封装

以上网络请求在同时请求或者嵌套请求时可能会出现问题，导致请求失败，这就是我们都知道回调地狱，那么这里我们如何去处理呢？
1、通过es6的promise技术，我们将处理封装在request/request.js文件下，具体代码如下：

export const request=(params)=>{return new Promise((resolve,reject)=>{wx.request({...params,  //传入的就是 url:"https://api-hmugo-....."success:(result)=>{resolve(result);},fail:(err)=>{reject(err);},complete:()=>{//加载完成}}})})
}

然后我们在请求页面的js文件下引入request/request.js文件，

//通过解构的方式来引入request方法
import { request } from "../../request/index.js";

使用封装的request方法，

request({url:"https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata"}).then(result=>{this.setData({swiperList:result.data.message})})

2、优化请求方法的细节（request/request.js文件内容的优化）
1）url地址特别长
我们一般一个项目里调用的接口，前面一部分地址都是相同的，区别就在后面的方法名，这里我们可以提取公共的url：

const baseUrl = "https://api-hmugo-web.itheima.net/api/public/v1"

然后对url进行拼接：

url:baseUrl+params.url,

2）添加加载效果
在网络请求数据请求的过程中，可以添加一些等待效果，使用加载框wx.showLoading

//显示加载效果wx.showLoading({title: '加载中',mask:true //显示蒙版})

在响应返回，获取到数据或者请求失败的时候就i取消加载：

wx.hideLoading()

试想若多个接口同时请求，他们同时请求其响应肯定是不同步的，可能会导致加载框显示出现消失又出现这样的情况，为了避免我们添加一个变量，用于等待得到全部响应后取消加载框：

//同时发送异步代码的次数
let ajaxTimes = 0;

整合以上优化，完整代码如下：

//同时发送异步代码的次数
let ajaxTimes = 0;export const request=(params)=>{ajaxTimes++;//显示加载效果wx.showLoading({title: '加载中',mask:true //显示蒙版})//定义公共的urlconst baseUrl = "https://api-hmugo-web.itheima.net/api/public/v1"return new Promise((resolve,reject)=>{wx.request({...params,  //传入的就是 url:"https://api-hmugo-....."url:baseUrl+params.url,success:(result)=>{resolve(result.data.message);},fail:(err)=>{reject(err);},complete:()=>{ //加载完成//ajaxTimes是判断 同时请求全部返回的时候，关闭加载ajaxTimes--;if(ajaxTimes===0){wx.hideLoading()}}})})
}

3、使用ES7的 async 和 await技术发送请求(同步的方式请求异步)

async getGoodsList(){//接口请求const res = await request({url:"/goods/search",data:this.QueryParams});//获取请求数据const total = res.total;},

其中data:this.QueryParams是请求参数对象

//接口需要传的参数QueryParams :{query:"",cid:"",pagenum:1,pagesize:10},

4.网络返回请求数据的处理

我们获取到接口返回的数据之后，通过 setData 将其绑定到逻辑层的变量goodsObj 对象中，

this.setData({goodsObj})

这样goodsObj 对象中是返回的完整的数据，但是我们在渲染页面或者处理逻辑的时候，可能只需要接口返回的部分数据，这时我们可以取出我们所需要哪些字段的数据：

this.setData({goodsObj:{// goodsObj 后台返回的数据可能有的是不需要的，所以只要取部分需要的数据即可goods_name:goodsObj.goods_name,goods_price:goodsObj.goods_price,pics:goodsObj.pics}})

三、本地存储

我们通过网络请求请求后台数据，有些数据信息是需要存储在本地的，可以通过微信小程序的本地存储技术来实现：

需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象，方法如下。
1、同步
（1）wx.setStorageSync(); //存储值
（2）wx.removeStorageSync(); // 移除指定的值
（3）wx.getStorageSync(); // 获取值
（4）wx.getStorageInfoSync(); // 获取当前 storage 中所有的 key
（5）wx.clearStorageSync(); // 清除所有的key

2、异步
（1）wx.setStorage(); //存储值
（2）wx.removeStorage(); // 移除指定的值
（3）wx.getStorage(); // 获取值
（4）wx.getStorageInfo(); // 获取当前 storage 中所有的 key
（5）wx.clearStorage(); // 清除所有的key

获取缓存数据：

// ||[] 将得到的缓存数据转换为数组格式
let cart = wx.getStorageSync('cart')||[];

将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容：

wx.setStorageSync('cart', cart)

数据存储生命周期跟小程序本身一致，即除用户主动删除或超过一定时间被自动清理，否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。

5、微信小程序-网络请求和本地存储相关推荐

微信小程序网络请求配置问题及本地网络请求测试解决方案
本文只针对服务器网站没有备案或只需要做本地网络接口请求一.问题引入在小程序demo.wxml中声明button控件,并设置点击事件,如下: <button bindtap='testSend ...
微信小程序网络请求异常怎么办_解决·微信小程序开发-网络请求报Invalid request 400错误...
今天学习了一下微信小程序的入门开发,在使用网络请求时,发现根据微信官方的API的方法进行操作出现Invalid request 400错误,到底怎么回事呢? 首先我们来看微信API网络请求示例代码: ...
微信小程序网络请求接口及生命周期
前言:前期我们对微信小程序有些基本了解,像标签,样式,组件....等. 今天我们继前期进行继续的了解一. 网络请求 HTTP(HyperText Transfer Protocol)是一套计算机通过 ...
微信小程序网络请求 - 设置合法域名
微信小程序设置网络请求官方文档为什么要设置合法域名呢 ? 每个微信小程序需要事先设置通讯域名,小程序只可以跟指定的域名进行网络通信.包括普通 HTTPS 请求(wx.request).上传文件(w ...
微信小程序网络请求异常怎么办_监控微信小程序wx.request请求失败
在微信小程序里,与后台服务器交互的主要接口函数是wx.request(),用于发起 HTTPS 网络请求.其重要性不言而喻.然而,却经常遇到请求失败的问题,笔者特意谷歌"wx.request ...
微信小程序网络请求之设置合法域名
设置域名登录微信公众号后台小程序中设置→开发设置→服务器设置必须设置域名,微信小程序才能进行网络通讯,不然会报错如果设置好了合法域名,开发工具还提示不在合法域名列表中,因为在微信会有一段时间的 ...
微信小程序网络请求之设置合法域名后不显示oss、cos的图片问题
一.开启oss防盗链设置把此https://servicewechat.com链接加入到防盗链中就可以访问由于网站图片都上传在了腾讯云COS,微信小程序端不显示网站图片原因: 腾讯云COS启用 ...
微信小程序网络请求异常怎么办_微信小程序打开提示“网络异常，请检查网络状态”的解决方法...
症状:打开微信小程序的时候,提示"网络异常,请检查网络状态",无法加载数据. 问题客户端:安卓手机经过测试:IOS和微信桌面版,均正常. 唯独安卓手机不行,如下图所示,这个问题不 ...
微信小程序网络请求代码片段
在微信小程序根目录建立/static/js/lsk.js.输入以下代码 function dopost(api,params,callback){var webhost="http://ne ...

5、微信小程序-网络请求和本地存储