vue3項(xiàng)目中封裝axios的示例代碼

更新時(shí)間：2022年12月19日 09:24:03 作者：飛翔的波斯貓

這篇文章主要介紹了vue3項(xiàng)目中封裝axios的示例代碼,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

axios的基本使用

import axios from 'axios'
// console.log('adh')
axios.get('http://XXX.xxx.xxx.xxx:8000/home').then((res) => {
  console.log(res.data)
})

axios.get()會(huì)返回一個(gè)Promise對(duì)象,所以可以用.then獲取返回的數(shù)據(jù)。

axios.all()方法

axios.all([
  axios.get('http://httpbin.org/get').then((res) => {
    console.log(res.data)
  }),
  axios.post('http://httpbin.org/post').then((res) => {
    console.log(res.data)
  })
])

axios一些基本配置

在axios中，有一些默認(rèn)配置，它們是存在于axios.defaults中的，比如我們經(jīng)常會(huì)用到的baseURL、timeout屬性

axios.defaults.baseURL = 'http://httpbin.org'
axios.defaults.timeout = 10000

axios的攔截器

在平常的使用中，我們經(jīng)常需要對(duì)axios請(qǐng)求進(jìn)行攔截以處理一些特殊情況，如獲取token、處理異常等，這時(shí)候我們就需要使用axios的攔截器（）。

axios.interceptors.request.use(
  (config) => {
    return config
  },
  (error) => {
    return error
  }
)
axios.interceptors.response.use(
  (res) => {
    console.log(res.data)
  },
  (error) => {
    return error
  }
)

如上，axios.interceptors.request是對(duì)請(qǐng)求的攔截，此時(shí)可以為請(qǐng)求添加headers，添加token等操作，二axios.interceptors.response則是對(duì)請(qǐng)求的返回進(jìn)行攔截，在此處我們可以統(tǒng)一返回的數(shù)據(jù)結(jié)構(gòu)以及對(duì)錯(cuò)誤進(jìn)行一些統(tǒng)一的處理

封裝axios-封裝基礎(chǔ)屬性

首先，我們先確認(rèn)一下基本思路，我們把主要的邏輯封裝成一個(gè)類(lèi)，然后編寫(xiě)一個(gè)出口文件，將該類(lèi)導(dǎo)出，需要注意的是，往這個(gè)類(lèi)中傳入哪些參數(shù)，誠(chéng)然，我們可以直接在類(lèi)中定義諸如BASE_URL、timeout、interceptors等axios的屬性或方法，但是為了今后的可適配性更高，我們應(yīng)該盡量的把可配置的屬性作為變量傳入我們欲封裝的類(lèi)中，下面先進(jìn)行一個(gè)基本的封裝：

// 封裝類(lèi)
import axios from 'axios'
import { AxiosInstance, AxiosRequestConfig } from 'axios'
class ZWRequest {
  instance: AxiosInstance
  constructor(config: AxiosRequestConfig) {
    this.instance = axios.create(config)
  }

  request(config: AxiosRequestConfig): void {
    this.instance.request(config).then((res) => {
      console.log(res) // 此處能成功打印出結(jié)果代表成功
    })
  }
}
export default ZWRequest
// 出口文件index.ts
import ZWRequest from './request'
import { BASE_URL, timeout } from './request/config'

const zwRequest = new ZWRequest({
  baseURL: BASE_URL, // 配置參數(shù)
  timeout: timeout // 配置參數(shù)
})
export default zwRequest
// 在main.ts中測(cè)試
import ZWRequest from './service/index.ts'
ZWRequest.request({
  url: '/post',
  method: 'POST'
})

封裝攔截器

上面的封裝可以傳入BASE_URL、timeout等一些基礎(chǔ)屬性，但是對(duì)于攔截器interceptors還是不能實(shí)現(xiàn)配置，所以下一步我們改造一下使其可以傳入攔截器：

