Panggil REST API daripada fail JavaScript menggunakan Vue

Question

Saya mempunyai panggilan API Axios yang berfungsi dengan sempurna pada halaman Vue. Saya perlu mengubahnya menjadi modul boleh panggil kendiri yang boleh digunakan semula beberapa kali dalam aplikasi. Setiap percubaan gagal, saya tidak pasti sama ada kekurangan pengalaman dengan js kendiri atau sesuatu yang lain.

Ini berfungsi kod Vue.

<kod><template>
  <div>
    <ul v-if="siaran && siaran.panjang">
      <li v-for="jawatan jawatan">
        <p><strong>{{post.resID}}</strong></p>
        <p>{{post.Name}}</p>
      </li>
    </ul>

    <ul v-if="ralat && ralat.panjang">
      <li v-for="ralat ralat">
        {{error.message}}
      </li>
    </ul>
  </div>
</template>

<skrip>
import axios daripada 'axios';

eksport lalai {
  nama: "GetMxList",
  data() {
    kembali {
      siaran: [],
      ralat: []
    }
  },

  // Dapatkan siaran apabila komponen dibuat.
  dicipta() {
    axios.get("http://localhost:8080/rest/...")
    .then(respon => {
      // Jawapan JSON akan dihuraikan secara automatik.
      this.posts = respons.data
    })
    .catch(e => {
      this.errors.push(e)
    })
  }
}
</skrip>
</code>

Vue 3. Terima kasih untuk jawapan anda. Maaf saya tidak menyatakan diri saya dengan jelas. Matlamat saya ialah untuk mencipta modul (serupa dengan rest.js) dan kemudian menggunakannya dalam Pinia. Matlamatnya adalah untuk memuatkan sekali dan kemudian menggunakan hasilnya dengan kerap. Pada masa ini ia berfungsi dengan pemuatan "statik" seperti kod berikut, di mana panggilan getJSONList mengembalikan jawapan berformat JSON dan meletakkan jawapan itu ke dalam MyList untuk digunakan sepanjang aplikasi. Oleh itu, komponen hanya menggunakan pemetaan Pinia.

tindakan: {

    async fetchList() {
      
      data const = menunggu getJSONList();
      ini.Senarai saya = data;
    },

Banyak lelaran. Walaupun ini tidak mengembalikan apa-apa, sekurang-kurangnya ia tidak menimbulkan sebarang ralat...

import axios daripada 'axios';

fungsi eksport getJSONList() {
    
    const rest = axios.create({
        baseURL: "http://localhost:8080/rest/", // Pendekatan yang lebih baik ialah menggunakan pembolehubah persekitaran
      });

    const getPosts = tak segerak () =>
    cuba {
      kembali (menunggu rehat.get("http://localhost:8080/rest/")).data;
    } tangkap (err) {
      console.error(err.toJSON());
      buang Ralat baru(err.message);
    }
  };
    kembali (getPosts);
}

Answer 1

Biasanya, anda hanya memindahkan bahagian Axios ke dalam modul dan menyerahkan penggunaan data kepada komponen anda.

// services/rest.js
import axios from "axios";

const rest = axios.create({
  // 更好的方式是使用环境变量来定义你的URL
  baseURL: "http://localhost:8080/rest/tctresidents/v1",
});

// 这是一个函数
export const getResidents = async () => {
  try {
    // 请求路径将会附加到baseURL后面
    return (await rest.get("/Residents")).data;
  } catch (err) {
    // 参考 https://axios-http.com/docs/handling_errors
    console.error(err.toJSON());

    throw new Error(err.message);
  }
};

Kemudian dalam komponen/storan/apa sahaja...

import { getResidents } from "./path/to/services/rest";

export default {
  data: () => ({ residents: [], errors: [] }),
  async created() {
    try {
      this.residents = await getResidents();
    } catch (err) {
      this.errors.push(err);
    }
  },
};