vue项目封装request请求（动态区分两个请求地址）

在目录中创建 utils 文件中创建 request.js

/****   request.js   ****/
// 导入axios
import axios from 'axios';
// 使用element-ui Notification做消息提醒
import { Notification } from 'element-ui'
let baseURL = 'http://192.168.42.3:10001'; //index.html引入的
let baseURL2 = 'http://192.168.42.3:9095';
//1. 创建新的axios实例，
const service = axios.create({// 超时时间 单位是ms，这里设置了8s的超时时间timeout: 8 * 1000,
});
// 2.请求拦截器
service.interceptors.request.use((config) => {//发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加config.data = JSON.stringify(config.data); //数据转化,也可以使用qs转换console.log('config', config.data);config.headers = {'Content-Type': 'multipart/form-data', //配置请求头// 'Content-Type':'multipart/form-data; boundary=ZnGpDtePMx0KrHh_G0X99Yef9r8JZsRJSXC'};config.contentType = 'application/x-www-form-urlencoded'switch (config.urlType) {case 'api1':config.url = baseURL + config.url;break;case 'api2':config.url = baseURL2 + config.url;break;default:config.url = baseURL + config.url;}//注意使用token的时候需要引入cookie方法或者用本地localStorage等方法，推荐js-cookie// const token = getCookie('名称');//这里取token之前，你肯定需要先拿到token,存一下// if(token){//   config.params = {'token':token} //如果要求携带在参数中//   config.headers.token= token; //如果要求携带在请求头中// }return config;},(error) => {Promise.reject(error);},
);// 3.响应拦截器
service.interceptors.response.use((response) => {//接收到响应数据并成功后的一些共有的处理，关闭loading等return response;},(error) => {/***** 接收到异常响应的处理开始 *****/if (error && error.response) {// 1.公共错误处理// 2.根据响应码具体处理if (error.response.code != 10000) {Notification.error({title: error.response.data.message,duration: 5000})}} else {// 超时处理if (JSON.stringify(error).includes('timeout')) {Notification.error('服务器响应超时，请刷新当前页');}error.message = '连接服务器失败';}Notification.error(error.message);/***** 处理结束 *****///如果不需要错误处理，以上的处理过程都可省略return Promise.resolve(error.response);},
);
//4.导入文件
export default service;

http.js 文件是对请求方法进行的封装

/****   http.js   ****/
// 导入封装好的axios实例
import request from './request';const http = {/*** methods: 请求* @param url 请求地址* @param params 请求参数*/get(url, params, type) {const config = {method: 'get',url: url,urlType: type,};if (params) {config.data = params;}return request(config);},post(url, params, type) {const config = {method: 'post',url: url,urlType: type,};if (params) config.data = params;return request(config);},put(url, params, type) {const config = {method: 'put',url: url,urlType: type,};if (params) config.data = params;return request(config);},delete(url, params, type) {const config = {method: 'delete',url: url,urlType: type,};if (params) config.data = params;return request(config);},
};
//导出
export default http;

新建api文件，配置请求接口

tip：因为项目中所用到的接口，地址有两个，所以在封装的时候进行了配置

页面使用：
1.引入需要用到的接口

import { getOverview, getCount, getAnalysisOverview } from "@/api/TaskService";

2.方法中调用接口

   handleComprehensive() {let dataStr = {dateStr: this.dateComprehenValue,sign: "iidie99e999e99e9e",};getAnalysisOverview(dataStr).then((res) => {if (res.data && res.data.code == "10000") {console.log(res.data, "res.data");}});},

vue项目封装request请求（动态区分两个请求地址）相关推荐

vue项目起本地，改成https协议请求
一般正常的vue项目,本地localhost起来默认是http请求协议开头的. 如果后端将http协议改成https请求,那么我们前端也需要进行更改,否则后端接口会报400(bad resquest ...
vue项目中运用webpack动态配置打包多种环境域名
在如今前后端分离,各种框架盛行的前端界,对项目的打包要求也越来越复杂,本人分享一个vue项目里,根据命令行输入不同的命令,打包出不同环境域名的方法.(欢迎纠错,谢谢.) 1. 安装插件 cross-e ...
VUE项目中CSS设置动态宽度的方法
网上找到三种方法: 一.使用cumputed 首先你务必看Vue的官方文档.涉及到的基础知识有: 绑定内联样式的使用 computed的使用文档写的都是基础使用.那么在项目实战中如何使用,两步就能实 ...
怎么改vue项目的标题_Vue动态修改网页标题的方法及遇到问题
业务需求,进入页面的时候,网页有个默认标题,加载的网页内容不同时,标题需要变更. 例:功能授权,功能授权(张三). Vue下有很多的方式去修改网页标题,这里总结下解决此问题的几种方案: 一.最笨方案 ...
Vue项目中如何设置动态的TDK
TDK是什么 TDK就是网站的标题(title).描述(description)和关键词(keyword) TDK在哪里上面大佬对TDK的概念解释的很全面,但是在网页中的TDK在哪里呢,作为开发人员 ...
vue项目 - 封装loding组件
一.需求问题在vue项目中,当在页面内容进行加载的时候,会进行请求数据,然后显示页面.在这个等待的过程中,会出现一段时间的白屏,我们可以通过加一个loading的效果,进行过渡,然后显示页面. &l ...
vue项目启动后终端显示localhost和ip访问地址
1.package.json文件下"scripts"的"dev"值后新增 --host 0.0.0.0" "dev": " ...
vue项目封装axios请求
目录: 一,src/utils/request.js import axios from 'axios' import { getToken } from '@/utils/auth' import ...
vue项目封装axios
先看一下我们的结构: 第一阶段配置: api文件夹说明 api文件夹存放接口 user.js import request from "../utils/request";// ...
vue项目-封装API接口
1.在/src/下创建一个js文件 AxiosAsk.js import Vue from 'vue' import axios from 'axios' var vm = ''; Vue.proto ...

vue项目封装request请求（动态区分两个请求地址）

在目录中创建 utils 文件中创建 request.js

vue项目封装request请求（动态区分两个请求地址）相关推荐

最新文章

热门文章

vue项目 封装request请求（动态区分两个请求地址）

在目录中创建 utils 文件 中创建 request.js

vue项目 封装request请求（动态区分两个请求地址）相关推荐

最新文章

热门文章

vue项目封装request请求（动态区分两个请求地址）

在目录中创建 utils 文件中创建 request.js

vue项目封装request请求（动态区分两个请求地址）相关推荐