axios的簡單封裝以及使用實例代碼

更新時間：2021年06月30日 10:51:40 作者：千拾

一般我們在做一個大型項目的時候,需要用到很多接口時,我們?yōu)榱朔奖闶褂?就把接口封裝起來,這篇文章主要給大家介紹了關于axios簡單封裝以及使用的相關資料,需要的朋友可以參考下

前言

最近在構建項目時，想到了請求的封裝，之后就琢磨如何封裝才好。雖然對各位大佬來說可能是個小事情，但對我來說也算是一個小小的挑戰(zhàn)。在我設想中請求的一些基本配置與具體接口應該放于兩個文件，因此我新建了兩個文件 axios.js與api.js

axios.js

axios.js主要是針對axios的一些基本配置： baseURL 請求攔截器響應攔截器等等

import axios from 'axios';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from '../router';

首先在當前js中引入axios，引入element是為了在當前js內可以使用其組件，目的是為了在響應攔截器中對各種返回值進行直接提示。引入router的為了在響應攔截器中根據(jù)具體返回值來進行頁面跳轉，比如沒有權限則跳轉到登錄頁面

if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = 'api';
} else if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = 'https://xxxxxxxxxx/index/';
}

對于baseURL的處理，我區(qū)分了開發(fā)環(huán)境與生產環(huán)境

//請求攔截器 區(qū)分了一下正常請求時與發(fā)送formdata時的請求頭
axios.interceptors.request.use((config) => {
  config.headers['Content-Type'] = 'application/json';
  if (config.method === 'post') {
    //FormData時的請求頭
    if (Object.prototype.toString.call(config.data) === '[object FormData]') {
      // 請求攔截器處理
      config.headers['Content-Type'] = 'multipart/form-data';
    } else if (Object.prototype.toString.call(config.data) === '[object String]') {
      config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
    }
  } else {
    config.headers['Content-Type'] = 'application/json';
  }
  return config;
});

//響應攔截器
axios.interceptors.response.use(
  (config) => {
    let value = config.data;
    if (config.status && config.status === 200) {
      if (typeof value === 'string') {
        if (value === 'timeout') {
          ElementUI.MessageBox.confirm('太長時間沒有操作或操作沒有權限，請進入登錄頁面重新登錄?', '提示', {
            confirmButtonText: '確定',
            type: 'warning'
          }).then(() => {
            router.push({ name: 'login' });
          });
        }else {
          ElementUI.Message.info(value);
        }
      }
    }
    return config;
  },
  (err) => {
    let value = err.response.statusText;
    switch (err.response.status) {
      case 400:
        ElementUI.Message.error('語法格式有誤，服務器無法理解此請求')
        break;
      case 401:
      case 403:
      case 404:
      case 405:
        ElementUI.Message.warning(value);
        break;
      default:
        ElementUI.Message.error('操作過程出錯，此次操作無效！' + value);
        break;
    }
    return err.response
  }
);

對于響應攔截器，我這邊是根據(jù)自己后端返回的值來處理，因為沒怎么弄過后端所以只是對返回簡單處理了一下

下面是對get與post的一個封裝

export async function axiosGet(url, params = {}) {
  let res = await axios.get(url, { params: params });
  if(res.status === 200){
    return res.data
  }else {
    throw res.statusText
  }
}

export async function axiosPost(url, params = {}) {
  let res = await axios.post(url, params);
  if(res.status === 200){
    return res.data
  }else {
    throw res.statusText
  }
}

使用async與await 直接取到返回值進行判斷，如果返回成功則輸出返回值如果不成功則拋出錯誤

最后將封裝的方法導出

api.js

整個api.js是項目內所有接口存放的地方

import { axiosGet,axiosPost } from './axios'

引入axios.js，獲取到封裝的axiosGet與axiosPost

export default {
  getLogin:(params = {}) => {
    return axiosPost('/login', params)
  },
  getUser:(params = {}) => {
    return axiosGet('http://localhost:3000/user', params)
  }
}

這里我使用簡單的兩個接口來做示例，在api.js中的處理就已經(jīng)完成了

使用配置好的接口

到這里我們的axios已經(jīng)封裝完畢，接下來就是使用的演示了

import DbauditServer from '@/server/api'
//在要調用接口的文件中引入api.js

let formData = new FormData
formData.append('password', this.formLabelAlign.password)
let res1 = await DbauditServer.getLogin(formData) //直接調用就可以正常使用了
let res2 = await DbauditServer.getUser()

當然還可以細致一些，因為之前封裝get與post的時候遇到錯誤返回值是直接拋出，因此，接口的調用也可以使用try catch來包裹，對error進行特定的處理即可。