uniapp调取接口的方法
面试官的问题：前后端分离，该如何调用接口？？?
思路：应该直接回答这个问题，通过向后端接口路径发送请求，建立http连接后，再由后端对我需要的数据或内容进行操作处理后返回给前端，这就是一个接口的调用。接下来你可以说一下接口，服务器与客户端的三次握手协议，以及请求的方式，比如如GET/POST，HTTP协议等内容。
现实前端开发中，我们需要调取后台接口进行动态数据渲染，我们必须先查阅后台接口文档，了解使用该接口时，确定第三方的接口的基本信息：地址、请求方式，参数、返回值等，需要提交哪些参数，并且接口使用返回的数据。
最普通的调取接口方法，不能解决异步
uni.request({ url:'', //请求的地址，类型为String data:'', //要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后 method:'', //get、post、delete header:{}, //请求头的信息 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:'', //请求的地址，类型为String data:'', //要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后 method:'', //get、post、delete header:{} //请求头的信息 }).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.data console.log("carouselData");} }},onLoad(){ this.request();}查阅相关前端调用API的其他方法：附
JQ的ajax：
参数解释：url、type、data、dataType、success、error等，其他的看需求而定
$.ajax({ url:" ", //请求的地址，类型为string type:" ", //请求方式，类型为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 axiosmain.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 域名。
