超实用的请求处理方式

四个文件一篇文,一个工具一框架, 工具:axios框架:vue为例

四个文件

└─src               
    ├─services          // 目录
    ├─  api.js          // api管理
    ├─  axios.js         // axios请求
    ├─  fetch.js         // 二次封装
    ├─  request.js         // 请求方式管理
  • api.js存放所有的接口请求
  • axios.js请求拦截处理
  • fetch.jsaxios请求的二次封装
  • request.js管理请求方式getpostputdelete...

axios.js

import axios from 'axios'
import { getToken } from '@/utils/token'

// axios baseURL 
axios.defaults.baseURL = process.env.VUE_APP_BASE_API

const instance = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,    // 实例 baseURL
  timeout: 6000
})

instance.interceptors.request.use(config => {
  const token = getToken()
  token && (config.headers['X-Access-Token'] = token)

  return config
}, err => {
  return Promise.reject(err)
})

instance.interceptors.response.use(res => {
  /* 错误处理 */
  // ......

  return res
}, err => {
  return Promise.reject(err)
})

export default instance

创建一个axios实例,定义baseURL,也可以使用process.env.NODE_ENV来做开发环境和生产环境的判断

之前

每个有请求的文件中import axios from 'axios',或者 Vue.prototype.$axios = axios,使用时$axios.get(url, params)

现在

👇

fetch.js

稍作处理下

/**
 * fetchData
 * @param {String} url 请求地址
 * @param {String} method 请求方式
 * @param {Object} data 请求参数
 * @returns res.data
 */

import http from './axios'
import Qs from 'qs'

export const fetchData = async (url, method, data = null) => {
  let httpOpts = { url, method }
  httpOpts = method === 'get' ? { 
    ...httpOpts, 
    params: data,
    paramsSerializer: params => Qs.stringify(params, { indices: false })  // 序列化 处理数组
  } : { ...httpOpts, data }

  try {
    const res = await http(httpOpts)
    return res.data
  } catch (error) {
    return null
  }

  // 使用 .then .catch 情况
  // return http(httpOpts).then(res => {
    // return res.data
  // }).catch(err => {
    // return null
  // })
}

目前仅对getpost请求做了处理,可以根据实际情况来添加其他请求方式putdelete对于get请求在这做了数组类型参数序列化的处理

众所周知axios请求成功返回的结果中我们所需要的数据在data中,所以我们在这直接返回res.data,再或者在axios的响应拦截器中返回res.data

request.js

fetch.js中既然区分开了getpost请求,那么...

/**
 * 请求方式
 * @param url 请求接口路径
 * @param data 请求参数
 * @method getRequest get请求
 * @method postRequest post请求
 */

import { fetchData } from './fetch'

export const getRequest = (url, data) => fetchData(url, 'get', data)   // get请求
export const postRequest = (url, data) => fetchData(url, 'post', data) // post请求

// export const putRequest = (url, data) => fetchData(url, 'put', data)   // put请求
// export const deleteRequest = (url, data) => fetchData(url, 'delete', data) // delete请求

我们定义了getRequestpostRequest方法,这两个方法都接收两个参数,分别为urldata,返回一个函数,就是在fetch.js中定义的fetchData,把接收的两个参数传给fetchData

api.js

最后到了请求接口环节,将所有接口统一放在api.js中管理 request.js中的urldata来自于这

/**
 * 所有接口请求
 */

import { getRequest, postRequest } from './request'

/* 登录注册 */
export const login = data => postRequest('/login', data)
export const register = data => postRequest('/register', data)

// export const xxx = data => deleteRequest('/xxx', data)
// export const xxx = data => putRequest('/xxx', data)

/* 文章接口 */
export const articleList = data => getRequest('/article/list', data)

......

使用

import { articleList } from '@/services/api'

async getArticleList() {
  const res = await articleList(params)
}

现在在组件中我们只关心接口所需要传递的参数,不再需要写请求路径以及请求方式,这些全部交给上面4个文件处理

整体流程

  1. 创建axios实例
  2. 根据请求方式,对请求稍作处理,并将请求结果返回
  3. 定义不同请求方式的方法
  4. 请求地址和方式不再在组件中书写,统一在一个文件中管理
  5. 组件中导入要使用的方法即可,只需关心参数,不再关心其他
原文链接:juejin.im

上一篇:面试专题总结:手撕代码
下一篇:免费在线恋爱纪念日、结婚纪念日计算器

相关推荐

  • 页面间通信--使用storage事件保持多tab页共享轮询请求的数据

    业务场景 最近接到一个优化需求,某页面会轮询请求两个接口获取未读消息的数量,但是当用户同时在多个tab打开了页面的话,这些页面都会进行轮询请求,有用户打开tab页太多,1分钟请求了几千次,触发了风控,...

    1 个月前
  • 音频处理之音频文件拼接录音及裁剪

    这篇博客是我在开发一个“音频文件拼接录音及裁剪”功能过程中的笔记,因为学习到了很多没接触过的内容,所以在这里做个记录,这不是个教程贴,文中不涉及业务代码,只有一小部分核心代码用来解释我描述的内容而已...

    6 个月前
  • 音频处理之变音变调

    前一阵子一直在做CodeasilyX这个项目的音频处理的工作,由于对音频信号处理方面的技术欠缺,花了大量的时间在这个项目核心功能无关的音频功能上,但收获很多,学习到了很多音频处理的技术实现,所以在这...

    6 个月前
  • 音频可视化中的信号处理方案

    声明: 原创文章,未经允许不得转载。 音频可视化是一个“听”起来非常“美”好的话题,其复杂程度很大程度上依赖视觉方案(一些例子(https://github.com/willianjusten/a...

    1 年前
  • 面试官:来,给本官讲讲前端页面性能优化及错误处理有哪些?(看你懵不懵)

    题目:提升页面性能的方法有哪些? 1. 资源压缩合并,减少HTTP请求 2. 非核心代码异步加载异步加载方式 异步加载区别 3. 利用浏览器缓存 缓存的分类 缓存原理 4. 使用CD...

    2 年前
  • 非ajax jQuery POST请求

    amit(https://stackoverflow.com/users/107922/amit)提出了一个问题:nonAJAX jquery POST request,或许与您遇到的问题类似。

    2 年前
  • 雪碧图生成以及配合预处理样式的使用

    生成雪碧图的代码 本文的样式预处理使用的是stylus 如果须要用到其它类型的预处理器,可对下面的代码进行修改 如果想对雪碧图的生成原理及参数有更深入的了解请移步 这段代码会在指定位...

    2 年前
  • 难道不是愚蠢的;一个小的图标,还需要一个HTTP请求?如何使图标进入雪碧吗?

    YahelSam(https://stackoverflow.com/users/172322/yahel)提出了一个问题:Isn't it silly that a tiny favicon req...

    2 年前
  • 防止重复发送 Ajax 请求

    要考虑并理解 success, complete, error, timeout 这些事件的区别,并注册正确的事件,一旦失误,功能将不再可用; 不可避免地比普通流程要要多注册一个 complete ...

    3 年前
  • 防抖动处理和节流 小技巧

    1. 简单的防抖动处理,一秒内点击一次 2. 向服务器请求数据 点击按钮向后台请求数据 优化点: 另外一些防抖动的小技巧,请参考: http://blog.csdn.net/crys...

    2 年前

官方社区

扫码加入 JavaScript 社区