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

更新時間：2022年08月19日 09:03:19 作者：云邊劉十三

這篇文章主要為大家介紹了vue日常開發(fā)基礎(chǔ)Axios網(wǎng)絡(luò)庫封裝示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

引言

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

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

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

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

axios使用

本文是基于Vue項目去使用Axios:

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

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

1.配置請求基本信息

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

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

實現(xiàn)以上三個方法

配置請求基本信息

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

設(shè)置請求攔截器

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

是否需要token（如需要的話將每個請求攜帶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() // 讓每個請求攜帶自定義token 請根據(jù)實際情況自行修改
    }
    // get請求映射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)
  }
)

補充：

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

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

當數(shù)據(jù)回來的時候，我們也得干一點事情：

判斷登錄狀態(tài)
錯誤處理

import { Message, MessageBox, Notification } from 'element-ui'
import errorCode from '@/utils/errorCode'
// 響應(yīng)攔截器
service.interceptors.response.use(
  res => {
    // 未設(shè)置狀態(tài)碼則默認成功狀態(tài)
    const code = Number(res.data.code) || 200
    // 獲取錯誤信息
    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)接口請求超時'
    } 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': '認證失敗，無法訪問系統(tǒng)資源',
  '403': '當前操作沒有權(quán)限',
  '404': '訪問資源不存在',
  'default': '系統(tǒ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 }
  })
}