四个文件一篇文，一个工具一框架， 工具：axios 框架：vue为例

四个文件

  1. └─src               
  2.     ├─services          // 目录
  3.     ├─  api.js          // api管理
  4.     ├─  axios.js         // axios请求
  5.     ├─  fetch.js         // 二次封装
  6.     ├─  request.js         // 请求方式管理
  7. 复制代码
  • api.js 存放所有的接口请求
  • axios.js 请求拦截处理
  • fetch.js 对axios请求的二次封装

  • request.js管理请求方式get post put delete…

    axios.js

    1. import axios from 'axios'
    2. import { getToken } from '@/utils/token'
    3. // axios baseURL 
    4. axios.defaults.baseURL = process.env.VUE_APP_BASE_API
    5. const instance = axios.create({
    6. baseURL: process.env.VUE_APP_BASE_API,    // 实例 baseURL
    7. timeout: 6000
    8. })
    9. instance.interceptors.request.use(config => {
    10. const token = getToken()
    11. token && (config.headers['X-Access-Token'] = token)
    13. return config
    14. }, err => {
    15. return Promise.reject(err)
    16. })
    17. instance.interceptors.response.use(res => {
    18. /* 错误处理 */
    19. // ......
    20. return res
    21. }, err => {
    22. return Promise.reject(err)
    23. })
    24. export default instance

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

    之前

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

    现在

    👇

    fetch.js

    稍作处理下

  1. /**
  2.  * fetchData
  3.  * @param {String} url 请求地址
  4.  * @param {String} method 请求方式
  5.  * @param {Object} data 请求参数
  6.  * @returns res.data
  7.  */
  8. import http from './axios'
  9. import Qs from 'qs'
  10. export const fetchData = async (url, method, data = null) => {
  11.   let httpOpts = { url, method }
  12.   httpOpts = method === 'get' ? { 
  13.     ...httpOpts, 
  14.     params: data,
  15.     paramsSerializer: params => Qs.stringify(params, { indices: false })  // 序列化 处理数组
  16.   } : { ...httpOpts, data }
  17.   try {
  18.     const res = await http(httpOpts)
  19.     return res.data
  20.   } catch (error) {
  21.     return null
  22.   }
  24.   // 使用 .then .catch 情况
  25.   // return http(httpOpts).then(res => {
  26.     // return res.data
  27.   // }).catch(err => {
  28.     // return null
  29.   // })
  30. }
  31. 复制代码

目前仅对get和post请求做了处理，可以根据实际情况来添加其他请求方式put delete 对于get请求在这做了数组类型参数序列化的处理
众所周知axios请求成功返回的结果中我们所需要的数据在data中，所以我们在这直接返回res.data，再或者在axios的响应拦截器中返回res.data

request.js

在fetch.js中既然区分开了get和post请求，那么…

  1. /**
  2.  * 请求方式
  3.  * @param url 请求接口路径
  4.  * @param data 请求参数
  5.  * @method getRequest get请求
  6.  * @method postRequest post请求
  7.  */
  8. import { fetchData } from './fetch'
  9. export const getRequest = (url, data) => fetchData(url, 'get', data)   // get请求
  10. export const postRequest = (url, data) => fetchData(url, 'post', data) // post请求
  11. // export const putRequest = (url, data) => fetchData(url, 'put', data)   // put请求
  12. // export const deleteRequest = (url, data) => fetchData(url, 'delete', data) // delete请求
  13. 复制代码

我们定义了getRequest和postRequest方法，这两个方法都接收两个参数，分别为url和data，返回一个函数，就是在fetch.js中定义的fetchData，把接收的两个参数传给fetchData

api.js

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

  1. /**
  2.  * 所有接口请求
  3.  */
  4. import { getRequest, postRequest } from './request'
  5. /* 登录注册 */
  6. export const login = data => postRequest('/login', data)
  7. export const register = data => postRequest('/register', data)
  8. // export const xxx = data => deleteRequest('/xxx', data)
  9. // export const xxx = data => putRequest('/xxx', data)
  10. /* 文章接口 */
  11. export const articleList = data => getRequest('/article/list', data)
  12. ......
  13. 复制代码

使用

  1. import { articleList } from '@/services/api'
  2. async getArticleList() {
  3.   const res = await articleList(params)
  4. }
  5. 复制代码

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

整体流程

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