了解几个Content-type类型
**Content-type类型：**代表发送端发送的实体数据的数据类型
*要根据服务端定而定，否则一般情况无需做设置改动
/**
*get请求不存在设置Content-Type
*只有post和put用到Content-Type
*content-type会根据参数的类型会自动有对应的值，一般无需设置
*/
第一种：application/json;charset=UTF-8
默认行参axios.post(url,{a:1,b:2})
若不标注Content-type类型，则content-type默认是application/json;charset=UTF-8类型
第二种：multipart/form-data
多用于片上传
formDatappend(‘a’,;
formDatappend(‘b’,
letdata={a:1,b:2};axios.post(url,qs.stringify({data}))
例如服务端需要的类型为第三种，此时只需要统一设置请求前将参数变成字符串即可
//`transformRequest`允许在向服务器发送前，修改请求数据//只能用在‘PUT’,‘POST’和‘PATCH’这几个请求方法//后面数组中的函数必须返回一个字符串，或ArrayBuffer，或StreamtransformRequest:[function(data,headers){//对data进行任意转换处理returndata;}],
还可查阅axios中文文档|axios中文网|axios
还可查阅这篇文章-leoss.H
第一步新建request.js文件
定义request方法
创建axios实例
为实例添加拦截器
/*
* 接口请求封装
*/
import axios from 'axios'; // 引入axios
import config from 'utils/config.js'
import com from 'utils/common.js'
import { Message } from 'element-ui';
import Qs from 'qs'
import loading from 'utils/loading'
let options = {};
const NEED_TRANSLATE = [ // 需要转转字符串
'supply/purchase/orderVoided',
'upload-file/upload/files/delete',
'supply/issuing/detail',
'supply/costManage/confirmDeposit',
'supply/logistics/notifyArrivalTime',
'supply/logistics/detail'
];
const request = async function (opt) {
try {
options = Object.assign({
method: 'get', // 默认get 请求
},
opt //参数
);
const res = await instance(options);
return res;
} catch (err) {
return err;
}
};
// 创建axios实例
const instance = axios.create({
baseURL: config.baseUrl,
timeout: 6000, // 请求超时日期
});
// 实例添加请求拦截器
instance.interceptors.request.use((requestConfig) => {
loading.showLoading();
if (/get/i.test(requestConfig.method)) { // 判断get请求
requestConfig.params = requestConfig.params || {};
requestConfig.params.timeStamp = Date.parse(new Date()) / 1000; // 添加日期戳
}
const token = com.getSession(config.USER_TOKEN);
const userId = com.getSession(config.USER_ID);
if (!com.isNullOrEmpty(token)) {
requestConfig.headers.Authorization = 'bearer ' + token;
}
if (!com.isNullOrEmpty(userId)) {
requestConfig.headers['user-id'] = userId
}
if (NEED_TRANSLATE.find(n => requestConfig.url.indexOf(n) > -1)) {
requestConfig.data = Qs.stringify(requestConfig.data)
// requestConfig.headers['Content-type'] = 'application/x-www-form-urlencoded'
}
return Promise.resolve(requestConfig);
}, (error) => {
// 对请求错误做处理...
return Promise.reject(error);
});
// 实例添加响应拦截器
instance.interceptors.response.use((response) => {
loading.hideLoading();
if ((response.status >= 200 && response.status < 300) || response.status === 304) {
// 如果http状态码正常，则直接返回数据
return response.data;
}
}, (error) => {
// 对响应错误做处理...
loading.hideLoading();
if (error.response) {
switch(error.response.status){
case 401:
Message.error({
duration: 1500,
message: error.response.data.message,
onClose() {
$com.jumpTodoOffical('expiredToken');
}
})
break;
case 402:
break;
case 403:
break;
default:
Message.error({
duration: 1500,
message: error.response.data.message,
})
break;
}
return Promise.reject(error.response);
}
});
export default request;
第二步新建services/apiUrl文件
该文件是api接口地址的汇总
/*
* api接口地址汇总
*/
export const apiUrl = {
// 用户权限
apiPermission: function(param){
return `system/menu/${param.name}/2`
},
// 用户认证列表
apiAuthList: 'platform/customer/authList',
// 用户认证提交审核
apiAuthCustomerSave: 'platform/customer/saveApproval',
// 船运信息-删除
apiShippingDel: function(params){
return `supply/shipping/${params.id}`
},
}
第三步新建services/index.js文件
/*
* 生成接口，并将接口挂载到vue的原型上
*/
import Vue from 'vue';
import request from './request';
import { apiUrl } from './apiUrl';
const services = {};
Object.entries(apiUrl).forEach((item) => {
services[item[0]] = function (options = {},urlParams={}) {
return request(Object.assign({
url: typeof(item[1])==='function'? item[1](urlParams):item[1]
}, options))
}
})
// 将services挂载到vue的原型上
// 业务中引用的方法：this.$services.接口名（小驼峰）
Object.defineProperty(Vue.prototype, '$services', {
value: services
});
export default services;
最后如何使用封装好的request请求
this.$services.接口名
// get 请求
this.$services.apiAuthList({
method: 'get',
params: {
orgId: this.paramsInfo.orgId,
creditId: this.paramsInfo.creditId,
}
}).then(res => {
if (res && res.code === 2000) {
//todo
} else {
this.$message.error({
message: res.message
})
}
})
// post请求
this.$services.apiAuthCustomerSave({
method: 'post',
data: {
orgId: this.paramsInfo.orgId,
creditId: this.paramsInfo.creditId,
}
}).then(res => {
if (res && res.code === 2000) {
//todo
} else {
this.$message.error({
message: res.message
})
}
})
// 这里通过一个多余的{} 为url接口传递参数
this.$services.apiShippingDel({
method: 'delete',
},{
id: row.id
}).then((res) => {
if (res && res.code === 2000) {
this.$message.success('删除成功');
this.getPageList();
} else {
this.$message.error(res && res.message);
}
});
搞定??
文章为作者独立观点，不代表股票交易接口观点
相关文章
股民评论