亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue日常開發(fā)基礎(chǔ)Axios網(wǎng)絡(luò)庫封裝

 更新時(shí)間:2022年08月19日 09:03:19   作者:云邊劉十三  
這篇文章主要為大家介紹了vue日常開發(fā)基礎(chǔ)Axios網(wǎng)絡(luò)庫封裝示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

引言

首先Axios,一個(gè)基于 promise 的 HTTP 庫,可以用在瀏覽器和 node.js 中。

網(wǎng)絡(luò)請(qǐng)求庫無疑是項(xiàng)目開發(fā)中最基礎(chǔ)的建設(shè)了,在這個(gè)前后端分離的時(shí)代,市面上有不少優(yōu)秀的請(qǐng)求庫,其中Axios就是優(yōu)秀代表之一。

  • 攔截請(qǐng)求和響應(yīng)
  • 轉(zhuǎn)換請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù)
  • 自動(dòng)轉(zhuǎn)換 JSON 數(shù)據(jù)
  • 客戶端支持防御 XSRF
  • 支持 PromiseAPI

以上是axios的優(yōu)秀點(diǎn)

axios使用

本文是基于Vue項(xiàng)目去使用Axios:

第一步安裝 npm install axios 已經(jīng)邁出了一步,打開我們的package.json文件發(fā)現(xiàn)已經(jīng)安裝成功,

接下來我們?nèi)ゾ唧w實(shí)現(xiàn)功能:

1.配置請(qǐng)求基本信息

2.設(shè)置請(qǐng)求攔截器

3.設(shè)置請(qǐng)求響應(yīng)器

實(shí)現(xiàn)以上三個(gè)方法

配置請(qǐng)求基本信息

//request.js
import axios from 'axios'
// 創(chuàng)建axios實(shí)例
const service = axios.create({
  // axios中請(qǐng)求配置有baseURL選項(xiàng),表示請(qǐng)求URL公共部分
  baseURL: process.env.VUE_APP_BASE_API,
  // 超時(shí)
  timeout: 20000
})

設(shè)置請(qǐng)求攔截器

在發(fā)送請(qǐng)求之前我們總得做一些事情:

  • 是否需要token(如需要的話將每個(gè)請(qǐng)求攜帶token)
  • 如果是get需要傳遞參數(shù)的話需要將特殊字符過濾掉
// request攔截器
service.interceptors.request.use(
  config => {
    // 是否需要設(shè)置 token
    const isToken = (config.headers || {}).isToken === false
    if (getToken() && !isToken) {
      config.headers['Authorization'] = 'Bearer ' + getToken() // 讓每個(gè)請(qǐng)求攜帶自定義token 請(qǐng)根據(jù)實(shí)際情況自行修改
    }
    // get請(qǐng)求映射params參數(shù)
    if (config.method === 'get' && config.params) {
      let url = config.url + '?'
      for (const propName of Object.keys(config.params)) {
        const value = config.params[propName]
        var part = encodeURIComponent(propName) + '='
        if (value !== null && typeof value !== 'undefined' && value !== '') {
          if (typeof value === 'object') {
            for (const key of Object.keys(value)) {
              let params = propName
              // let params = propName + '[' + key + ']'
              var subPart = encodeURIComponent(params) + '='
              url += subPart + encodeURIComponent(value[key]) + '&'
            }
          } else {
            url += part + encodeURIComponent(value) + '&'
          }
        }
      }
      url = url.slice(0, -1)
      config.params = {}
      config.url = url
    }
    return config
  },
  error => {
    console.log(error)
    Promise.reject(error)
  }
)

補(bǔ)充:

encodeURIComponent方法是js提供的一個(gè)方法,把字符串作為 URI 組件進(jìn)行編碼,該方法不會(huì)對(duì) ASCII 字母和數(shù)字進(jìn)行編碼,主要作用是過濾掉特殊字符

設(shè)置請(qǐng)求響應(yīng)器

當(dāng)數(shù)據(jù)回來的時(shí)候,我們也得干一點(diǎn)事情:

  • 判斷登錄狀態(tài)
  • 錯(cuò)誤處理
