欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2021年06月30日 10:51:40   作者:千拾  
一般我們在做一個大型項目的時候,需要用到很多接口時,我們?yōu)榱朔奖闶褂?就把接口封裝起來,這篇文章主要給大家介紹了關(guān)于axios簡單封裝以及使用的相關(guān)資料,需要的朋友可以參考下

前言

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

axios.js

axios.js主要是針對axios的一些基本配置: baseURL  請求攔截器  響應(yīng)攔截器 等等

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

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

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)境與生產(chǎ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;
});

//響應(yīng)攔截器
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('太長時間沒有操作或操作沒有權(quán)限,請進(jìn)入登錄頁面重新登錄?', '提示', {
            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('語法格式有誤,服務(wù)器無法理解此請求')
        break;
      case 401:
      case 403:
      case 404:
      case 405:
        ElementUI.Message.warning(value);
        break;
      default:
        ElementUI.Message.error('操作過程出錯,此次操作無效!' + value);
        break;
    }
    return err.response
  }
);

對于響應(yīng)攔截器,我這邊是根據(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 直接取到返回值進(jìn)行判斷,如果返回成功則輸出返回值 如果不成功則拋出錯誤

最后將封裝的方法導(dǎo)出

api.js

整個api.js是項目內(nèi)所有接口存放的地方

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'
//在要調(diào)用接口的文件中引入api.js

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

當(dāng)然還可以細(xì)致一些,因為之前封裝get與post的時候遇到錯誤返回值是直接拋出,因此,接口的調(diào)用也可以使用try catch來包裹,對error進(jìn)行特定的處理即可。

總結(jié)

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

相關(guān)文章

最新評論