微信小程序(四十二)wechat-http拦截器

这篇具有很好参考价值的文章主要介绍了微信小程序(四十二)wechat-http拦截器。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

注释很详细,直接上代码

上一篇

新增内容:
1.wechat-http请求的封装
2.wechat-http请求的拦截器的用法演示

源码:

utils/http.js

import http from "wechat-http"


//设置全局默认请求地址
http.baseURL = "https://live-api.itheima.net"

//设置响应拦截器
http.intercept.response=(res)=>{
    //返回数据格式(减少一层data)
    return res.data
}

//导出
export default http

app.js

//从utils导入http
import http from './utils/http'

//注册到全局wx实例中
wx.http=http
App({
 globalData:{
     token:''
 }
})

index.js

Page({
  data:{
    list:[]
  },
  //此处就是第四十和四十一篇的结合,抽离出来了网络请求的调用部分进行封装
  //并且设置了响应拦截器对数据进行前提处理
    async onHttp(){
     const res=await wx.http({
        method:'GET',//类型
        url:'/announcement'//设置了基本网站地址就能这么用
      })

      this.setData({//录入数据
        list:res.data
      })
     
    }

  
})

效果演示:

微信小程序(四十二)wechat-http拦截器,微信小程序,微信小程序,小程序文章来源地址https://www.toymoban.com/news/detail-827730.html

到了这里,关于微信小程序(四十二)wechat-http拦截器的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序(四十)API的封装与调用

    注释很详细,直接上代码 上一篇 新增内容: 1.在单独的js文件中写js接口 2.以注册为全局wx的方式调用接口 源码: utils/testAPI.js app.js index.js 效果演示:

    2024年02月20日
    浏览(36)
  • 【微信小程序】-- 案例 - 自定义 tabBar(四十六)

    💌 所属专栏:【微信小程序开发教程】 😀 作  者:我是夜阑的狗🐶 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询! 💖 欢迎大家:这里是CSDN,我总结知识的地方,喜欢的话请三连,有问题请私信 😘 😘 😘   大家好,又见面了,

    2024年02月03日
    浏览(48)
  • 微信小程序报错:WAServiceMainContext.js?t=wechat&s=1684052115130&v=2.31.1:1 wx.chooseAddress need to be

    获取用户收货地址。调起用户编辑收货地址原生界面,并在编辑完成后返回用户选择的地址。 自 2022 年 7 月 14 日后发布的小程序,若使用该接口,需要在 app.json 中进行声明,否则将无法正常使用该接口,2022年7月14日前发布的小程序不受影响。具体规则见公告 暂只针对具备

    2024年02月11日
    浏览(47)
  • Python Flask构建微信小程序订餐系统 (十二)

    🔥 创建切换商品分类状态的JS文件 🔥   🔥  商品分类布局里面引入js文件依赖 🔥 

    2024年02月16日
    浏览(36)
  • 微信小程序(十二)在线图标与字体的获取与引入

    注释很详细,直接上代码 上一篇 新增内容: 1.从IconFont获取图标与文字的样式链接 2.将在线图标配置进页面中(源码) 3.将字体配置进页面文字中(源码) 4.css样式的多文件导入 获取链接 1.获取图标链接 登入IconFont 点击跳转 温馨提醒:之后生成的图标名会以这里设定的名字

    2024年01月24日
    浏览(49)
  • 微信小程序原生开发功能合集十二:编辑界面的实现

      本章实现编辑界面的实现处理,包括各编辑组件的使用及添加数据保存数据流程的实现处理。   另外还提供小程序开发基础知识讲解课程,包括小程序开发基础知识、组件封装、常用接口组件使用及常用功能实现等内容,具体如下:    1. CSDN课程: https://edu.csdn.ne

    2024年02月02日
    浏览(56)
  • 【微信小程序】-- WXML 模板语法 - 列表渲染 -- wx:for & wx:key(十二)

    💌 所属专栏:【微信小程序开发教程】 😀 作  者:我是夜阑的狗🐶 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询! 💖 欢迎大家:这里是CSDN,我总结知识的地方,喜欢的话请三连,有问题请私信 😘 😘 😘   大家好,又见面了,

    2024年02月12日
    浏览(39)
  • 【微信小程序】-- uni-app 项目-- 购物车 -- 首页 - 轮播图效果(五十二)

    💌 所属专栏:【微信小程序开发教程】 😀 作  者:我是夜阑的狗🐶 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询! 💖 欢迎大家:这里是CSDN,我总结知识的地方,喜欢的话请三连,有问题请私信 😘 😘 😘   大家好,又见面了,

    2023年04月18日
    浏览(71)
  • 微信小程序HTTP请求封装,复习指南

    // 配置文件 const config = require(‘./config.js’) var app = getApp(); const host = config.httpServer; // 服务器baseUrl /** POST请求, URL:接口 postData:参数,json类型 doSuccess:成功的回调函数 doFail:失败的回调函数 */ function postData(url, postData, doSuccess, doFail) { wx.request({ //项目的真正接口,通过字

    2024年04月15日
    浏览(33)
  • uniapp vue3 微信小程序 项目中使用 websocet、微信小程序真机调试 websocket 报错 errMsg: “Invalid HTTP status.“

    uniapp-websocket官方文档 注意点:需要在确定建立连接后才能去发送数据 这个错误通常是因为小程序 WebSocket 请求的地址没有配置为 HTTPS,而是使用了 HTTP,因此需要注意以下几点: 小程序开发者工具可以支持使用 ws:// 前缀的 WebSocket 地址,但在真机上会因为不安全的原因而无

    2024年01月17日
    浏览(63)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包