目录
网页端 - requst.js
import axios from 'axios'
const _url = process.env.VUE_APP_BASE_API //可自定义
const service = axios.create({
baseURL: _url,
timeout: 15000 // 请求超时时间
});
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=utf-8'
//请求拦截器
service.interceptors.request.use(config => {
// 设置token
config.headers['Authorization'] = localStorage.getItem("token") || '';
//baseURL不用赋值，自动覆盖原先baseURL
// 域名配置
if (config.requestType == 'other') {
config.baseURL = process.env.OUTSIDE_API;
}
return config;
});
//响应拦截器
service.interceptors.response.use(res => {
if (res.status == 200) {
return Promise.resolve(res.data);
} else {
return Promise.reject(res);
}
}, error => {
return Promise.reject(error)
})
//封装对应的方法（get与post传值不一致，封装后保持一致性）
let http = {
get: function(url, params = null, config) {
return service.get(url, {
params,
...config
})
},
post: function(url, params = null, config) {
return service.post(url, params, config)
},
delete: function(url, params = null, config) {
return service.delete(url, {
params,
...config
})
}
}
export {
http, axios}
接口二次封装-rules.js
可以按模块划分，防止文件中接口过多不方便查看
// 路径自己的
import {
http} from '@/utils/request';
//可以不使用
const BASE_PATH = = "/project"
// 保存规则
export function saveRule(data) {
return http.post(`${
BASE_PATH}/admin/rule/saveRule`, data);
}
// 统计数量
export function getRuleCount(data) {
return http.get(`${
BASE_PATH}/admin/rule/countState`, data);
}
// 其他域名接口
export function saveCategory(data, config) {
return http.post(`${
BASE_PATH}/category/saveCategory`, data, config);
}
// 接口-cancelToken
export function getPersonDetail(data, config) {
return http.post(`${
BASE_PATH}/service/person/detail`, data, config);
}
普通get,post使用–index.vue
// 路径自己的
import {
saveRule } from '@/services/rules.js';
var params = {
}
saveRule(params).then(res => {
if (res.code == 200) {
//成功回调
// this.$message.success('操作成功');
}
}).catch(err => {
});
多域名接口使用–index.vue
// 路径自己的
import {
saveCategory } from '@/services/rules.js';
var params2 = {
}
var config = {
baseURL: 1 < 2 ? "https://www.baidu.com" : "https://cloud.tencent.com/", //动态设置
requestType: "other" //可根据env文件设置
}
saveCategory(params2, config).then(res => {
if (res.code == 200) {
//成功回调
// this.$message.success('操作成功');
}
}).catch(err => {
});
使用–终止请求(cancelToken)–index.vue
// 路径自己的
import {
getPersonDetail } from '@/services/rules.js';
import axios from 'axios';
export default {
methods:{
mounted() {
setInterval(() => {
this.loadData();
}, 10);
},
// 取消接口请求操作
cancelWordtuneFun() {
if (typeof this.source === "function") {
this.source("singoo_facebook_content_replace");
}
},
loadData(){
this.cancelWordtuneFun();
var params2 = {
}
var config = {
//参数名字只能为cancelToken
cancelToken: new axios.CancelToken((c) => {
this.source = c;
})
}
saveCategory(params2, config).then(res => {
if (res.code == 200) {
//成功回调
// this.$message.success('操作成功');
}
}).catch(err => {
});
}
}
}
uniapp - requst.js - 用法一致
import axios from 'axios'
const _url = "http://www.xxx.com" //可自定义，暂未支持env
const service = axios.create({
baseURL: _url,
timeout: 15000 // 请求超时时间
});
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=utf-8'
//请求拦截器
service.interceptors.request.use(config => {
// 设置token
config.headers['Authorization'] = localStorage.getItem("token") || '';
//baseURL不用设置
// 域名配置
if (config.requestType == 'other') {
config.baseURL = "http://www.xxx.com";
}
return config;
});
//响应拦截器
service.interceptors.response.use(res => {
if (res.status == 200) {
return Promise.resolve(res.data);
} else {
return Promise.reject(res);
}
}, error => {
return Promise.reject(error)
})
//自己定义个适配器，用来适配uniapp的语法
axios.defaults.adapter = function(config) {
return new Promise((resolve, reject) => {
// console.log(config)
var settle = require('axios/lib/core/settle');
var buildURL = require('axios/lib/helpers/buildURL');
uni.request({
method: config.method.toUpperCase(),
url: config.baseURL + buildURL(config.url, config.params, config.paramsSerializer),
header: config.headers,
data: config.data,
dataType: config.dataType,
responseType: config.responseType,
sslVerify: config.sslVerify,
complete: function complete(response) {
// console.log("执行完成：", response)
response = {
data: response.data,
status: response.statusCode,
errMsg: response.errMsg,
header: response.header,
config: config
};
settle(resolve, reject, response);
}
})
})
}
//封装对应的方法（get与post传值不一致，封装后保持一致性）
let http = {
get: function(url, params = null, config) {
return service.get(url, {
params,
...config
})
},
post: function(url, params = null, config) {
return service.post(url, params, config)
},
delete: function(url, params = null, config) {
return service.delete(url, {
params,
...config
})
}
}
export {
http, axios}