接口请求传参方式

常见的传参方式

header参数

HTTP标头规范

存放在请求头中发送给服务器的参数，服务器通过解析请求头获取参数内容。

通常会存放本次请求的基本设置（Content-Type），以帮助服务器理解并解析本次请求的body体。
一个 HTTP 标头由它的名称（不区分大小写）后跟随一个冒号（:），冒号后跟随它具体的值。该值之前的空格 (en-US)会被忽略。

例如：

Content-Type

Content-Type实体头部用于指示资源的 MIME 类型 media type 。

在响应中，Content-Type 标头告诉客户端实际返回的内容的内容类型。浏览器会在某些情况下进行 MIME查找，并不一定遵循此标题的值; 为了防止这种行为，可以将标题 X-Content-Type-Options 设置为 nosniff。

在请求中 (如POST 或 PUT)，客户端告诉服务器实际发送的数据类型。加粗样式

path参数

通过URL的路径部分来传递参数，以‘ / ’开始和分隔。

例：

其中{userNo}是路径参数的占位符，实际参数将替换占位符部分。

query参数

查询参数是通过URL的查询部分来传递参数的，以‘ ？’开头，多个参数之间使用‘ &’来分隔。

例：

Request URL：/user/oldPassword/validate?oldPassword=1234&userNo=test

body参数

body参数不会显式的暴露在URL上。

常见请求方式的传参

axios中文文档
常见请求配置：

{
   // `url` 是用于请求的服务器 URL  (path参数在这)
  url: '/user',
  
  // `method` 是创建请求时使用的方法
  method: 'get', // default

  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  baseURL: 'https://some-domain.com/api/',

  // `headers` 是即将被发送的自定义请求头
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  // `params` 是即将与请求一起发送的 URL 参数(query参数在这)
  // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
  params: {
    ID: 12345
  },

  // `data` 是作为请求主体被发送的数据（body参数在这）
  // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
  // 在没有设置 `transformRequest` 时，必须是以下类型之一：
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - 浏览器专属：FormData, File, Blob
  // - Node 专属： Stream
  data: {
    firstName: 'Fred'
  },

  // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
  // 如果请求话费了超过 `timeout` 的时间，请求将被中断
  timeout: 1000,
}

例：

export const request = axios.create({
  withCredentials: false,
  baseURL: BASE_API_PATH,
  timeout: 1000 * 60 * 5
})

get请求

get请求只能传query参数
例：

/**
 * GET method request
 * @param {String} url
 * @param {Object} [params]
 * @param {Object} [ext] 扩展参数
 * @returns {AxiosInstance}
 */
export const get = function <T>(url: string, params = {}, ext?: any) {
  return request<any, AxiosResponseRewrite<T>>({
    method: 'GET',
    url,
    params,
    ...ext
  })
}

// 查询用户列表
export const getUserList = (params: object) => server.get(`/authManage/user/qryUserList`, params);

post请求

post请求可以传query和body类型的参数

例：

/**
 * POST method request
 * @param {String} url
 * @param {Object} [data]
 * @param {String} responseType 如果接口是需要导出文件流，那么responseType = 'blob'
 * @param {Object|String} [ext] 扩展参数，如果是配置headers，ext对象内包含headers对象，如下
 * {
        headers: {'Content-Type': 'text/plain;charset=UTF-8'},
    }
 * @returns {AxiosInstance}
 */
export const post = function <T>(url: string, data = {}, params = {}, ext = {}) {
  ext = typeof ext === 'string' ? { responseType: ext } : ext
  return request<any, AxiosResponseRewrite<T>>({
    ...ext,
    params,
    method: 'POST',
    url,
    data
  })
}

• 示例接口1：

此post接口需要query参数

//  定义的第三个参数params才是query参数
export const oldPwd_validate = (data: any) => server.post(`/user/oldPassword/validate`, {}, data);

• 示例接口2：

此post接口需要body参数

export const name_validate = (params: any) => server.post(`/user/validate_name`, params,{}, {
    headers: {
        'Content-Type': 'text/plain'
    }
});

‘Content-Type’: ‘text/plain’ 表示纯文本数据

• 示例接口3：

法一:

export const uploadAvatar= (avatar: any) => server.post(`/user/avatar_upload`, {avatar: avatar}, {}, {
    headers: {
        "Content-Type": "multipart/form-data"
    }
});

uploadAvatar(info.file).then((res: any) => {})  // 使用

法二:

export const uploadAvatar= (data: any) => server.post(`/user/avatar_upload`, data);

customRequest: (info: UploadChangeParam<UploadFile<any>>) => {
        const formData = new FormData();
        formData.append('avatar', info.file);
        uploadAvatar(formData).then((res: any) => {
            
        })
    },

FormData

参考资料

1. https://blog.csdn.net/madmk/article/details/97246761
2. http://www.axios-js.com/zh-cn/docs/#axios-get-url-config-1