uni-app的uni.request()请求封装

Posted 2023-04-26

参考技术A

第一种:常见的直接发起uni.request()请求

第二种：async修饰函数和await的使用，这个好像是es7的

第三种：es6异步promise封装这种发起请求接口，跟axios封装差不多

一个项目有N多个接口，但前面的一段url基本是一致不变的（专业点说也就是前面那一段是域名，域名是不变的+后面一段是变化的，是接口地址）。

这时候我们就可以抽离封装了api了。

在uni-app的main.js中将api.js挂载到全局，让所有页面都能接收

页面调用（index.vue想使用）：

效果：

uni-app 封装请求

新建一个js文件专门来放封装好的方法哈

//现在我们在config.js 文件下面(这个文件名字是自己命名的哈)
//分别针对 get 和 post 进行一个公共 uni.request 请求的封装，每个方法传了2个参数，url 和 data ；(一个是接口地址，一个是参数)

const commonUrl = ‘xxxxx‘;//公共路径
//post 封装
function postRequest(url,data){
    var promise = new Promise((resolve,reject)=>{
        var that = this;
        var params = data;
        uni.request({
            url:commonUrl+url,
            data:params,
            method:‘POST‘,
            header:{
               ‘content-type‘:‘application/x-www-form-urlencoded‘,
               ‘token‘:uni.getStorageSync(‘token‘)
            },
            success:function(res){
               resolve(res)
            },
            error:function(error){
               reject(‘error‘)
            }
        })
    })
    return promise
}

//get 封装
function getRequest(url,data){
   var promise = new Promise((resolve,reject)=>{
       var that = this;
       var params = data;
       uni.request({
            url:commonUrl + url,
            data:params,
            method:‘GET‘，
            header:{
               ‘content-type‘:‘application/json‘
            },
            success:function(res){
               resolve(res)
            },
            error:function(error){
               reject(error)
            }
       })
   })
   return promise
}
module.exports = {
   postRequest,
   getRequest
}
///////////// config.js 文件封装 结束 //////////////

现在进行第二层封装 新建一个 http.js 文件，这个文件主要是封装接口的请求
var config = require(‘./config.js‘)
//比如说是 login 登录接口
var goLogin = function(val){
    return config.getRequest(‘api/login‘,val);
}
module.exportd = {
    goLogin
}

///////////// 第二层封装结束   //////////////////

如何使用？
在需要请求接口的文件引入这个 http.js 文件
import http from ‘@/utils/http.js‘;

function goLogin(){
   let params = {
       ‘userPhone‘:‘xxxx‘
   };
   http.goLogin(params).then(res=>{
       console.log(res)
   }).catch(err=>{})
}

 参考链接：https://blog.csdn.net/Syleapn/article/details/97390552?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task