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

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

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

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

github代码

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

github代码

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

如何使用 @lylajs/uni-app

npm install @lylajs/uni-app

ts 复制代码

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
}

html 复制代码

<template>
  <view class="content">
    <image class="logo" src="/static/logo.png"></image>
    <view class="text-area">
      <text class="title">{{ title }}</text>
    </view>
  </view>
</template>

<script>
import { lyla } from '@/utils/request'
export default {
  data() {
    return {
      title: 'Hello',
    }
  },
  onLoad() {
    lyla({
      url: '/lis',
      method: 'GET',
      query: {
        id: 1
      }
    }).then((res) => {
      this.title = res.data
    })
  },
  methods: {},
}
</script>

<style>
.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;
}
</style>

常见api封装

ts 复制代码

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<Item>({
    method: 'get',
    url: '/pet/findByStatus',
    query: data
  })
}

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