axios的簡(jiǎn)單封裝以及使用實(shí)例代碼

前言

最近在構建項目時(shí)，想到了請求的封裝，之后就琢磨如何封裝才好。雖然對各位大佬來(lái)說(shuō)可能是個(gè)小事情，但對我來(lái)說(shuō)也算是一個(gè)小小的挑戰。在我設想中請求的一些基本配置與具體接口應該放于兩個(gè)文件，因此我新建了兩個(gè)文件 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內可以使用其組件，目的是為了在響應攔截器中對各種返回值進(jìn)行直接提示。引入router的為了在響應攔截器中根據具體返回值來(lái)進(jìn)行頁(yè)面跳轉，比如沒(méi)有權限則跳轉到登錄頁(yè)面

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

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

//請求攔截器 區分了一下正常請求時(shí)與發(fā)送formdata時(shí)的請求頭
axios.interceptors.request.use((config) => {
  config.headers['Content-Type'] = 'application/json';
  if (config.method === 'post') {
    //FormData時(shí)的請求頭
    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('太長(cháng)時(shí)間沒(méi)有操作或操作沒(méi)有權限，請進(jìn)入登錄頁(yè)面重新登錄?', '提示', {
            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('語(yǔ)法格式有誤，服務(wù)器無(wú)法理解此請求')
        break;
      case 401:
      case 403:
      case 404:
      case 405:
        ElementUI.Message.warning(value);
        break;
      default:
        ElementUI.Message.error('操作過(guò)程出錯，此次操作無(wú)效！' + value);
        break;
    }
    return err.response
  }
);

對于響應攔截器，我這邊是根據自己后端返回的值來(lái)處理，因為沒(méi)怎么弄過(guò)后端所以只是對返回簡(jiǎn)單處理了一下

下面是對get與post的一個(gè)封裝

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 直接取到返回值進(jìn)行判斷，如果返回成功則輸出返回值 如果不成功則拋出錯誤

最后將封裝的方法導出

api.js

整個(gè)api.js是項目?jì)人薪涌诖娣诺牡胤?/p>

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)
  }
}

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

使用配置好的接口

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

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的時(shí)候遇到錯誤返回值是直接拋出，因此，接口的調用也可以使用try catch來(lái)包裹，對error進(jìn)行特定的處理即可。

總結

到此這篇關(guān)于axios的簡(jiǎn)單封裝以及使用的文章就介紹到這了,更多相關(guān)axios簡(jiǎn)單封裝內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！