调用api接口

article/2025/8/21 23:56:34

我们平常是怎么调用接口的呢？在Vue中我们平常通过axios这个库来调用就接口，但是在uniapp进行开发，那么就要借用uniapp的库来进行开发，接下来我们一起来探究下。

一.uni.request(OBJECT)

作用:发送网络请求

OBJECT参数说明：

1.url

类型:String

必填:是

默认值:无

说明:开发者服务器接口地址

2.data

类型:Object/String/ArrayBuffer

必填:是

默认值：无

说明;请求的参数

3.header

类型:Object

必填:否

默认值;无

说明:设置请求的header,header中不能设置Referer

平台差异说明:APP ,H5端会自动带上cookie,且H5端不可手动修改

4.method

类型: String

必填:否

默认值:GET

5.timeout

类型：Number

必填：否

默认值：超过时间,单位ms

6.dataType

类型：String

必填：否

默认值:json

说明:如果设为json,会尝试对返回的数据做一次JSON.parse

7.responseType

类型：String

必填：否

默认值：text

说明：设置响应的数据类型,合法值:text,arraybuffer

8.sslVerify

类型:Boolean        

必填:否

默认值:true        

说明:验证ssl证书

9.success

类型:Function

必填:否

默认值:无

说明:收到开发者服务器成功返回的回调函数

10.fail

类型:Function

必填:否

默认值：无

说明:接口调用失败的回调函数

11.complete

类型:Function

必填:否

默认值：无

说明：接口调用结束的回调函数(调用成功，失败都会执行)

二.method有效值

注意:method有效值必须大写，每个平台支持的method有效值不同，详情见下表。

三.success返回参数说明

 data数据说明

最终发送给服务器的数据是String类型，如果传入的data不是String类型,会被转换成String。转换规则如下：

  • 对于 GET 方法，会将数据转换为 query string。例如 { name: 'name', age: 18 } 转换后的结果是 name=name&age=18。
  • 对于 POST 方法且 header['content-type'] 为 application/json 的数据，会进行 JSON 序列化。
  • 对于 POST 方法且 header['content-type'] 为 application/x-www-form-urlencoded 的数据，会将数据转换为 query string

四.使用uniapp发送一个成功的请求

我使用的是mockfast来模拟一个服务器从而达到发送请求的目的。

1.准备好一个mock来模拟数据

 

2.给按钮绑定一个点击事件，通过success成功的回调来获取数据

代码：

