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

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› JavaScript›JavaScript编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

前言

最近在构建项目时，想到了请求的封装，之后就琢磨如何封装才好。虽然对各位大佬来说可能是个小事情，但对我来说也算是一个小小的挑战。在我设想中请求的一些基本配置与具体接口应该放于两个文件，因此我新建了两个文件 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进行特定的处理即可。