// 導入的axios是一個實例對象
import axios from 'axios'

// axios方法返回的是promise
const res = await axios.get('https://httpbin.org/get', {
 	// 傳遞query參數(shù)
  params: {
    name: 'Klaus'
  }
})

// 服務器實際返回的數(shù)據(jù)被放置在data屬性中
console.log(res.data)

const res = await axios.post('https://httpbin.org/post', {
  data: {
    name: 'Klaus'
  }
})

// axios的所有請求本質(zhì)上都是在調(diào)用axios的request方法
const res = await axios.request({
  url: 'https://httpbin.org/post',
  method: 'post',
  data: {
    name: 'Klaus'
  }
})

const res = await axios.all([
  axios.get('https://httpbin.org/get', {
    params: {
      name: 'Klaus'
    }
  }),

  axios.post('https://httpbin.org/post', {
    data: {
      name: 'Klaus'
    }
  })
])

// 攔截器必須要在請求和響應之前被注冊

// 請求攔截器 --- use方法的兩個參數(shù) --- 分別對應resolve和reject
// resolve方法的參數(shù)為請求的配置選項
// reject方法的參數(shù)為錯誤對象
axios.interceptors.request.use(
  config => {
    console.log(config)
    return config
  },
  err => console.error(err)
)

// 響應攔截器 --- use方法的兩個參數(shù) --- 分別對應resolve和reject
// resolve方法的參數(shù)為響應體
// reject方法的參數(shù)為錯誤對象
axios.interceptors.response.use(
  res => {
    return res.data
  },
  err => console.error(err)
)

// 以下都是全局配置
// axios的所有全局配置都可以設置在屬性defaults下

// 基本請求公共路徑
axios.defaults.baseURL = 'http://httpbin.org'

// 超時時間
axios.defaults.timeout = 10000

// 需要傳遞的自定義請求頭
axios.defaults.headers = {}

// 局部配置
axios
  .get('/get', {
  params: {
    name: 'Klaus',
    age: 18
  },
  
  // 局部配置可以覆蓋全局配置
  timeout: 5000,
  headers: {}
})
  .then((res) => {
  console.log(res.data)
})

import { AxiosRequestConfig, AxiosResponse  } from 'axios'

// 自定義自己的攔截器類型
export interface Interceptor {
  requestInterceptor?: (config: AxiosRequestConfig) => AxiosRequestConfig | Promise<AxiosRequestConfig>,
  requestInterceptorCatch?: (err: any) => any,
  responseInterceptor?: (res: AxiosResponse) => AxiosResponse | Promise<AxiosResponse>,
  responseInterceptorCatch?: (err: any) => any,
}

// 通過接口繼承的方式擴展axios的AxiosRequestConfig類型
export interface Config extends AxiosRequestConfig{
  interceptor?: Interceptor
}

// 將一些相關配置配置成常量后在引入使用
// 將配置和調(diào)用解耦，如果需要修改，直接修改常量的值即可
export const TIME_OUT = 10000
export const BASE_URL = 'https://httpbin.org/'

import Api from './api'

import {
  BASE_URL,
  TIME_OUT
} from './env'

const api = new Api({
  baseURL: BASE_URL,
  timeout: TIME_OUT,

  // 不同的實例可能有不同的攔截器
  // 所以我們將攔截器封裝成一個擴展屬性進行傳入
  // interceptor: {
  //   requestInterceptor: config => {
  //     console.log('請求成功')
  //     return config
  //   },
  //   requestInterceptorCatch: err => console.error(err),
  //   responseInterceptor: res => res.data,
  //   responseInterceptorCatch:  err => console.error(err)
  // }
})

export default api

import axios from 'axios'
import { ElLoading } from 'element-plus'
import type { AxiosInstance, AxiosRequestConfig } from 'axios'
import type { Config } from './type'

// 導出的屬性和方法比較多 所以使用類來進行封裝
// 因為類具有比較好的封裝性
export default class {
  instance: AxiosInstance

