前端的请求分析（get,post,put,delete,patch）

https://blog.csdn.net/Kris_xiaoxiao/article/details/125676627
这位博主写的很详细，留做参考

axios请求使用

方式一：

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

axios({
  method: 'get',
  url: 'http://bit.ly/2mTM3nY',
  responseType: 'stream'
})
  .then(function (response) {
    response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

方式二：

axios.get(url[, config])
axios.post(url[, data[, config]])
axios.delete(url[, config])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
1
2
3
4
5

config为请求配置对象（https://www.axios-http.cn/docs/req_config）

content-type分析

含义：在HTTP协议消息头中，使用Content-Type来表示请求和响应中的媒体类型信息。它用来告诉服务端如何处理请求的数据，以及告诉客户端（一般是浏览器）如何解析响应的数据，比如显示图片，解析并展示html等等。
HTML文档标记：text/html; JPEG图片标记：image/jpeg; GIF图片标记：image/gif; js文档标记：application/javascript; xml文件标记：application/xml;

1. application/x-www-form-urlencoded 一般用于表单提交。
   HTTP会将请求参数用key1=val1&key2=val2的方式进行组织，并放到请求实体里面，注意如果是中文或特殊字符如"/“、”,“、“:” 等会自动进行URL转码。
2. multipart/form-data 支持文件上传
   多部分多媒体类型。首先生成了一个 boundary 用于分割.
3. application/json
   JSON 是一种轻量级的数据格式，以键-值对的方式组织的数据。需要参数本身就是json格式的数据，参数会被直接放到请求实体里。服务端/客户端会按json格式解析数据

axios二次封装

import axios from 'axios'
import store from '@/store/index'

const instance = axios.create({
  baseURL: '/api/',
  timeout: 1000,
  headers: { 'X-Custom-Header': store.getters.getToken }
});

/*
get('xxx', {params:{ id : 12 }} ) --- 注意get这里必须要用{}包裹params
*/
const get = (url, params, config) => { // param放在地址栏中的api?a='34'
  const getConfig = {}
  if (params) {
    Object.assign(getConfig, params)
  }
  if (config) {
    Object.assign(getConfig, config)
  }
  return instance.get(url, getConfig)
}

/*
post('xxx', {id: 12, name:'zs'})
 */
const post = (url, data, config) => { // 创建更新数据,data中的数据看不到，content-type：wwww-urlencode, form-data(文件传输)
  return instance.post(url, data, config)
}

// 添加请求拦截器
instance.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  if (config.method.toUpperCase() === 'POST') {
    config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
  }
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
  // 2xx 范围内的状态码都会触发该函数。
  // 对响应数据做点什么
  return response;
}, function (error) {
  // 超出 2xx 范围的状态码都会触发该函数。
  // 对响应错误做点什么
  return Promise.reject(error);
});

export {
  get,
  post
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

以上内容仅供参考。