[vue] ajax post form表单提交 json提交_form表单json提交

post form表单提交

方法一

import ajax from 'axios';
import qs from 'qs';

export const 接口名= (params, data) => ajax({
  method: 'post',
  url: `地址?${qs.stringify(params)}`,
  headers: {
    'Content-Type': 'multipart/form-data',
  },
  data,
});
1
2
3
4
5
6
7
8
9
10
11

请求

const params = {
	name:1
}
const data1 = {...}
接口名(params,data:data1).then((res) => {
   if (res.code === '00000') {
     
   } else {
     
   }
 });
1
2
3
4
5
6
7
8
9
10
11

方法二

export const 接口名= (data) =>
  axios.post(
    `地址?${data.query}`,
    data.data
  );

1
2
3
4
5
6

请求

const params1 = {
    query: `name=${this.name}`,
    data: '',
};
接口名(params1).then((res) => {
	if (res.code === '00000') {
	  
	} else {
	  this.$message.error(res.msg);
	}
});
1
2
3
4
5
6
7
8
9
10
11

方法三

export const 接口= (data) => axios.post('地址', data);
1

请求

const params1 = {
    name: this.name,
};
接口名(qs.stringify(params)).then((res) => {
	if (res.code === '00000') {
	  
	} else {
	  this.$message.error(res.msg);
	}
});
1
2
3
4
5
6
7
8
9
10

post json提交

import axios from '../axios';
export const 名 = (data) => axios.post('地址', data);
1
2

get

import axios from '../axios';
export const 名 = (params) => axios.get('地址', { params });
1
2

axios.js

/**
 * 全站http配置
 *
 * header参数说明
 * serialize是否开启form表单提交
 * isToken是否需要token
 */
import axios from 'axios';
import { Message } from 'element-ui';
import NProgress from 'nprogress';
import store from '@/store/';
import router from '@/router/router';
import { serialize, getSecHost } from '@/util/util';
import { getStore } from '@/util/store';
import { getToken } from '@/util/auth';
import website from '@/const/website';
import 'nprogress/nprogress.css';

axios.defaults.timeout = 10000;
// axios.defaults.crossDomain = true;
// 返回其他状态吗
axios.defaults.validateStatus = (status) => status >= 200 && status <= 500; // 默认的

// 跨域请求，允许保存cookie
axios.defaults.withCredentials = true;
// NProgress Configuration
NProgress.configure({
  showSpinner: false,
});

axios.interceptors.request.use((config) => {
  // 二级域名放在请求头中
  const domainField = 'X-TENANT-ID';
  const tokenField = 'X-ACCESS-TOKEN';
  const domain = getSecHost();
  config.headers[domainField] = domain;
  const token = getStore({
    name: 'token',
  });
  if (token) { // 判断是否存在token，如果存在的话，则每个http header都加上token
    config.headers[tokenField] = token;
  }

  NProgress.start(); // start progress bar
  const isToken = (config.data || {}).isToken === false;
  if (getToken() && !isToken) {
    config.headers.Authorization = `Bearer ${getToken()}`; // 让每个请求携带token--['Authorization']为自定义key 请根据实际情况自行修改
    // config.headers['Content-Type'] = "application/json"
  }
  // 为了判断是否为formdata格式，增加了一个变量为type,如果type存在，而且是form的话，则代表是formData的格式
  if (config.type && config.type === 'form') {
    config.headers['Content-Type'] = 'multipart/form-data; boundary=----WebKitFormBoundaryHg2OK8Uv9HBFvgcJ';
  }
  // headers中配置serialize为true开启序列化
  if (config.methods === 'post' && config.headers.serialize) {
    config.data = serialize(config.data);
    delete config.data.serialize;
  }
  return config;
}, (error) => Promise.reject(error));
// HTTPresponse拦截
axios.interceptors.response.use((res) => {
  NProgress.done();
  const status = Number(res.status) || 200;
  const statusWhiteList = website.statusWhiteList || [];
  const message = res.data.message || '未知错误';
  // 如果请求为200则放过，否者默认统一处理,或者在website中配置statusWhiteList白名单自行处理
  if (status !== 200 && status !== 401 && !statusWhiteList.includes(status)) {
    Message({
      message: '请求超时,请稍后重试' || message,
      type: 'error',
    });
    return Promise.reject(new Error(message));
  } if (status === 401) {
    Message({
      message: 'token已超时超时,',
      type: 'error',
    });
  }
  // 如果是401则跳转到登录页面
  if (status === 401) store.dispatch('LOG_OUT').then(() => router.push({ path: '/login' }));
  // 如果是404则跳转到404页面
  if (status === 404) router.push({ path: '/404' });

  // 如果是500则跳转到500页面
  if (status === 500) router.push({ path: '/500' });


  // 如果是白名单类型放入catch自行处理
  if (status !== 200) return Promise.reject(res);
  return res.data;
}, (error) => {
  NProgress.done();
  return Promise.reject(new Error(error));
});

export default axios;

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98