uni-app如何发送请求调用接口

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

地址:https://www.npmjs.com/package/@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()

测试完成~~~~~