// 封裝類(lèi)
import axios from 'axios'
import { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'

// 自建一個(gè)用于匹配interceptors的類(lèi)型
interface ZWRequestInterceptors {
  requestInterceptor?: (config: AxiosRequestConfig) => AxiosRequestConfig // 這是個(gè)函數(shù)類(lèi)型
  requestErrorInterceptor?: (error: any) => any
  responseInterceptor?: (config: AxiosResponse) => AxiosResponse
  responseErrorInterceptor?: (error: any) => any
}
/** 再新建一個(gè)一個(gè)類(lèi)型繼承AxiosRequestConfig類(lèi)型，并在其中設(shè)立一個(gè)屬性，
該屬性對(duì)應(yīng)上一步建立的類(lèi)型，如此，我們就可以用這個(gè)類(lèi)型來(lái)代替封裝類(lèi)
的constructor()函數(shù)傳入的參數(shù)類(lèi)型了，在此基礎(chǔ)上，完成對(duì)攔截器參數(shù)的傳入。*/
interface ZWRequestConfig extends AxiosRequestConfig {
  interceptors?: ZWRequestInterceptors
}
class ZWRequest {
  instance: AxiosInstance
  interceptors?: ZWRequestInterceptors
  constructor(config: ZWRequestConfig) {
    this.instance = axios.create(config)
    this.interceptors = config.interceptors
    this.instance.interceptors.request.use(
      this.interceptors?.requestInterceptor,
      this.interceptors?.requestErrorInterceptor
    )
    this.instance.interceptors.response.use(
      this.interceptors?.responseInterceptor,
      this.interceptors?.responseErrorInterceptor
    )
  }

  request(config: ZWRequestConfig): void {
    this.instance.request(config).then((res) => {
      console.log(res)
    })
  }
}
export default ZWRequest
// 出口函數(shù)index.ts
/** 我們可以在出口函數(shù)中同意規(guī)定攔截器的形式以及相應(yīng)的處理，這樣做的好處是如果我們想
再生成一個(gè)可用的axios對(duì)象，如ZWRequest2，而且想實(shí)現(xiàn)與ZWRequest不一樣的攔截方法，那么
就只需要在該頁(yè)面再新創(chuàng)建一個(gè)對(duì)象即可 */
import ZWRequest from './request'
import { BASE_URL, timeout } from './request/config'

const zwRequest = new ZWRequest({
  baseURL: BASE_URL,
  timeout: timeout,
  interceptors: {
    requestInterceptor: (config) => {
      console.log('發(fā)送請(qǐng)求成功11', config)
      return config
    },
    responseInterceptor: (res) => {
      console.log('返回成功11', res)
      return res
    }
  }
})
const zwRequest2 = new ZWRequest({
  baseURL: BASE_URL,
  timeout: timeout,
  interceptors: {
    requestInterceptor: (config) => {
      console.log('發(fā)送請(qǐng)求成功22', config)
      return config
    },
    responseInterceptor: (res) => {
      console.log('返回成功22', res)
      return res
    }
  }
})
export default zwRequest
// main.ts中實(shí)驗(yàn)
ZWRequest.request({
  url: '/post',
  method: 'POST'
})
ZWRequest2.request({
  url: '/post',
  method: 'POST'
})

封裝公用的攔截器

上面的封裝中，攔截器是由每個(gè)實(shí)例傳入的，但是有時(shí)候我們就是想所有的實(shí)例都擁有共同的攔截器，那么我們就需要在axios封裝類(lèi)里面添加共有的攔截器了（實(shí)例傳入的攔截器也并不會(huì)被取消），只需要在axios封裝類(lèi)中添加以下代碼即可實(shí)現(xiàn)全局的攔截：

this.instance.interceptors.request.use(
      (config) => {
        console.log('共有的請(qǐng)求時(shí)成功攔截')
        return config
      },
      (error) => {
        console.log('共有的請(qǐng)求時(shí)失敗攔截')
        return error
      }
    )
this.instance.interceptors.response.use(
  (res) => {
    console.log('共有的返回時(shí)成功的攔截')
    return res
  },
  (error) => {
    console.log('共有的返回時(shí)失敗的攔截')
    return error
  }
)

對(duì)單個(gè)請(qǐng)求傳入攔截器

其實(shí)上面對(duì)攔截器的封裝已經(jīng)基本可以滿(mǎn)足平時(shí)的開(kāi)發(fā)需求了，但是如果你想更靈活些，比如每個(gè)請(qǐng)求都可以傳入自己的攔截器，那么請(qǐng)往下看，如果我們需要再請(qǐng)求時(shí)傳入攔截器，那么就需要看看我們是怎么調(diào)用的。目前，我們采用ZWRequest.request(config)的方式調(diào)用axios請(qǐng)求，很顯然，在封裝類(lèi)中，config參數(shù)的類(lèi)型是：AxiosRequestConfig，這個(gè)類(lèi)型很顯然不能傳入攔截器參數(shù)。

request(config: AxiosRequestConfig): void {
   this.instance.request(config).then((res) => {
     console.log(res)
   })
 }

所以為了能夠往request方法中傳入攔截器參數(shù)，我們需要將AxiosRequestConfig類(lèi)型化成我們上面新建立的類(lèi)型ZWRequestConfig，這樣就可以從單個(gè)請(qǐng)求處傳入各自的攔截器了。

// 改造axios封裝類(lèi)中的request方法
request(config: ZWRequestConfig): void {
    // 對(duì)單獨(dú)請(qǐng)求傳來(lái)的攔截器進(jìn)行處理
    if (config.interceptors?.requestInterceptor) {
      config = config.interceptors?.requestInterceptor(config)
    }
    this.instance.request(config).then((res) => {
      if (config.interceptors?.responseInterceptor) {
        res = config.interceptors?.responseInterceptor(res)
      }
      console.log(res)
    })
}
// 在main.ts中進(jìn)行測(cè)試
ZWRequest.request({
  url: '/post',
  method: 'POST',
  interceptors: {
    requestInterceptor: (config) => {
      console.log('單獨(dú)請(qǐng)求的請(qǐng)求成功攔截')
      return config
    },
    responseInterceptor: (res) => {
      console.log('單獨(dú)請(qǐng)求的響應(yīng)成功攔截')
      return res
    }
  }
})

可以正常打印，成功！

對(duì)request請(qǐng)求方法封裝

上面其實(shí)已經(jīng)對(duì)request請(qǐng)求進(jìn)行了大部分的封裝了，但是此時(shí)的各種返回還局限在類(lèi)里面，我們?cè)趍ain.ts中是無(wú)法拿到的，那么想要拿到返回值，我們就需要進(jìn)一步操作，其實(shí)就是利用promise將結(jié)果返回出來(lái)：

