npm install axios

yarn add axios

// src/axios.js
import axios from 'axios';

// 創(chuàng)建Axios實(shí)例
const axiosInstance = axios.create({
  baseURL: '// 你的基礎(chǔ)URL', // 設(shè)置請(qǐng)求的baseURL
  timeout: 5000, // 設(shè)置請(qǐng)求超時(shí)時(shí)間
});

// 導(dǎo)出Axios實(shí)例
export default axiosInstance;

// src/axios.js
import axios from 'axios';

// 創(chuàng)建Axios實(shí)例
const axiosInstance = axios.create({
  baseURL: '// 你的基礎(chǔ)URL',
  timeout: 5000,
});

// 添加請(qǐng)求攔截器
axiosInstance.interceptors.request.use(
  (config) => {
    // 在發(fā)送請(qǐng)求之前做些什么
    // 例如，添加請(qǐng)求頭
    const token = localStorage.getItem('token');
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    
    // 處理請(qǐng)求參數(shù)
    // config.params = {
    //   ...config.params,
    //   key: 'value',
    // };

    return config;
  },
  (error) => {
    // 對(duì)請(qǐng)求錯(cuò)誤做些什么
    return Promise.reject(error);
  }
);

// 導(dǎo)出Axios實(shí)例
export default axiosInstance;

// src/axios.js
import axios from 'axios';

// 創(chuàng)建Axios實(shí)例
const axiosInstance = axios.create({
  baseURL: '// 你的基礎(chǔ)URL',
  timeout: 5000,
});

// 添加請(qǐng)求攔截器（同上）

// 添加響應(yīng)攔截器
axiosInstance.interceptors.response.use(
  (response) => {
    // 對(duì)響應(yīng)數(shù)據(jù)做些什么
    // 例如，處理響應(yīng)數(shù)據(jù)格式
    // response.data = {
    //   ...response.data,
    //   key: 'value',
    // };

    return response;
  },
  (error) => {
    // 對(duì)響應(yīng)錯(cuò)誤做些什么
    const { response } = error;
    if (response) {
      // 判斷錯(cuò)誤狀態(tài)碼
      if (response.status === 400) {
        // 請(qǐng)求錯(cuò)誤
      } else if (response.status === 401) {
        // 未授權(quán)，請(qǐng)重新登錄
      } else if (response.status === 403) {
        // 拒絕訪問(wèn)（403）
      }

      return Promise.reject(response.data);
    } else {
      console.error('網(wǎng)絡(luò)連接異常，請(qǐng)稍后再試！');
    }
  }
);

// 導(dǎo)出Axios實(shí)例
export default axiosInstance;

<!-- src/components/YourComponent.vue -->
<template>
  <div>數(shù)據(jù)展示</div>
</template>

<script>
import axiosInstance from '../axios';

export default {
  name: 'YourComponent',
  mounted() {
    axiosInstance.get('/your-endpoint')
      .then(data => {
        console.log(data);
      })
      .catch(error => {
        console.error('錯(cuò)誤:', error);
      });
  },
};
</script>

// src/api/axios.js
import axios from 'axios';

// 創(chuàng)建Axios實(shí)例（同上）

// 封裝GET請(qǐng)求方法
export function getRequest(url, params = {}) {
  return axiosInstance.get(url, { params });
}

// 封裝POST請(qǐng)求方法
export function postRequest(url, data = {}) {
  return axiosInstance.post(url, data);
}

<!-- src/components/YourComponent.vue -->
<template>
  <div>數(shù)據(jù)展示</div>
</template>

<script>
import { getRequest, postRequest } from '../api/axios';

export default {
  name: 'YourComponent',
  mounted() {
    // 使用GET請(qǐng)求方法
    getRequest('/your-get-endpoint', { param1: 'value1' })
      .then(data => {
        console.log('GET請(qǐng)求響應(yīng):', data);
      })
      .catch(error => {
        console.error('GET請(qǐng)求錯(cuò)誤:', error);
      });

    // 使用POST請(qǐng)求方法
    postRequest('/your-post-endpoint', { key: 'value' })
      .then(data => {
        console.log('POST請(qǐng)求響應(yīng):', data);
      })
      .catch(error => {
        console.error('POST請(qǐng)求錯(cuò)誤:', error);
      });
  },
};
</script>

// src/api/api.js
import { getRequest, postRequest } from './axios';

// 定義用戶相關(guān)API接口
export class UserApi {
  static async login(params) {
    return postRequest('/login', params);
  }

  static async register(params) {
    return postRequest('/register', params);
  }

  static async getUserInfo(params) {
    return getRequest('/userInfo', params);
  }
}

// 定義書籍相關(guān)API接口
export class BookApi {
  static async getBookList(params) {
    return getRequest('/bookList', params);
  }
}

<!-- src/components/YourComponent.vue -->
<template>
  <div>
    <button @click="handleLogin">登錄</button>
  </div>
</template>

<script>
import { UserApi } from '../api/api';

export default {
  name: 'YourComponent',
  methods: {
    async handleLogin() {
      const params = {
        username: 'admin',
        password: '123456',
      };
      try {
        const response = await UserApi.login(params);
        console.log('登錄成功:', response);
      } catch (error) {
        console.error('登錄失敗:', error);
      }
    },
  },
};
</script>

import axios from 'axios'
import { Message } from 'element-ui';
import router from '../router'//導(dǎo)入文件夾,自動(dòng)會(huì)去找里面的index.js
  
 
const instances = axios.create({
    baseURL: 'http://localhost',
  });
 
//響應(yīng)攔截器
instances.interceptors.response.use(success=>{//這個(gè)success指的是調(diào)用接口成功
    
    console.log('響應(yīng)攔截器,chenggong')
   
},error=>{//接口根本沒(méi)有調(diào)用到或者服務(wù)器掛了,各種原因
   
    console.log('響應(yīng)攔截器,shibai',error)
    Message.error({message:error})
});
 
// //可以在所有請(qǐng)求前添加前置路徑
// let base='';
 
// //封裝請(qǐng)求并導(dǎo)出
// export const postRequest=(url,params)=>{
//     return axios({
//         method:'post',
//         url:'${base}${url}',
//         data:params
//     })
// }
 
export default instances;