axios基于常見業(yè)務(wù)場(chǎng)景的二次封裝

JasinYip 發(fā)布于2019-08-26 12:20 / 1837人閱讀

摘要：是一個(gè)基于的庫(kù)，可以用在瀏覽器和中。我在最近的幾個(gè)項(xiàng)目中都有使用，并基于根據(jù)常見的業(yè)務(wù)場(chǎng)景封裝了一個(gè)通用的服務(wù)。業(yè)務(wù)場(chǎng)景全局請(qǐng)求配置。請(qǐng)求攜帶，權(quán)限錯(cuò)誤統(tǒng)一管理。

axios

axios 是一個(gè)基于 promise 的 HTTP 庫(kù)，可以用在瀏覽器和 node.js 中。
在前端框架中的應(yīng)用也是特別廣泛，不管是vue還是react，都有很多項(xiàng)目用axios作為網(wǎng)絡(luò)請(qǐng)求庫(kù)。
我在最近的幾個(gè)項(xiàng)目中都有使用axios，并基于axios根據(jù)常見的業(yè)務(wù)場(chǎng)景封裝了一個(gè)通用的request服務(wù)。

業(yè)務(wù)場(chǎng)景：

全局請(qǐng)求配置。

get,post,put,delete等請(qǐng)求的promise封裝。

全局請(qǐng)求狀態(tài)管理。

取消重復(fù)請(qǐng)求。

路由跳轉(zhuǎn)取消當(dāng)前頁(yè)面請(qǐng)求。

請(qǐng)求攜帶token，權(quán)限錯(cuò)誤統(tǒng)一管理。

默認(rèn)配置

定義全局的默認(rèn)配置

axios.defaults.timeout = 10000 //超時(shí)取消請(qǐng)求
axios.defaults.headers.post["Content-Type"] = "application/json;charset=UTF-8"
axios.defaults.baseURL = process.env.BASE_URL //掛載在process下的環(huán)境常量，在我另一篇文章有詳細(xì)說明

如何定義多環(huán)境常量

自定義配置（非常見業(yè)務(wù)場(chǎng)景，僅作介紹）

// 創(chuàng)建實(shí)例時(shí)設(shè)置配置的默認(rèn)值
var instance = axios.create({
  baseURL: "https://api.another.com"
});
// 在實(shí)例已創(chuàng)建后修改默認(rèn)值
instance.defaults.headers.common["Authorization"] = AUTH_TOKEN;

優(yōu)先級(jí)：自定義配置 > 默認(rèn)配置

請(qǐng)求及響應(yīng)攔截器

請(qǐng)求攔截器及取消重復(fù)請(qǐng)求

// 請(qǐng)求列表
const requestList = []
// 取消列表
const CancelToken = axios.CancelToken
let sources = {}
axios.interceptors.request.use((config) => {
  //將請(qǐng)求地址及參數(shù)作為一個(gè)完整的請(qǐng)求
  const request = JSON.stringify(config.url) + JSON.stringify(config.data)
  config.cancelToken = new CancelToken((cancel) => {
    sources[request] = cancel
  })
  //1.判斷請(qǐng)求是否已存在請(qǐng)求列表，避免重復(fù)請(qǐng)求，將當(dāng)前請(qǐng)求添加進(jìn)請(qǐng)求列表數(shù)組；
  if(requestList.includes(request)){
    sources[request]("取消重復(fù)請(qǐng)求")
  }else{
    requestList.push(request)
    //2.請(qǐng)求開始，改變loading狀態(tài)供加載動(dòng)畫使用
    store.dispatch("changeGlobalState", {loading: true})
  }
  //3.從store中獲取token并添加到請(qǐng)求頭供后端作權(quán)限校驗(yàn)
  const token = store.getters.userInfo.token
  if (token) {
    config.headers.token = token
  }
  return config
}, function (error) {
  return Promise.reject(error)
})

