axios-miniprogram/example/src/pages/index/index.vue

<script lang="ts" setup>
import { ref } from 'vue';
import axios from 'axios-miniprogram';

const config = ref<string>('');
const response = ref<string>('');
const error = ref<string>('');

axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';
axios.defaults.errorHandler = (err) => {
  error.value = `<pre>${JSON.stringify(err, null, 4)}</pre>`;
  return Promise.reject(err);
};
axios.use(async (ctx, next) => {
  config.value = `<pre>${JSON.stringify(ctx.req, null, 4)}</pre>`;
  await next();
  response.value = `<pre>${JSON.stringify(ctx.res, null, 4)}</pre>`;
});

function getRequest() {
  axios.get('/users/:id', {
    id: 1,
  });
}

function postRequest() {
  axios.post(
    '/users',
    '{"name":"Leanne Graham","username":"Bret","email":"Sincere@april.biz","address":{"street":"Kulas Light","suite":"Apt. 556","city":"Gwenborough","zipcode":"92998-3874","geo":{"lat":"-37.3159","lng":"81.1496"}},"phone":"1-770-736-8031 x56442","website":"hildegard.org","company":{"name":"Romaguera-Crona","catchPhrase":"Multi-layered client-server neural-net","bs":"harness real-time e-markets"}}',
  );
}

function putRequest() {
  axios.put(
    '/users/:id',
    '{"id":1,"name":"Leanne Graham","username":"Bret","email":"Sincere@april.biz","address":{"street":"Kulas Light","suite":"Apt. 556","city":"Gwenborough","zipcode":"92998-3874","geo":{"lat":"-37.3159","lng":"81.1496"}},"phone":"1-770-736-8031 x56442","website":"hildegard.org","company":{"name":"Romaguera-Crona","catchPhrase":"Multi-layered client-server neural-net","bs":"harness real-time e-markets"}}',
  );
}

function deleteRequest() {
  axios.delete('/users/:id', {
    id: 1,
  });
}

defineExpose({
  getRequest,
  postRequest,
  putRequest,
  deleteRequest,
  config,
  response,
  error,
});
</script>

<template>
  <view>
    <button class="button" type="primary" @click="getRequest">GET 请求</button>
    <button class="button" type="primary" @click="postRequest">
      POST 请求
    </button>
    <button class="button" type="primary" @click="putRequest">PUT 请求</button>
    <button class="button" type="primary" @click="deleteRequest">
      DELETE 请求
    </button>

    config:
    <view class="code" v-html="config"></view>

    response:
    <view class="code" v-html="response"></view>

    error:
    <view class="code" v-html="error"></view>
  </view>
</template>

<style>
.button {
  margin: 20px;
}

.code {
  padding: 20px;
  overflow-x: scroll;
  white-space: pre;
}
</style>