import { Message, MessageBox, Notification } from 'element-ui'
import errorCode from '@/utils/errorCode'
// 響應(yīng)攔截器
service.interceptors.response.use(
  res => {
    // 未設(shè)置狀態(tài)碼則默認(rèn)成功狀態(tài)
    const code = Number(res.data.code) || 200
    // 獲取錯(cuò)誤信息
    const msg = errorCode[code] || res.data.msg || errorCode['default']
    if (code === 401) {
      MessageBox.confirm(
        '登錄狀態(tài)已過期,您可以繼續(xù)留在該頁面,或者重新登錄',
        '系統(tǒng)提示',
        {
          confirmButtonText: '重新登錄',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        store.dispatch('LogOut').then(() => {
          location.href = '/index'
        })
      })
    } else if (code === 500) {
      Message({
        message: msg,
        type: 'error'
      })
      return Promise.reject(new Error(msg))
    } else if (code !== 200) {
      Notification.error({
        title: msg
      })
      return Promise.reject(msg)
    } else {
      return res.data
    }
  },
  error => {
    console.log('err' + error)
    let { message } = error
    if (message == 'Network Error') {
      message = '后端接口連接異常'
    } else if (message.includes('timeout')) {
      message = '系統(tǒng)接口請(qǐng)求超時(shí)'
    } else if (message.includes('Request failed with status code')) {
      message = '系統(tǒng)接口' + message.substr(message.length - 3) + '異常'
    }
    Message({
      message: message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)
export default {
  '401': '認(rèn)證失敗,無法訪問系統(tǒng)資源',
  '403': '當(dāng)前操作沒有權(quán)限',
  '404': '訪問資源不存在',
  'default': '系統(tǒng)未知錯(cuò)誤,請(qǐng)反饋給管理員'
}

項(xiàng)目中使用

import request from '@/utils/request'
// 登錄方法
export function login(username, password, code, uuid) {
  return request({
    url: '/auth/admin/login',
    method: 'post',
    data: { username, password, code, uuid }
  })
}

結(jié)尾

此時(shí)我們的網(wǎng)絡(luò)庫的基礎(chǔ)版已經(jīng)實(shí)現(xiàn),把service進(jìn)行一個(gè)導(dǎo)出,就可以在項(xiàng)目中使用了,這個(gè)版本基本可以滿足日常項(xiàng)目的開發(fā),如果需要其他設(shè)置可以另行添加。 擴(kuò)展:

  • axios取消重復(fù)請(qǐng)求
  • axios無感token刷新

以上也是比較常見的場(chǎng)景,在本文注重實(shí)現(xiàn)基礎(chǔ)版網(wǎng)絡(luò)庫,日后需要對(duì)以上的場(chǎng)景進(jìn)行探索。完結(jié)撒花~??

export default service

以上就是vue日常開發(fā)基礎(chǔ)Axios網(wǎng)絡(luò)庫封裝的詳細(xì)內(nèi)容,更多關(guān)于vue開發(fā)Axios網(wǎng)絡(luò)庫封裝的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • vue基礎(chǔ)語法之插值表達(dá)式詳解

    vue基礎(chǔ)語法之插值表達(dá)式詳解

    這篇文章主要為大家詳細(xì)介紹了vue基礎(chǔ)語法之插值表達(dá)式,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2022-01-01
  • Vue基于el-breadcrumb實(shí)現(xiàn)面包屑功能(操作代碼)

    Vue基于el-breadcrumb實(shí)現(xiàn)面包屑功能(操作代碼)

    這篇文章主要介紹了Vue基于el-breadcrumb實(shí)現(xiàn)面包屑功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-09-09
  • Vue項(xiàng)目打包成exe可執(zhí)行文件的實(shí)現(xiàn)過程(無瑕疵,完美版)

    Vue項(xiàng)目打包成exe可執(zhí)行文件的實(shí)現(xiàn)過程(無瑕疵,完美版)

    突然接到公司需求,說客戶想讓我們把項(xiàng)目直接打包,所以下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包成exe可執(zhí)行文件的實(shí)現(xiàn)過程,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
    2022-11-11
  • Vue3和Vue2的slot-scope插槽用法解讀

    Vue3和Vue2的slot-scope插槽用法解讀

    這篇文章主要介紹了Vue3和Vue2的slot-scope插槽用法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • vue中的v-touch事件用法說明

    vue中的v-touch事件用法說明

    這篇文章主要介紹了vue中的v-touch事件用法說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-03-03
  • vue keep-alive中的生命周期解讀

    vue keep-alive中的生命周期解讀

    這篇文章主要介紹了vue keep-alive中的生命周期,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • Vite配置代理Proxy解決跨域問題小結(jié)

    Vite配置代理Proxy解決跨域問題小結(jié)

    我們?cè)谧鲰?xiàng)目的時(shí)候經(jīng)常會(huì)遇到跨域的問題,下面這篇文章主要給大家介紹了關(guān)于Vite配置代理Proxy解決跨域問題的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-03-03
  • Pinia.js狀態(tài)管理器上手使用指南

    Pinia.js狀態(tài)管理器上手使用指南

    這篇文章主要為大家介紹了Pinia.js狀態(tài)管理器上手使用指南,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-07-07
  • 使用VitePress搭建及部署vue組件庫文檔的示例詳解

    使用VitePress搭建及部署vue組件庫文檔的示例詳解

    這篇文章主要介紹了使用VitePress搭建及部署vue組件庫文檔,本文以element-plus作為示例來搭建一個(gè)文檔,結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2022-08-08
  • Vue?echarts實(shí)例項(xiàng)目商家銷量統(tǒng)計(jì)圖實(shí)現(xiàn)詳解

    Vue?echarts實(shí)例項(xiàng)目商家銷量統(tǒng)計(jì)圖實(shí)現(xiàn)詳解

    Echarts,它是一個(gè)與框架無關(guān)的?JS?圖表庫,但是它基于Js,這樣很多框架都能使用它,例如Vue,估計(jì)IONIC也能用,因?yàn)槲业牧?xí)慣,每次新嘗試做一個(gè)功能的時(shí)候,總要新創(chuàng)建個(gè)小項(xiàng)目,做做Demo
    2022-09-09

最新評(píng)論