使用async和await对axios及接口进一步优化封装

原创已于 2022-08-18 12:04:53 修改 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2020-06-11 17:17:20 首次发布

本文探讨如何使用async和await优化axios接口的封装，以适应不同数据格式的需求。包括get、delete请求的处理，以及post、put请求的三种数据格式。通过在request拦截器中判断传参类型，并在response中进行数据拦截，实现更灵活的接口调用。同时，文章还提供了封装后的接口调用示例。

我们在使用axios进行请求时，会遇到不同的数据格式，或者说我们想处理获取数据的回调地域，而我们对于axios请求及接口封装的不够彻底的话，是无法满足以上需求的，所以，今天我们对axios进一步封装。

首先看一下请求接口时，后端需要的不同的数据格式：

1、get，delete请求（一种类型，不同点处理）

（1）、普通格式，及key1=vlaue，及正常的对象，这样我们只需要向后端传递普通对象即可。

（2）、包含数组，及key1=value&ids=1(arr[0])&&ids=2(arr[0])，这样的数据格式普通传参无法满足，稍后看下对这块的处理

2、post、put请求（三种数据格式）

（1）、上传格式，一般类型为formData数据格式，

（2）、json格式，请求体为对象，后端接收object

（3）、默认格式，为key1=value1 key2=value2方式，为formData数据格式，

为了解决以上格式，我们进一步对axios进行封装。引入及请求时头部信息

import axios from 'axios';
import qs from 'qs';
// Http 请求客户端
const httpClient = axios.create({
  timeout: 60000,  //设置请求超时时间
  baseURL:  process.env.NODE_ENV === 'production' ? '正式地址/' : '/本地地址', //请求默认地址
});
// 请求拦截器
httpClient.interceptors.request.use(request => { //请求拦截
  let param = {};
  if (window.location.href.indexOf('?') !== -1) {
    request.headers.urlAddress = window.location.href.split('?')[0]; //获取url地址？前面的地址
  } else {
    request.headers.urlAddress = window.location.href
  }

我们在request拦截器中对不同请求方式判断传参：

if (
    request.data !== undefined &&
    !(
      //请求体是否为他的一个实例
      request.data instanceof FormData ||
      request.data instanceof URLSearchParams //处理 URL 的查询字符串。
    )
  ) {
    request.data = Object.assign({}, param, request.data);  //将两个对象合并为一个新对象
    if (
      request.headers['Content-Type'] === 'application/x-www-form-urlencoded;charset=UTF-8' //默认使用这种格式传参 key1=value1 key2=value2
    ) {
      request.data = qs.stringify(request.data)
    }
    if (
      request.headers['Content-Type'] === 'multipart/form-data' //上传文件用这种格式
    ) {
      const formData = new FormData();
      Object.keys(request.data).forEach((key) => {
        formData.append(key, request.data[key]);
      });
      request.data = formData
    }
  } else {
    if (request.params) {
      request.params = Object.assign({}, param, request.params);
      for (let key in request.params) {
        if (Array.isArray(request.params[key])) { //判断是否为数组
          request.paramsSerializer = (params) => { //向后端传递的value值包含数组 ，形式转换为url?key=数组下标1&key=数组下标1
            return qs.stringify(params, { arrayFormat: 'repeat' });
          };
        }
      }
    }
  }
  const TOKEN = sessionStorage.getItem('TOKEN');
  if (
    TOKEN !== '' && TOKEN !== null
  ) {
    request.headers.token = TOKEN
  }
  return request
});

针对response进行数据拦截

// 响应拦截器
httpClient.interceptors.response.use(response => {
  // 判断响应的 code 码是否正常
  const responseData = response.data;
  if (responseData.code) {
    if (
      ['200', 200, '0'].includes( responseData.code ) //判断后端的code是否存在在数组中，成功
    ) {
      return Promise.resolve(responseData.data)
    } else {
      if (responseData.msg !== '响应失败') {
        window.vm.$toast.failed(responseData.msg, 1500);
      }
      return Promise.resolve(responseData.data)
    }
  }
  const err = new Error(responseData.msg || response.statusText);
  err.errorCode = responseData.code;
  return Promise.reject(err)//处理失败
});

接口封装及调用

import APIClientService from '@A/clientService/apiService';
import {alipay} from "../resource/https";
const aa = {
  async getAreaListasync(params){ //查询小区列表
    return await APIClientService.REQUESTPOST(alipay.selectAreaList, params);
  }
};
export default aa

【推荐】

前端共享博客 http://sharedblog.cn/

网站建站知识网站建设-Q站资源网

内容分享卡酷中介助手