vue3.0腳手架 設定axios

vue3.0腳手架 設定axios

1、首先安裝axios ，vue-axios,使用yarn 或者npm 安裝

使用yarn:
yarn add axios
yarn add vue-axios
使用npm
npm install axios
npm install vue-axios

2、安裝完成後在專案src資料夾建一個可以存放組態檔，具體命名按照規範來即可

3、建立完成後config.js檔案我用來存放後端請求介面地址，http.js封裝axios的請求方式，index.js用來所有呼叫介面的方法
3.1 config,js檔案，可以設定不同環境對應的地址

export default {
    baseUrl: {
      dev: "http://xxxx.xx.xx/", // 開發環境
      // fat: 'http://xxx.xx.xx.xx:8080' 
      //uat : "http://production.com" 
    },
  };

3.2 http.js 封裝axios超時請求時間，get請求、post請求，封裝的目的是為了統一呼叫引入方法，不用在所有介面引入，具體程式碼如下

import axios from "axios"; // 參照axios
import config from "@/api/config";

const instance = axios.create({
  baseURL: config.baseUrl.dev,
  timeout: 60000,
});
//get請求
export function get(url, params = {}) {
  return new Promise((resolve, reject) => {
    instance
      .get(url, {
        params: params,
      })
      .then((response) => {
        resolve(response);
      })
      .catch((err) => {
        reject(err);
      });
  });
}
//post請求
export function post(url, data = {}) {
  return new Promise((resolve, reject) => {
    instance.post(url, data).then(
      (response) => {
        resolve(response.data);
      },
      (err) => {
        reject(err);
      }
    );
  });
}

3.3 index.js引入封裝的get/post請求方法，直接呼叫後端介面地址

import { get,post } from "@/api/http";
export const getData = (params) => get("後端介面名",params);
export const getData1 = (data) => post("後端介面名",data);
//此處如果有引數傳入給後端就需要寫上引數 params/data 否則可以為空
export const getData = () => get("後端介面名");
export const getData1 = () => post("後端介面名");

4、最後在介面中呼叫index.js的方法就可以了

import { getData } from '@/api/index.js';
export default {
    name: '',
    mounted() {
        this.getCompany();
    },
     methods: {
        getCompany(){
            getData().then(res=> {
            })
            .catch(error=>{
                console.log(error)
            });
         },
    },
}
</script>

基本設定就完成了，可以正常呼叫介面