1.請(qǐng)求攔截器中將所有請(qǐng)求添加進(jìn)請(qǐng)求列表變量，為取消請(qǐng)求及l(fā)oading狀態(tài)管理做準(zhǔn)備；當(dāng)請(qǐng)求列表已存在當(dāng)前請(qǐng)求則不響應(yīng)該請(qǐng)求。
2.請(qǐng)求一旦開始，就可以開啟動(dòng)畫加載效果。
3.用戶登錄后可以在請(qǐng)求頭中攜帶token做權(quán)限校驗(yàn)使用。

響應(yīng)攔截器

axios.interceptors.response.use(function (response) {
  // 1.將當(dāng)前請(qǐng)求中請(qǐng)求列表中刪除
  const request = JSON.stringify(response.config.url) + JSON.stringify(response.config.data)
  requestList.splice(requestList.findIndex(item => item === request), 1)
  // 2.當(dāng)請(qǐng)求列表為空時(shí)，更改loading狀態(tài)
  if (requestList.length === 0) {
    store.dispatch("changeGlobalState", {loading: false})
  }
  // 3.統(tǒng)一處理權(quán)限認(rèn)證錯(cuò)誤管理
  if (response.data.code === 900401) {
    window.ELEMENT.Message.error("認(rèn)證失效，請(qǐng)重新登錄！", 1000)
    router.push("/login")
  }
  return response
}, function (error) {
  // 4.處理取消請(qǐng)求
  if (axios.isCancel(error)) {
    requestList.length = 0
    store.dispatch("changeGlobalState", {loading: false})
    throw new axios.Cancel("cancel request")
  } else {
    // 5.處理網(wǎng)絡(luò)請(qǐng)求失敗
    window.ELEMENT.Message.error("網(wǎng)絡(luò)請(qǐng)求失敗", 1000)
  }
  return Promise.reject(error)
})

1.響應(yīng)返回后將相應(yīng)的請(qǐng)求從請(qǐng)求列表中刪除
2.當(dāng)請(qǐng)求列表為空時(shí)，即所有請(qǐng)求結(jié)束，加載動(dòng)畫結(jié)束
3.權(quán)限認(rèn)證報(bào)錯(cuò)統(tǒng)一攔截處理
4.取消請(qǐng)求的處理需要結(jié)合其他代碼說明
5.由于項(xiàng)目后端并沒有采用RESTful風(fēng)格的接口請(qǐng)求，200以外都?xì)w為網(wǎng)絡(luò)請(qǐng)求失敗

promise封裝

const request = function (url, params, config, method) {
  return new Promise((resolve, reject) => {
    axios[method](url, params, Object.assign({}, config)).then(response => {
      resolve(response.data)
    }, err => {
      if (err.Cancel) {
        console.log(err)
      } else {
        reject(err)
      }
    }).catch(err => {
      reject(err)
    })
  })
}

const post = (url, params, config = {}) => {
  return request(url, params, config, "post")
}

const get = (url, params, config = {}) => {
  return request(url, params, config, "get")
}
//3.導(dǎo)出cancel token列表供全局路由守衛(wèi)使用
export {sources, post, get}

1.axios cancel token API
2.存入需要取消的請(qǐng)求列表導(dǎo)出給導(dǎo)航守衛(wèi)使用
3.路由發(fā)生變化的時(shí)候取消當(dāng)前頁(yè)面還沒有返回結(jié)果的請(qǐng)求，在復(fù)雜的頁(yè)面中請(qǐng)求可能會(huì)有很多個(gè)，增加取消請(qǐng)求的功能可以讓頁(yè)面切換的時(shí)候不卡頓。
/src/router.js

...
import { sources } from "../service/request"
...
router.beforeEach((to, from, next) => {
  document.title = to.meta.title || to.name
    //路由發(fā)生變化時(shí)取消當(dāng)前頁(yè)面網(wǎng)絡(luò)請(qǐng)求
  Object.keys(sources).forEach(item => {
    sources[item]("取消前頁(yè)面請(qǐng)求")
  })
  for (var key in sources) {
    delete sources[key]
  }
  next()
})

request.js完整代碼：


