uniapp调取接口的方法

明日之后

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

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

[JavaScript] 纯文本查看 复制代码

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

[JavaScript] 纯文本查看 复制代码

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对象解决异步请求

[JavaScript] 纯文本查看 复制代码

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

[JavaScript] 纯文本查看 复制代码

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解决异步请求

[JavaScript] 纯文本查看 复制代码

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等，其他的看需求而定

[JavaScript] 纯文本查看 复制代码

$.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
安装

[JavaScript] 纯文本查看 复制代码

npm install --save axios

main.js

[JavaScript] 纯文本查看 复制代码

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

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

[JavaScript] 纯文本查看 复制代码

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 域名。

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

zzzyf

后端用go写吗？