IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> vue uniapp axios二次封装,支持多域名设置,支持请求终止(cancelToken) -> 正文阅读

[JavaScript知识库]vue uniapp axios二次封装,支持多域名设置,支持请求终止(cancelToken)

网页端 - 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不用设置
 	// 域名配置
 	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);
}

使用–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 { saveRule, saveCategory } from '@/services/rules.js';

var params = {}
saveRule(params).then(res => {
        if (res.code == 200) {
          //成功回调
          // this.$message.success('操作成功');
        }
      }).catch(err => { 
        
      }); 

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}
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-08-19 18:55:10  更:2022-08-19 18:56:02 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2025年1日历 -2025/1/11 12:33:02-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码