uniapp调取接口的方法

面试官的问题：前后端分离，该如何调用接口？？?
思路：应该直接回答这个问题，通过向后端接口路径发送请求，建立http连接后，再由后端对我需要的数据或内容进行操作处理后返回给前端，这就是一个接口的调用。接下来你可以说一下接口，服务器与客户端的三次握手协议，以及请求的方式，比如如GET/POST，HTTP协议等内容。
现实前端开发中，我们需要调取后台接口进行动态数据渲染，我们必须先查阅后台接口文档，了解使用该接口时，确定第三方的接口的基本信息：地址、请求方式，参数、返回值等，需要提交哪些参数，并且接口使用返回的数据。

最普通的调取接口方法，不能解决异步

uni.request({url:'',        //请求的地址，类型为Stringdata:'',      //要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后method:'',    //get、post、deleteheader:{},    //请求头的信息success:res=>{}, //请求成功回调，带参数fail:()=>{},  //请求失败complete:=>{} //要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）})

const requestTask = uni.request({url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。data: {name: 'name',age: 18},success: function(res) {console.log(res.data);}
});// 中断请求任务
requestTask.abort();

利用ES6的Promise对象解决异步请求

uni.request({url:'',      //请求的地址，类型为Stringdata:'',     //要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后         method:'',   //get、post、deleteheader:{}    //请求头的信息}).then((result)=>{//result将返回一个数组[error,{NativeData}]，NativeData调取接口后返回的原生数据})

uni.request({url:'/api/NativeData.do',
}).then(result=>{let [err,res]=result;
if(res.stat0usCode===200){this.carouselData=res.data;console.log("carouselData");
};
if(res.statusCode===404){console.log("请求的接口没有找到");}
})

async/await ES6解决异步请求

methods: {function async request(){let result=await uni.request({url:'/api/NativeData.do',})let [err,res]=result;if(res.statusCode===200){this.carouselData=res.dataconsole.log("carouselData");}}
},
onLoad(){this.request();
}

查阅相关前端调用API的其他方法：附
JQ的ajax：
参数解释：url、type、data、dataType、success、error等，其他的看需求而定

$.ajax({url:"   ",    //请求的地址，类型为stringtype:"   ",   //请求方式，类型为string，两种“get”或者“post”，默认为“get”timeout:      //要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。async:        //要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。cache:        //要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。data:         //要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后dataType:     //要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText  作为回调函数参数传递。可用的类型如下：xml：返回XML文档，可用JQuery处理。html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。json：返回JSON数据。jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。text：返回纯文本字符串。beforeSend:   //要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。complete:     //要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。success:      // 要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。(1)由服务器返回，并根据dataType参数进行处理后的数据。(2)描述状态的字符串。error:       //要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)contentType: //要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。.......还有很多，只是基本用不到})

vue的axios
安装

npm install --save axios

main.js

import axios from 'axios'
import Qs from 'qs'
//QS是axios库中带的，不需要我们再npm安装一个
Vue.prototype.axios = axios;
Vue.prototype.qs = Qs;

axios与qs一起用，用qs库对数据进行编码。
xxx.vue


this.axios.post('/api/test',this.qs.stringify({'name':'xiaoming','sex':'nan'}),{headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(function(res){console.log(res.data)//控制台打印请求成功时返回的数据//bind(this)可以不用}.bind(this)).catch(function(err){if(err.response) {console.log(err.response)//控制台打印错误返回的内容}//bind(this)可以不用}.bind(this))

api 要做反向代理(不然的话会跨域)， ‘api/test’ 其实是 : http://192.168.X.XX/test. 其中api对应的就是http://192.168.X.XXX，当然这个你可以自己改为 www.baidu.com 或者 http://www.xxxx.yyy 域名。

uniapp调取接口的方法相关推荐

uniapp php接口如何写,uniapp怎么请求接口
uniapp请求接口的方法:1.使用GET请求数据,代码为[method: 'GET',success: (res)=>{}]:2.使用POST,发送json格式请求,代码为[method: ' ...
uni-app的渲染数据和三种调接口的方法
渲染数据代码示例: <template><view class="content"><view class="page-section in ...
浅析 uniapp(Vue) 的接口封装方法
浅析 uniapp(Vue) 的接口封装方法本文将详细讲解封装思路,通过对接口请求进行封装,实现接口引入即用,减少了请求复杂的属性参数,更加关注数据与业务本身. config - 请求地址及相关参数 ...
Thinkphp5.1允许uni-app的H5跨域请求接口解决方法
Thinkphp5.1允许uni-app的H5跨域请求接口解决方法参考文章: (1)Thinkphp5.1允许uni-app的H5跨域请求接口解决方法 (2)https://www.cnblogs. ...
iframe 监听内部接口是否加载完成_低成本0基础打造自己的app之uni-app请求接口以及生命周期函数...
引言此教程为教你怎么用WordPress开发一个属于你自己的app(小程序) 前面我们讲解了怎么用WP开发一个首页幻灯片接口(低成本0基础开发app之开发首页幻灯片接口),本来这一节中我们应该讲解如 ...
uniapp App更新解决方法
uniapp App更新解决方法最近项目碰到的app更新问题,安卓和iOS更新. 功能实现效果安卓端:后台下载,自动弹出系统安装界面 iOS端:跳转 appStore app更新界面 1.获取用户 ...
java中一个接口调取另一个接口（接口一调取接口二）
工具类 package com.utils;import java.io.BufferedReader; import java.io.InputStream; import java.io.Inpu ...
uni-app封装缓存过期方法
uni-app封装缓存过期方法缓存在我们的日常开发中还是非常常见的.同样的今天的话题是在uni-app框架中怎么封装一个缓存方法,为什么还要自己封装缓存方法?虽然说uni-app是用缓存的api接口 ...
EasyNVR调取接口在web页实现多通道同时直播
1.背景需求软件本身也支持多通道直播,但有时满足不了用户的需求,用户可能需要的是更灵活多变的的播放需求,以及自己喜欢的样式风格. 2.解决方案通过接口可以实现用户多变复杂的业务需求,完全可以按照自 ...
Java8 - 接口默认方法
2019独角兽企业重金招聘Python工程师标准>>> Java8 - 接口默认方法什么是默认方法,为什么要有默认方法简单说,就是接口可以有实现方法,而且不需要实现类去实现其方法 ...

uniapp调取接口的方法

uniapp调取接口的方法相关推荐

最新文章

热门文章