<template><view class=""><button type="warn" @click="fn">点击发送请求</button>	{{aa}}</view></template><script>
export default {data () {return {aa:''}},methods: {fn(){uni.request({url: 'https://www.fastmock.site/mock/010910d86b5019f8016429f50c680e58/api/test', //仅为示例，并非真实接口地址。success: (res) => {this.aa=res.data.name}});}}}
</script><style></style>

图示：

 

 

五.fail失败之后的回调

1.将url的地址进行修改

 打印后的结果

 

 

六.测试一下complete

说明：接口调用结束的回调函数(调用成功，失败都会执行)

1.接口调用失败后

 

  

2.接口调用成功执行

 

 

3.应用场景用

请求完成后的一些相应操作

七.封装一个uni.request

对uni.request的一些共同参数进行简单的封装，减少重复性数据请求代码。方便全局调用。

步骤:

1.先在目录下创建unils和common 2个文件夹

 utils是存放工具类的，common用来放置常用方法的

之后在utils中创建request.js用来放置uni.request的请求方法，在对其进行简单的封装

2.requset.js 代码（utils文件夹里面）

import operate from '../common/operate.js'
// vuex 的使用  详情参考官网 https://uniapp.dcloud.io/vue-vuex
import store from '../store/index.js'  export default class Request {http(param) {// 请求参数var url = param.url,method = param.method,header = {},data = param.data || {},token = param.token || "",hideLoading = param.hideLoading || false;//拼接完整请求地址var requestUrl = operate.api + url;//拼接完整请求地址（根据环境切换）// var requestUrl = operate.api() + url;//请求方式:GET或POST(POST需配置// header: {'content-type' : "application/x-www-form-urlencoded"},)if (method) {method = method.toUpperCase(); //小写改为大写if (method == "POST") {header = {'content-type': "application/x-www-form-urlencoded"};} else {header = {'content-type': "application/json"};}}//加载圈if (!hideLoading) {uni.showLoading({title: '加载中...'});}// 返回promisereturn new Promise((resolve, reject) => {// 请求uni.request({url: requestUrl,data: data,method: method,header: header,success: (res) => {// 判断 请求api 格式是否正确if (res.statusCode && res.statusCode != 200) {uni.showToast({title: "api错误" + res.errMsg,icon: 'none'});return;}// 将结果抛出resolve(res.data)},//请求失败fail: (e) => {uni.showToast({title: "" + e.data.msg,icon: 'none'});resolve(e.data);},//请求完成complete() {//隐藏加载if (!hideLoading) {uni.hideLoading();}resolve();return;}})})}
}

3.在common 中分别创建 operate.js

1.operate.js 用来放置请求接口 api 地址

export default {//接口api: "http://192.168.208.126:8080",
}

根据小程序环境 切换接口地址

export default {//接口api: function() {let version = wx.getAccountInfoSync().miniProgram.envVersion;switch (version) {case "develop": //开发预览版return "https://www.baidu.com/"break;case 'trial': //体验版return "https://www.baidu.com/"break;case 'release': //正式版return "https://www.baidu.com/"break;default: //未知,默认调用正式版return "http://www.baidu.com/"break;}
}

4.使用方法一(全局请求)

在跟目录创建api文件夹：在创建api.js

api.js 是用来调用我们封装好的 uni.request ,并且统一管理请求接口，在后续开发中只需要在页面中调用 api.js中请求即可

import Request from '@/utils/requset.js'
let request = new Request().http//全局定义请求头
export default {// 请求样式classifyLeft: function(data) {return request({url: "/category/list", //请求头method: "GET", //请求方式data: data, //请求数据})},
}
/*
请求样式：自定义名字: function(data) {return request({url: "/banner", //请求头method: "GET", //请求方式 data: data,    //请求数据token: token, // 可传  hideLoading: false, //加载样式})},
*/

api.js的调用可以在main.js 中进行全局调用，也可以在需要的页面中调用，可根据实际情况来决定是否全局 调用。下面只介绍全局调用

在mian.js中导入api.js

1. 在main.js 中引入api.jsimport api from '@/common/api.js'Vue.prototype.$api = api
2. 在页面中调用//不传参数this.$api.sendRequest().then((res) => {console.log(res);})//传参this.$api.sendRequest({参数}).then((res) => {console.log(res);})

5.使用方法二（页面单独引入）

user.js 是用来调用我们封装好的 uni.request ,并且统一管理请求接口，在后续开发中只需要在页面中调用 user.js中请求即可

import Request from '@/utils/requset.js'
import operate from '@/common/operate.js'
let request = new Request().http// 按需引入的 请求头
export const getUserInfo= function(data) {    return request({url: "order/user ",		method: "POST",data: data,token: operate.isToken()})
}

页面中使用

//引入
import {getUserInfo
} from '@/api/user.js'//放入生命周期
init() {//用户信息getUserInfo().then((res) => {console.log(res);})
},

接口的封装参考：https://juejin.cn/post/7023983465892675614


http://chatgpt.dhexx.cn/article/wMsgbcRc.shtml

相关文章

api 接口简单调用

api 接口简单调用

互联网的资源是很丰富了&#xff0c;我又发现了个网站&#xff0c;提供api ,供我们联系用 https://www.showapi.com/ 我注册好之后 注册完之后&#xff0c;提供了 appid和 key <!DOCTYPE html> <html lang"en"><head><meta charset"UT…
阅读更多...
调用第三方API（接口）

调用第三方API（接口）

1&#xff1a;选用一个提供API的第三方&#xff08;这里推荐极速数据&#xff09; 2&#xff1a;使用 using Newtonsoft.Json; 如果没有需要先安装 3&#xff1a;定义API方法具体代码如下&#xff1a; public static string API(string url) { HttpWebRequest re W…
阅读更多...
如何调用API接口获取数据

如何调用API接口获取数据

下面以调用丁香园的API接口获取新冠疫情数据为例。 丁香园提供的API接口及说明如下&#xff1a; 调用该API接口获取数据的代码如下&#xff1a; import requests import json import pandas as pd #以requests.get方式调用API接口&#xff0c;获取JSON格式的数据 datarequest…
阅读更多...
如何调用api接口获取其中的数据

如何调用api接口获取其中的数据

part1.API接口可以运用到的场景&#xff0c;主要包括以下几个方面&#xff1a; 1. 应用程序集成&#xff1a;API可以使不同的应用程序相互之间进行集成&#xff0c;比如将某个应用程序的数据传递给另一个应用程序&#xff0c;或者调用另一个应用程序的功能。 2. 数据共享&#…
阅读更多...
API接口是什么？API接口怎么调用？

API接口是什么？API接口怎么调用？

part1.API接口是什么&#xff1f; API&#xff08;Application Programming Interface&#xff0c;应用程序编程接口&#xff09;是软件系统之间互相访问和交换信息的一种方式。它定义了在一个应用程序中调用另一个应用程序的方式&#xff08;或服务&#xff09;。API接口可以…
阅读更多...
API接口调用演示

API接口调用演示

本文以深圳市政府数据开放平台为素材对象&#xff0c;演示如何调用其开放的API接口&#xff0c;主要目的在于以直观的视角&#xff0c;熟悉API接口的格式及调用方式。 在首页数据菜单中有数据目录、数据集、数据接口和数据地图4个菜单。 选择数据集&#xff0c;选择教育局&…
阅读更多...
API接口的调用方式

API接口的调用方式

API接口的调用方式分为以下几种&#xff1a; 1.RESTful API 这是一种基于HTTP协议的API调用方式&#xff0c;通常使用HTTP协议的POST、GET、DELETE、PUT等方法进行调用。使用RESTful API的优点是简单易懂、易于扩展和利于缓存。常见的RESTful API有Twitter API、Facebook API…
阅读更多...
api接口的获取调用方式是什么？

api接口的获取调用方式是什么？

API接口的获取调用方式&#xff0c;通常分为以下几个步骤&#xff1a; 1.注册账号并申请API Key&#xff1a;在API服务提供商的官方网站上注册账号&#xff0c;并申请API Key&#xff08;包括通行证ID和密钥&#xff09;&#xff0c;以便后面的API调用验证。 2.查看API接口文档…
阅读更多...
MySQL分库分表相关面试知识点

MySQL分库分表相关面试知识点

基础概念 分表 能够解决单表数据量过大带来的查询效率下降的问题 分库 面对高并发的读写访问&#xff0c;当数据库master服务器无法承载写操作压力时&#xff0c;不管如何扩展slave服务器&#xff0c;此时都没有意义。此时&#xff0c;则需要通过数据分库策略&#xff0c;提…
阅读更多...
MySQL分库分表及中间件Mycat

MySQL分库分表及中间件Mycat

文章目录 一、前言1.1 垂直切分1.2 垂直切分的优缺点&#xff1a;1.3 水平切分1.3.1 水平分表1.3.2 水平分库 1.4 水平切分优缺点 二、Mycat 中间件实现读写分离2.1 mycat2.2 mycat安装2.3 利用mycat实现mysql的读写分离 三、Mysql高可用 一、前言 刚开始我们的系统只用了单机…
阅读更多...
Mysql - 分库分表

Mysql - 分库分表

介绍 问题分析 随着互联网及移动互联网的发展&#xff0c;应用系统的数据量也是成指数式增长&#xff0c;若采用单数据库进行数据存储&#xff0c;存在以下性能瓶颈&#xff1a; IO瓶颈&#xff1a;热点数据太多&#xff0c;数据库缓存不足&#xff0c;产生大量磁盘IO&#x…
阅读更多...
MySQL分库分表原理

MySQL分库分表原理

前言 ❤Java学习路线个人总结-博客 ❤欢迎点赞&#x1f44d;收藏⭐留言 &#x1f4dd;分享给需要的小伙伴 文章目录 前言1、为什么要分库分表02、分库分表03、不停机分库分表数据迁移4、分库分表实现5、读写分离实现 1、为什么要分库分表 分库分表目的&#xff1a;解决高并发&a…
阅读更多...
mysql分库分表(二)

mysql分库分表(二)

微信搜索&#xff1a;“二十同学” 公众号&#xff0c;欢迎关注一条不一样的成长之路 一种可以避免数据迁移的分库分表scale-out扩容模式 一种可以避免数据迁移的分库分表scale-out扩容方式 目前绝大多数应用采取的两种分库分表规则 mod方式dayofweek系列日期方式&#xff…
阅读更多...
Mysql分库分表方案

Mysql分库分表方案

相关文章&#xff1a; 1、 使用Spring AOP实现MySQL数据库读写分离案例分析 2、MySQL5.6 数据库主从&#xff08;Master/Slave&#xff09;同步安装与配置详解 3、MySQL主从复制的常见拓扑、原理分析以及如何提高主从复制的效率总结 4、使用mysqlreplicate命令快速搭建 Mysql 主…
阅读更多...
mysql-分库分表

mysql-分库分表

1、为什么要分库分表 1、为什么要分库分表 出现数据库瓶颈&#xff0c;比如IO瓶颈&#xff0c;CPU瓶颈 1、IO瓶颈 &#xff08;1&#xff09;磁盘读IO瓶颈- 数据体积比较大&#xff1a;大量的写操作&#xff0c;磁盘IO读写必然慢&#xff0c;效率低大量的读操作&#xff0c;…
阅读更多...
mysql分库分表(一)

mysql分库分表(一)

微信搜索&#xff1a;“二十同学” 公众号&#xff0c;欢迎关注一条不一样的成长之路 数据库分库分表策略的具体实现方案 相关文章&#xff1a; 1、 使用Spring AOP实现MySQL数据库读写分离案例分析 2、MySQL5.6 数据库主从&#xff08;Master/Slave&#xff09;同步安装与…
阅读更多...
【MySQL】MySQL分库分表详解

【MySQL】MySQL分库分表详解

目录 一、前言 1.1 数据量 1.2 磁盘 1.3 数据库连接 二、垂直拆分 or 水平拆分&#xff1f; 三、垂直拆分 3.1 垂直分库 3.2 垂直分表 3.3 垂直拆分的优缺点 四、水平拆分 4.1 水平分表 4.2 水平分库分表 4.3 水平拆分的优缺点 五、几种常用的分库分表的策略 5.1 根据数值范围 …
阅读更多...
MySQL 分库分表

MySQL 分库分表

MySQL分库分表 概念 读写分离优化了互联网读多写少场景下的性能问题&#xff0c;考虑一个业务场景&#xff0c;如果读库的数据规模非常大&#xff0c;除了增加多个从库之外&#xff0c;还有其他的手段吗&#xff1f;实现数据库高可用&#xff0c;还有另外一个撒手锏&#xff…
阅读更多...
MySQL之分库分表

MySQL之分库分表

为什么要分库分表 用户请求量太大 单服务器TPS、内存、IO都是有上限的&#xff0c;需要将请求打散分布到多个服务器 单库数据量太大 单库处理能力有限&#xff1b;单库所在服务器的磁盘空间有限&#xff1b;单库的操作IO有瓶颈 单表数据量太大 查询、插入、更新操作都会变慢&am…
阅读更多...
【Mysql】分库分表

【Mysql】分库分表

【Mysql】分库分表 文章目录 【Mysql】分库分表1. 介绍2. 拆分策略2.1 垂直拆分2.1.1 垂直分库2.1.2 垂直分表 2.2 水平拆分2.2.1 水平分库2.2.2 水平分表 1. 介绍 采用单数据库进行数据存储存在以下瓶颈&#xff1a; IO瓶颈&#xff1a;热点数据太多&#xff0c;数据库缓存不…
阅读更多...
推荐文章

Copyright @ 2022~2023