讓HTTP請求來的更清晰明瞭些吧

四個文件一篇文，一個工具一框架
工具： axios
框架： vue爲例

四個文件

└─src               
    ├─services          // 目錄
    ├─  api.js          // api管理
    ├─  axios.js         // axios請求
    ├─  fetch.js         // 二次封裝
    ├─  request.js         // 請求方式管理

• api.js 存放全部的接口請求
• axios.js 請求攔截處理
• fetch.js 對axios請求的二次封裝
• request.js 管理請求方式get post put delete...

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
  // })
}

目前僅對get和post請求作了處理，能夠根據實際狀況來添加其餘請求方式put delete
對於get請求在這作了數組類型參數序列化的處理

衆所周知axios請求成功返回的結果中咱們所須要的數據在data中，因此咱們在這直接返回res.data，再或者在axios的響應攔截器中返回res.data

request.js

在 fetch.js中既然區分開了 get和 post請求，那麼...

/**
 * 請求方式
 * @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請求

咱們定義了getRequest和postRequest方法，這兩個方法都接收兩個參數，分別爲url和data，返回一個函數，就是在fetch.js中定義的fetchData，把接收的兩個參數傳給fetchData

api.js

最後到了請求接口環節，將全部接口統一放在 api.js中管理
request.js中的 url和 data來自於這

/**
 * 全部接口請求
 */

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. 組件中導入要使用的方法便可，只需關心參數，再也不關心其餘