小程序学习 一言API和wx.request({})的运用

前言：
一开始折腾小程序的时候，突然发现了一个好玩的API，可以随机在网站推荐一句美言，我想能不能把他接入小程序里面，其实就是简单的wx.request({})运用，开始折腾。

什么是一言：
相信大家都有或曾经有过自己的摘抄本。「一言」就好似一个公开的摘抄本，我们在此记录那些让人感怀的，让人振奋的，让人感动的，让人一眼就有所感触的短句，并通过公共 API 的形式使你能够在自己的项目中调用它们。 我们希望通过一言，链接大家对各方文字的美好记忆，伴你踩碎迷茫，走过时光。

如图所示：因为只是测试，具体样式还没有美化

API

源地址：https://xygeng.cn/post/200.html

原文介绍了网页的接入，小程序殊途同归，一样用的是GET的获取数据

如果是微信小程序开发可以接下来看：

介绍

小程序的后台获取数据方式get/post具体函数格式如下：wx.request({})

先介绍wx.request({})各个参数，具体参数可以参考小程序开发官方文档

参数

Object object

属性    类型    默认值    是否必填    说明
支持版本
url    string         是    开发者服务器接口地址
data    string/object/ArrayBuffer         否    请求的参数
header    Object         否    
设置请求的 header，header 中不能设置 Referer

。content-type 默认为 application/json

method    string    GET    否    HTTP 请求方法
dataType    string    json    否    返回的数据格式
responseType    string    text    否    响应的数据类型
success    function         否    接口调用成功的回调函数
fail    function         否    接口调用失败的回调函数
complete    function         否    接口调用结束的回调函数（调用成功、失败都会执行）

object.dataType 的合法值

值    说明
json    返回的数据为 JSON，返回后会对返回的数据进行一次 JSON.parse
其他    不对返回的内容进行 JSON.parse
object.responseType 的合法值

值    说明
text    响应的数据为文本
arraybuffer    响应的数据为 ArrayBuffer
object.success 回调函数

Object res

属性    类型    说明
data    string/Object/Arraybuffer    开发者服务器返回的数据
statusCode    number    开发者服务器返回的 HTTP 状态码
header    Object    开发者服务器返回的 HTTP Response Header
返回值

RequestTask

支持版本 >= 1.4.0

请求任务对象

data 参数说明

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

对于 GET 方法的数据，会将数据转换成 query string（encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...）

对于 POST 方法且 header['content-type'] 为 application/json 的数据，会对数据进行 JSON 序列化

对于 POST 方法且 header['content-type'] 为 application/x-www-form-urlencoded 的数据，会将数据转换成 query string （encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...）

示例代码

wx.request({  url: 'test.php', //仅为示例，并非真实的接口地址
  data: {    x: '',    y: ''
  },  
  header: {    'content-type': 'application/json' // 默认值
  },
  success (res) {    console.log(res.data)
  }
})

以上是wx.request(){}具体参数

我们接入的api比较简单，用不上这么多参数简单的几个参数，直接贴上js代码

前台显示代码，比较简单，就一行，wxml代码贴上

var app = getApp()
Page({
data: {
moto:[],//参数
},
onLoad: function () {
this.getdata();
 
},
 
//自定义参数名字
getdata: function() {
var that = this;
wx.request({
url: 'https://api.xygeng.cn/one',
method: 'GET',
dataType: 'json',
success: function(res) {
that.setData({
moto: res.data
})
},
fail: function(err) {}, //请求失败
complete: function() {} //请求完成后执行的函数
})
},
})

前台显示代码，比较简单，就一行，wxml代码贴上

<view bindtap='getdata'>{{moto}}</view>

————————————————
版权声明：本文为CSDN博主「XY笔记」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq321772514/article/details/83153138