uniapp封装公共请求typescript版

Posted 请叫我小庄哥

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了uniapp封装公共请求typescript版相关的知识,希望对你有一定的参考价值。

第一步:新建文件夹services

第二步:新建文件request.ts

//服务器接口地址
 const baseURL:string=\'http://xxxxxx\' 
 //本地调试接口地址
// const baseURL:string=\'http://xxxxxx\'

// 封装公共请求方法
function request(url:string, method: "GET" | "POST" | undefined,data: object | any){
      return new Promise(function(resolve, reject){
              let header:any
              if(uni.getStorageSync(\'token\') !== undefined && uni.getStorageSync(\'token\') !== ""){
                header = {
                  \'content-type\': \'application/json\',
                  \'X-Auth-Token\': uni.getStorageSync(\'token\')
                };
              }else {
                header = {
                  \'content-type\': \'application/json\',
                };
              }
              uni.request({
                    url: baseURL + url,
                    method: method,
                    data: data,
                    header: header,
                    success(res:any) {
                        console.log(res)
                        uni.hideLoading()
                      if (res.data.code === "200" || res.data.ok) {
                        resolve(res.data);
        
                      } else {
                        //其他异常
                        uni.showToast({
                            title:res.data.msg,
                            icon:\'none\'
                        })
                        reject(res.data);
                      }
                    },
                    fail(err) {
                        uni.hideLoading()
                      //请求失败
                      uni.showToast({
                          title:\'无法连接到服务器\',
                        icon:\'none\'
                      })
                      reject(err)
                    }
                    
                  })
                  
            })
            
    }


export {request,baseURL} 

第三步:新建同级文件api.ts 

 import {request} from \'./request\'
//登录接口
const login = (data: object | any)=>request(\'/corp_auth/admin_login\', \'POST\', data)
 // 首页获取商品列表
const getList =(data: object | any)=>request(\'/goods/get_all_goods_by_collieryid\', \'GET\', data)

export{
    login,
    getList

}

首页index.vue引入需要的接口

<script lang="ts">
    import Vue from \'vue\';
    import { getList } from \'../../../services/api\';
    export default Vue.extend({
        data() {
            return {
                list:[],
                pageNow:\'\',
            }
        },
        onLoad(options) {
            this.initList(),
               
        },

        onReachBottom() { //上拉加载
            this.pageNow = this.pageNow + 1
            this.initList()
        },
        methods: {
            async initList() { 
                const listRes: any = await getList({
                    pageNow: this.pageNow,
                })
                this.list = this.list.concat(listRes.payload)
            },
        },

    });
</script>        

如果里面有success等回调函数,就不能用async和await的写法,应该用下面这种

initList() { 
  let that = this getList({ pageNow:
this.pageNow }).then(res => { that.list = that.list.concat(res.data.payload) }) },

 

以上是关于uniapp封装公共请求typescript版的主要内容,如果未能解决你的问题,请参考以下文章

uniappios换https后无法请求

uniapp公共跳转(uni.navigateTo)封装

uniapp请求+uView2.0请求封装

uniapp封装请求后台接口

uniapp下uni.request请求的封装

uni-app请求接口封装