Uniapp 里面的 axios, 一个有意思的新插件

技术 JS/TS
1

对于前端来说, axios 的请求拦截器好处就不用多说了, 但是在uniapp里面编译为小程序平台的时候, 我们就用不了axios, 为什么用不了，因为小程序的网络api和web端还是大相径庭的。这样请求拦截器我们自然就无法使用了.

接下来介绍下 @lylajs/uni-app, 在名字中就可以看的出这个包是 lylajs 里面的子包, 它支持多个平台的使用。还有 @lylajs/qq, @lylajs/wx。直接上图

image.png
image.png297×818 40.1 KB

这个包为什么可以适配出这么多的平台呢？原因就在于有一个可以传入的 adapter, 每个人都可以根据自己的平台实现自己的 adapter 方法。可以在截图看到在创建 lyla 实例的时候可以传入自己的适配器。

image.png
image.png804×317 19.7 KB
github代码

image.png
image.png691×618 28.7 KB

我们拿到数据是不是可以自行实现请求了。当然有一些错误回调规范需要注意，都是一些细节，知道思路就行。

github代码

大致的流程就是，lylajs 的 core 方法会将请求数据，请求方法，请求头等东西规范化，然后传给 adapter

如何使用 @lylajs/uni-app

npm install @lylajs/uni-app

import { createLyla } from "@lylajs/uni-app";

const { lyla } = createLyla({

context: null,

allowGetBody: true, // 此处是为了适配小程序get请求方法是body

baseUrl: “https://teacher.hexfuture.net”,

hooks:{

onAfterResponse: [(res) => {

return res

}],

onBeforeRequest: [(config) => {

config.headers = {

…config.headers,

_name: ‘lyla’

}

return config

}]

}

})


export {

lyla

}




  
    
    
      {{ title }}
    
  




.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}

常见api封装

import { lyla } from "@/utils/request";

type Repo = {

name: string;

description: string;

html_url: string;

}


interface Item {

id: number;

category: {

id: number;

name: string;

};

name: string;

photoUrls: string;

tags: {

id: number;

name: string;

};

status: string;

}


export function getRepoList(data: { status: string }) {

return lyla({

method: ‘get’,

url: ‘/pet/findByStatus’,

query: data

})

}

感兴趣可以去看看。文档地址

这是一个从 https://juejin.cn/post/7368770335225528355 下的原始话题分离的讨论话题