//封装代码http.js
/*
* @Author: Mr Dong
* @Date: 2022-03-08
* @LastEditTime: 2022-03-09
* @LastEditors: Mr Dong
*/
import Vue from 'vue';
import axios from 'axios';
import qs from 'querystring'//序列化参数用
//决定是否过滤URL中的/api
let isFilterApi = !(process.env.NODE_ENV === 'development'); //线上环境还是本地环境,过滤/api
let _axios = axios.create({
baseURL: '',
withCredentials:true,//跨域请求时开启请求头可以携带cookie等信息
timeout: 300000, //超时设置
transformRequest: [function (data) {
return data
}],//处理请求格式用(这里不能少,否则content-type设置成multipart/form-data无效,具体原因未知)
transformResponse: [function (data) {
return data
}]//处理返回格式用例如_axios.defaults.responseType = 'blob';
})
// 请求拦截器(如果不单独封装成多种单独的请求格式,判断将写在请求拦截中,自行考虑选用方式,个人觉得判断太多不如单独写)
_axios.interceptors.request.use(
(config) => {
return config
}, // 发送请求前做的配置
error => { //请求错误处理
Promise.reject(error)
}
);
// 响应拦截器
_axios.interceptors.response.use(
(response) => response,
(error) => Promise.reject(error), // 对请求错误做点什么
);
_axios.defaults.headers.common['Token'] = '1111'//token设置
//过滤/api
function filterApi(url) {
url = isFilterApi? url:'/api'+url//跨域代理,开发环境自动添加'/api'
return url
}
//通用请求错误提示
function _error(err){
switch (Number(err.response.status)) {//这里字段根据自己项目修改
case 400://一般是前台参数格式有问题
Vue.prototype.$message({
type: 'warning',
showClose: true,
message: '请求无效!'
});
break;
case 404:
Vue.prototype.$message({
type: 'error',
showClose: true,
message: '未找到该接口'
});
break;
case 500:
Vue.prototype.$message({
type: 'error',
showClose: true,
message: '服务器异常',
});
break;
}
}
//json格式post
export const JsonPost = (url, params) => new Promise((resolve, reject) => {
url = filterApi(url)
_axios.defaults.headers.post['Content-Type'] = 'application/json; charset=UTF-8';
delete _axios.defaults.responseType
_axios.post(url, JSON.stringify(params)).then((res) => {
resolve(res.data);
}).catch((err) => {
_error(err)//通用错误提示
reject(err.data);//特定界面错误处理
});
});
//键值对格式post
export const FormDataPost = (url, params) => new Promise((resolve, reject) => {
url = filterApi(url)
_axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=utf-8';
delete _axios.defaults.responseType
_axios.post(url, qs.stringify(params)).then((res) => {
resolve(res.data);
}).catch((err) => {
_error(err)//通用错误提示
reject(err.data);//特定界面错误处理
});
});
//文件格式post,上传图片,文件等
export const FilePost = (url, params) => new Promise((resolve, reject) => {
url = filterApi(url)
_axios.defaults.headers.post['Content-Type'] = 'multipart/form-data';
delete _axios.defaults.responseType
_axios.post(url, params).then((res) => {
resolve(res.data);
}).catch((err) => {
_error(err)//通用错误提示
reject(err.data);//特定界面错误处理
});
});
//返回格式为文件流,如导出excle文件流。
export const BlobPost = (url, params) => new Promise((resolve, reject) => {
url = filterApi(url)
_axios.defaults.headers.post['Content-Type'] = 'application/json; charset=UTF-8';
_axios.defaults.responseType = 'blob';
_axios.post(url, JSON.stringify(params)).then((res) => {
resolve(res.data);
}).catch((err) => {
_error(err)//通用错误提示
reject(err.data);//特定界面错误处理
});
});
//get请求,这里注意和axios.get和axios.post请求参数格式的区别写法post{},get{params:{}}
export const get = (url, params) => new Promise((resolve, reject) => {
url = filterApi(url)
delete _axios.defaults.responseType
_axios.get(url, { params }).then((res) => {
resolve(res.data);
}).catch((err) => {
_error(err)//通用错误提示
reject(err.data);//特定界面错误处理
});
});
//第一种写法
//axios({method:'post',url:'',data:{}}
//axios({method:'get',url:'',params:{}})
//第二种写法,这里用的是第二种
//axios.get(url,{params:{}})
//axios.post(url,data:{})
//第三种写法不区分参数格式只用post格式,单独手动处理get的url,即手动序列化参数拼接到url后面。不提倡,序列化放法可采用qs.stringify()或者自己写方法
//分模块使用,home.js
/*
* @Author: Mr Dong
* @Date: 2022-03-09
* @LastEditTime: 2022-03-09
* @LastEditors: Mr Dong
*/
import { get, JsonPost, FormDataPost, FilePost, BlobPost } from '../http';
// 测试请求一,注意加入'/api',用了跨域代理的方式
export const _JsonPost = (params = {}) => JsonPost('/sc-prevention/process/queryWorkOrderInfo', params);
export const _FormDataPost = (params = {}) => FormDataPost('/sc-prevention/process/queryWorkOrderInfo', params);
export const _FilePost = (params = {}) => FilePost('/sc-prevention/process/queryWorkOrderInfo', params);
export const _BlobPost = (params = {}) => BlobPost('/sc-prevention/process/queryWorkOrderInfo', params);
export const _get = (params = {}) => get('/sc-prevention/process/queryWorkOrderInfo', params);
//各模块统一导出index.js
/*
* @Author: Mr Dong
* @Date: 2022-03-18
* @LastEditTime: 2022-03-09
* @LastEditors: Mr Dong
*/
import * as home from './home/index';
export {
home
}
//页面引入并使用
import {home} from '../api/api_type2/index'
//测试get请求
home._get({name:'测试',age:29}).then(res=>{
console.log(res)
}).catch(err=>{
alert('get请求失败')//特定错误处理
})
//测试post请求
home._JsonPost({name:'测试',age:29}).then(res=>{
})
home._FormDataPost({name:'测试',age:29}).then(res=>{
console.log(res)
})
home._FilePost({name:'测试',age:29}).then(res=>{
console.log(res)
})
home._BlobPost({name:'测试',age:29}).then(res=>{
console.log(res)
})
//接口链式调用测试,放在catch中,是因为这里测试是假接口只能走到catch,正常开发自然是then
home._get({name:'测试',age:29}).then(res=>{
// return home._JsonPost(res.data)
}).catch(err=>{
return home._JsonPost({name:'测试',age:29})
}).then(res=>{
// return home._FormDataPost(res.data)
}).catch(err=>{
return home._FormDataPost({name:'测试',age:29})
}).then(res=>{
// return home._FilePost(res.data)
}).catch(err=>{
return home._FilePost({name:'测试',age:29})
}).then(res=>{
// return home._BlobPost(res.data)
}).catch(err=>{
return home._BlobPost({name:'测试',age:29})
})
//promise.all测试,注意参数要是promise实例对象
Promise.all([home._get({name:'测试',age:29}),home._JsonPost({name:'测试',age:29})]).then(res=>{
}).catch(err=>{
console.log('all测试')
})
目录结构
![在这里插入图片描述](https://img-blog.csdnimg.cn/9e8ffdea5a8f45349469ddc55f36f6ea.png#pic_center)