Vue は axios をカプセル化し、使用します

1. Axios をインストールする

   1、npm i axios
   2、npm install qs.js --save　　//这一步可以先忽略，它的作用是能把json格式的直接转成data所需的格式

   ps: アムウェイは非常に実用的なフロントエンド Web サイトを提供し、誰もがnpmを使用することに同意します。

2. プロジェクトディレクトリにutilsという名前で新しいフォルダを作成し、utilsフォルダ内にrequest.jsを作成します。
   

3.  アクシオスより引用
    

   
   import axios from "axios";
   
   
   // Full config:  https://github.com/axios/axios#request-config
   // axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
   // axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
   // axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
   
   let config = {
       baseURL:'http://localhost:8888',
       // baseURL: process.env.baseURL || process.env.apiUrl || "",
       timeout: 5 * 1000, // Timeout
       withCredentials: true, // Check cross-site Access-Control
   };
   
   const service = axios.create(config);
   
     service.interceptors.request.use(
       function(config) {
           // Do something before request is sent
           return config;
       },
       function(error) {
           // Do something with request error
           return Promise.reject(error);
       }
   );
   
   // Add a response interceptor
   service.interceptors.response.use(
       function(response) {
           // Do something with response data
           return response;
       },
       function(error) {
           // Do something with response error
           return Promise.reject(error);
       }
   );
   
   export default service

4. バックエンド API をカプセル化する

         ps: すべての API をここの src/api フォルダーにカプセル化します

 

 例: すべての専門家情報を取得する

import request from "../utils/request";
import qs from 'qs.js';

//获取专家所有信息
export function getInfo(){
  return request.get(`/sysUser/getAllExpert`)
}

 

5. カプセル化されたインターフェイスを呼び出す

 

<template>
  <div>
    专家信息
  </div>
</template>

<script>
import {getInfo} from '../api/expert'
export default {
  name: "Index",
  data(){
    return{
      expertList:[]
    }
  },
  mounted() {
    getInfo().then(res=>{
      console.log(res)
    },err=>{
      console.log(err)
    })
  }
}
</script>

<style scoped>

</style>

 6. 結果を表示する