  constructor(config: Config) {
    // 每次創(chuàng)建實例的時候，都調(diào)用axios.create方法
    // axios.create可以返回一個axios實例
    // 這樣保證我們可以使用不同的配置創(chuàng)建多個axios實例
    this.instance = axios.create(config)

    // 如果存在實例級別的攔截器 就使用攔截器
    // 這是針對于每一個請求特有的攔截器 --- 實例攔截
    // 這里的操作也可以通過transformRequest和transformResponse配置項來進行實現(xiàn)
    if (config.interceptor) {
      const { interceptor } = config
      this.instance.interceptors.request.use(interceptor.requestInterceptor, interceptor.requestInterceptorCatch)
      this.instance.interceptors.response.use(interceptor.responseInterceptor, interceptor.responseInterceptorCatch)
    }

    this.registerGlobalInterceptor(config)
  }

  // 這是所有實例共有的攔截器 --- 全局攔截
  // 如果存在多個攔截器，那么多個攔截器都會被執(zhí)行
  registerGlobalInterceptor(option: Config) {
    this.instance.interceptors.request.use(config => config, err => err)
    this.instance.interceptors.response.use(res => res.data, err => err)
  }

  request(config: AxiosRequestConfig) {
    return this.instance.request(config)
  }
}

import axios from 'axios'
import { ElLoading } from 'element-plus'
import type { AxiosInstance, AxiosRequestConfig } from 'axios'
import type { LoadingInstance } from 'element-plus/es/components/loading/src/loading'
import type { Config } from './type'

// el-loading是插件不是組件，element-plus的按需引入并不能正確的引入el-loading的樣式
// 所以需要自己手動進行引入el-loading的樣式
import 'element-plus/theme-chalk/el-loading.css'

export default class {
  instance: AxiosInstance
  loading: LoadingInstance | undefined

  constructor(config: Config) {
    this.instance = axios.create(config)

    if (config.interceptor) {
      const { interceptor } = config
      this.instance.interceptors.request.use(interceptor.requestInterceptor, interceptor.requestInterceptorCatch)
      this.instance.interceptors.response.use(interceptor.responseInterceptor, interceptor.responseInterceptorCatch)
    }

    this.registerGlobalInterceptor()
  }

  registerGlobalInterceptor() {
    this.instance.interceptors.request.use((config: Config) => {
      // ?? --- 當左側(cè)的操作數(shù)為 null 或者 undefined 時，返回右側(cè)操作數(shù)，否則返回左側(cè)操作數(shù)
      if (config?.showLoading ?? true) {
        // 開啟loading
        this.loading =  ElLoading.service({
          lock: true,
          text: 'Loading...',
          background: 'rgba(0, 0, 0, 0.7)',
        })
      }

      return config
    }, err => err)

    this.instance.interceptors.response.use(res => {
      // 關閉loading
      this.loading?.close()

      // axios返回的是字符串，所以需要反序列化
      return JSON.parse(res.data)
    }, err => {
      this.loading?.close()
      return err
    })
  }

  request(config: AxiosRequestConfig) {
    return this.instance.request(config)
  }
}

// 開發(fā)環(huán)境
// const BASE_URL = 'http://example.org/dev'
// const BASE_NAME = 'Klaus'

// 生產(chǎn)環(huán)境
// const BASE_URL = 'http://example.org/prod'
// const BASE_NAME = 'Alex'

// 測試環(huán)境
// const BASE_URL = 'http://example.org/test'
// const BASE_NAME = 'Steven'

// vite默認會設置一下自帶的環(huán)境變量
// 如  MODE, PROD, DEV, SSR, BASE_URL等
if (import.meta.env.MODE === 'development') {
 // ... do something
} else {
 // ... do else
}

# .env.production
# 注意: 在vite中所有的環(huán)境變量必須以VITE_開頭
VITE_APP_TITLE=My App in production

# .env.development
VITE_APP_TITLE=My App in development

// 使用
console.log(import.meta.env.VITE_APP_TITLE)