0. 系列文章

項目源碼請猛戳這里!!!

1. 前言

在上篇文章中，我們處理了發送get請求時攜帶的參數要拼接在url上，另外，我們知道當發送post請求時，所攜帶的參數是存在於請求體body中的，那么這篇文章我們就來處理下發送post請求時body里的參數。

2. 需求分析

我們通過查閱 mdn 發現: send 方法的參數支持 Document 和 BodyInit 類型，BodyInit 包括了 Blob, BufferSource, FormData, URLSearchParams, ReadableStream、USVString，當沒有數據的時候，我們還可以傳入 null。

但是我們最常用的場景還是傳一個普通對象給服務端，例如：

axios({
  method: 'post',
  url: '/api/handleRequestBody/post',
  data: {
    a: 1,
    b: 2
  }
})

這個時候 data是不能直接傳給 send 函數的，我們需要把它轉換成 JSON 字符串。

3. 實現 transformRequest 函數

根據需求分析，我們要實現一個工具函數，對 request 中的 data 做一層轉換。我們在 helpers 目錄新建 data.ts 文件。

// src/helpers/data.ts

import {isObject} from './util'

export function transformRequest (data: any): any {
  if (isObject(data)) {
    return JSON.stringify(data)
  }
  return data
}

4. 利用 transformRequest 函數處理body參數

我們首先定義 transformRequestData函數，去轉換請求 body 的數據，內部調用了我們剛剛實現的的 transformRequest 方法。

然后我們在 processConfig 內部添加了這段邏輯，在處理完 url 后接着對 config 中的 data 做處理。

// src/index.ts

import {transformRequest} from "./helpers/data";

function processConfig(config: AxiosRequestConfig): void {
  config.url = transformUrl(config);
  config.data = transformRequestData(config)
}

function transformRequestData(config: AxiosRequestConfig): any {
  const {data} = config
  return transformRequest(data)
}

OK，我們對 body 參數處理邏輯就實現完了，接下來我們編寫 demo 來試試效果怎么樣。

5. 編寫demo

在 examples 目錄下創建 handleRequestBody目錄，在 handleRequestBody目錄下創建 index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>handleRequestBody demo</title>
</head>
<body>
<script src="/__build__/handleRequestBody.js"></script>
</body>
</html>

接着再創建 app.ts 作為入口文件：

import axios from '../../src/index'

axios({
  method: 'post',
  url: '/api/handleRequestBody/post',
  data: {
    a: 1,
    b: 2
  }
})

接着在 server/server.js 添加新的接口路由：

router.post('/api/handleRequestBody/post', function(req, res) {
  res.json(req.body)
})

最后在根目錄下的index.html中加上啟動該demo的入口：

<li><a href="examples/handleRequestBody">handleRequestBody</a></li>

OK,我們在命令行中執行：

# 同時開啟客戶端和服務端
npm run server | npm start

接着我們打開 chrome 瀏覽器，訪問 http://localhost:8000/ 即可訪問我們的 demo 了，我們點擊 handleRequestBody，通過F12的 network 部分我們可以觀察發出的請求以及請求的參數。

6. 遺留問題

我們從上圖中可以看到，雖然攜帶的參數已經被正常發出了，但是服務端卻返回了一個空對象，感覺服務端好像不能正確解析我們傳過去的參數呢，這是什么原因呢？我們下篇文章里繼續研究。
(完)

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 使用Typescript重構axios(九)——異常處理：基礎版使用Typescript重構axios(二十一)——請求取消功能：添加axios.isCancel接口使用Typescript重構axios(十五)——默認配置使用Typescript重構axios(一)——寫在最前面使用Typescript重構axios(二)——項目起手，跑通流程基於TypeScript從零重構axios axios post 請求參數傳遞【Ts重構Axios】關於處理請求error三種情況 uniapp使用axios處理請求使用vue+Axios報錯Axios.post Error: Request failed with status code 400 解決辦法之axios發post請求后端接收不到參數