网页端 - 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") || '';
 	// 多个域名域名配置
 	// config参数中传人baseURL参数后，baseURL不用赋值，自动覆盖原先baseURL
 	// config参数中传入requestType参数后，可根据类型修改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
		})
	}
	// ... put
}

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}