// 對(duì)request方法的改造
request<T>(config: ZWRequestConfig): Promise<T> {
  return new Promise((resolve, reject) => {
    // 對(duì)單獨(dú)請(qǐng)求傳來(lái)的攔截器進(jìn)行處理
    if (config.interceptors?.requestInterceptor) {
      config = config.interceptors?.requestInterceptor(config)
    }
    if (config.showLoading === false) {
      // 代表該請(qǐng)求不想顯示加載動(dòng)畫(huà)
      this.showLoading = config.showLoading
    }
    this.instance
      .request<any, T>(config)
      .then((res) => {
        // 每次請(qǐng)求返回后將showLoading的值改為默認(rèn)值，以免被這次請(qǐng)求穿的配置影響下一次請(qǐng)求的加載動(dòng)畫(huà)顯示
        this.showLoading = DEFAULT_LOADING
        if (config.interceptors?.responseInterceptor) {
          res = config.interceptors?.responseInterceptor(res)
        }
        resolve(res)
        console.log(res)
      })
      .catch((error) => {
        console.log(error)
        this.showLoading = DEFAULT_LOADING
        reject(error)
      })
  })
}
// 在main.ts中實(shí)驗(yàn)
interface dataType {
  data: any
  returnCode: string
  success: boolean
}
ZWRequest.request<dataType>({
  url: '/home/multidata',
  method: 'GET'
  // showLoading: false
}).then((res) => {
  console.log(res.data)
  console.log(res.returnCode)
  console.log(res.success)
})

由上可見(jiàn)，其實(shí)操作很簡(jiǎn)單，那么接下來(lái)即使利用已經(jīng)寫(xiě)好的request方法來(lái)些各種常用的請(qǐng)求調(diào)用方法了，就不多做贅述了，代碼如下：

get<T>(config: ZWRequestConfig): Promise<T> {
return this.request<T>({ ...config, method: 'GET' })
}
post<T>(config: ZWRequestConfig): Promise<T> {
  return this.request<T>({ ...config, method: 'POST' })
}
delete<T>(config: ZWRequestConfig): Promise<T> {
  return this.request<T>({ ...config, method: 'DELETE' })
}

以上就是本人對(duì)axios的全部封裝，完畢！

到此這篇關(guān)于vue3項(xiàng)目中封裝axios的文章就介紹到這了,更多相關(guān)vue3封裝axios內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: