uniapp调取接口的方法

偏执的太偏执、 2022-11-29 13:28 304阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc4ODY5MQ_size_16_color_FFFFFF_t_70_pic_center]

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

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

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

**利用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 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 域名。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc4ODY5MQ_size_16_color_FFFFFF_t_70_pic_center 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc4ODY5MQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/a5cc88aa2a8a454eae4c254861c98bff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc4ODY5MQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221124/6646c2e000ea432c85a3974f2c406296.png