使用第三方库(@escook/request-miniprogram)

地址:

使用方法该网址都有

开始使用

uni-app中使用:

安装:

npm install @escook/request-miniprogram

导入挂载

// 按需导入 $http 对象
import {
          
    $http } from @escook/request-miniprogram

// 将按需导入的 $http 挂载到 wx 顶级对象之上，方便全局调用
wx.$http = $http

// 在 uni-app 项目中，可以把 $http 挂载到 uni 顶级对象之上，方便全局调用
uni.$http = $http

支持的请求方法

// 发起 GET 请求，data 是可选的参数对象
$http.get(url, data?)

// 发起 POST 请求，data 是可选的参数对象
$http.post(url, data?)

// 发起 PUT 请求，data 是可选的参数对象
$http.put(url, data?)

// 发起 DELETE 请求，data 是可选的参数对象
$http.delete(url, data?)

配置请求根路径

$http.baseUrl = https://api-hmugo-web.itheima.net/api/public/v1/

请求拦截器

在请求前做的操作(例如：显示加载动画) 语法:$http.beforeRequest

//请求拦截器
$http.beforeRequest = function (options) {
          
   
  uni.showLoading({
          
   
    title: 数据加载中...,
  })
}

响应拦截器

请求完成后做的操作(上方显示加载动画,这里就消除动画吧) 响应语法:$http:afterReqiest 关闭动画:hideLoading()

//响应拦截器
$http.afterRequest = function () {
          
   
  uni.hideLoading()
}

给uni.showToast封装

参数上赋值是es6写法,代表不传参时的默认值

uni.$showMsg=function(title="请求失败",time=1500,icon="error"){
          
   
	uni.showToast({
          
   
		title,
		duration:time,
		icon
	})
}

示例

async getNavList(){
          
   
				let {
          
   data:ret}=await uni.$http.get(home/catitems)
				if(ret.meta.status!=200) return uni.$showMsg();
				this.navList=ret.message;
				console.log(ret)
			},

如果返回状态不等于200就调用上方封装的$showMsg()

测试完成~~~~~