axios的简单封装以及使用实例代码

前言

最近在构建项目时，想到了请求的封装，之后就琢磨如何封装才好。虽然对各位大佬来说可能是个小事情，但对我来说也算是一个小小的挑战。在我设想中请求的一些基本配置与具体接口应该放于两个文件，因此我新建了两个文件 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的为了在响应拦截器中根据具体返回值来进行页面跳转，比如没有权限则跳转到登录页面

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

对于baseURL的处理，我区分了开发环境与生产环境

//请求拦截器 区分了一下正常请求时与发送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
  }
);

对于响应拦截器，我这边是根据自己后端返回的值来处理，因为没怎么弄过后端所以只是对返回简单处理了一下

下面是对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中的处理就已经完成了

使用配置好的接口

到这里我们的axios已经封装完毕，接下来就是使用的演示了

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进行特定的处理即可。

总结

到此这篇关于axios的简单封装以及使用的文章就介绍到这了,更多相关axios简单封装内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！