// 引入網(wǎng)絡(luò)請(qǐng)求庫(kù) https://github.com/axios/axios

import axios from "axios"
import store from "../store"
import router from "../router"

// 請(qǐng)求列表
const requestList = []
// 取消列表
const CancelToken = axios.CancelToken
let sources = {}

// axios.defaults.timeout = 10000
axios.defaults.headers.post["Content-Type"] = "application/json;charset=UTF-8"

axios.defaults.baseURL = process.env.BASE_URL

axios.interceptors.request.use((config) => {
  const request = JSON.stringify(config.url) + JSON.stringify(config.data)

  config.cancelToken = new CancelToken((cancel) => {
    sources[request] = cancel
  })

  if(requestList.includes(request)){
    sources[request]("取消重復(fù)請(qǐng)求")
  }else{
    requestList.push(request)
    store.dispatch("changeGlobalState", {loading: true})
  }

  const token = store.getters.userInfo.token
  if (token) {
    config.headers.token = token
  }

  return config
}, function (error) {
  return Promise.reject(error)
})

axios.interceptors.response.use(function (response) {
  const request = JSON.stringify(response.config.url) + JSON.stringify(response.config.data)
  requestList.splice(requestList.findIndex(item => item === request), 1)
  if (requestList.length === 0) {
    store.dispatch("changeGlobalState", {loading: false})
  }
  if (response.data.code === 900401) {
    window.ELEMENT.Message.error("認(rèn)證失效，請(qǐng)重新登錄！", 1000)
    router.push("/login")
  }
  return response
}, function (error) {
  if (axios.isCancel(error)) {
    requestList.length = 0
    store.dispatch("changeGlobalState", {loading: false})
    throw new axios.Cancel("cancel request")
  } else {
    window.ELEMENT.Message.error("網(wǎng)絡(luò)請(qǐng)求失敗", 1000)
  }
  return Promise.reject(error)
})

const request = function (url, params, config, method) {
  return new Promise((resolve, reject) => {
    axios[method](url, params, Object.assign({}, config)).then(response => {
      resolve(response.data)
    }, err => {
      if (err.Cancel) {
        console.log(err)
      } else {
        reject(err)
      }
    }).catch(err => {
      reject(err)
    })
  })
}

const post = (url, params, config = {}) => {
  return request(url, params, config, "post")
}

const get = (url, params, config = {}) => {
  return request(url, params, config, "get")
}

export {sources, post, get}

以上。

GPU云服務(wù)器云服務(wù)器視頻服務(wù)器的二次開發(fā) 二次封裝二次淺封裝實(shí)踐【附源碼】基于webrtc二次開發(fā)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/108504.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

JasinYip

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

【物聯(lián)網(wǎng)】10.物聯(lián)網(wǎng)數(shù)據(jù)庫(kù) - SQL

閱讀 967·2021-10-13 09:39
老薛主機(jī)：十三周年慶，搶紅包、大轉(zhuǎn)盤抽獎(jiǎng)，主機(jī)、VPS買兩年送一年，買三年送兩年

閱讀 3637·2021-09-26 10:16
關(guān)于瀏覽器緩存問題（圖片更換后，頁(yè)面仍優(yōu)先讀取緩存）

閱讀 2964·2019-08-30 15:54
event對(duì)象中offsetX,clientX,pageX,screenX的區(qū)別

閱讀 1115·2019-08-30 14:22
前端每日實(shí)戰(zhàn)：47# 視頻演示如何用純 CSS 創(chuàng)作一個(gè)蝴蝶標(biāo)本展示框

閱讀 2950·2019-08-29 15:39
淺析SAX,DOM,JAXP,JDOM與DOM4J之間的關(guān)系

閱讀 3354·2019-08-27 10:52
去除數(shù)組中任意多個(gè)值算法（JavaScript）

閱讀 864·2019-08-26 13:59
axios基于常見業(yè)務(wù)場(chǎng)景的二次封裝

閱讀 1838·2019-08-26 12:20

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

axios基于常見業(yè)務(wù)場(chǎng)景的二次封裝

相關(guān)文章