// 導(dǎo)入的axios是一個(gè)實(shí)例對(duì)象
import axios from 'axios'

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

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

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

// axios的所有請(qǐng)求本質(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'
    }
  })
])

// 攔截器必須要在請(qǐng)求和響應(yīng)之前被注冊(cè)

// 請(qǐng)求攔截器 --- use方法的兩個(gè)參數(shù) --- 分別對(duì)應(yīng)resolve和reject
// resolve方法的參數(shù)為請(qǐng)求的配置選項(xiàng)
// reject方法的參數(shù)為錯(cuò)誤對(duì)象
axios.interceptors.request.use(
  config => {
    console.log(config)
    return config
  },
  err => console.error(err)
)

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

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

// 基本請(qǐng)求公共路徑
axios.defaults.baseURL = 'http://httpbin.org'

// 超時(shí)時(shí)間
axios.defaults.timeout = 10000

// 需要傳遞的自定義請(qǐng)求頭
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,
}

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

// 將一些相關(guān)配置配置成常量后在引入使用
// 將配置和調(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,

  // 不同的實(shí)例可能有不同的攔截器
  // 所以我們將攔截器封裝成一個(gè)擴(kuò)展屬性進(jìn)行傳入
  // interceptor: {
  //   requestInterceptor: config => {
  //     console.log('請(qǐng)求成功')
  //     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'

// 導(dǎo)出的屬性和方法比較多 所以使用類來(lái)進(jìn)行封裝
// 因?yàn)轭惥哂斜容^好的封裝性
export default class {
  instance: AxiosInstance

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

    // 如果存在實(shí)例級(jí)別的攔截器 就使用攔截器
    // 這是針對(duì)于每一個(gè)請(qǐng)求特有的攔截器 --- 實(shí)例攔截
    // 這里的操作也可以通過transformRequest和transformResponse配置項(xiàng)來(lái)進(jìn)行實(shí)現(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)
  }

  // 這是所有實(shí)例共有的攔截器 --- 全局?jǐn)r截
  // 如果存在多個(gè)攔截器，那么多個(gè)攔截器都會(huì)被執(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的樣式
// 所以需要自己手動(dòng)進(jìn)行引入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) => {
      // ?? --- 當(dāng)左側(cè)的操作數(shù)為 null 或者 undefined 時(shí)，返回右側(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 => {
      // 關(guān)閉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'

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

// vite默認(rèn)會(huì)設(shè)置一下自帶的環(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)