axios封装+多情况变量(新手一看就会)

剑指四方

那里总结三种变量情况(天生情况,开辟情况,测试情况)

经由过程 npm run serve 启动本地 , 施行 development

经由过程 npm run test 挨包测试 , 施行 testing

经由过程 npm run build 挨包正式 , 施行 production

package.json 设置普通主动天生两个逃减一个

"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"stage":"vue-cli-service --mode staging"
},

复造代码

设置介绍
以 VUE_APP_ 开首的变量，正在代码中能够经由过程 process.env.VUE_APP_ENV(ENV自界说) 会见。
比如,VUE_APP_ENV = 'development' 经由过程process.env.VUE_APP_ENV 会见。
除 VUE_APP_* 变量以外，正在您的使用代码中一直可用的另有两个特别的变量NODE_ENV 战BASE_URL

正在项目根目次中新建.env.*

以后再src目次下创立config文件夹

上三个文件中界说

//那里的***代表途径
module.exports={
baseURL:"***",// 项目地点
title: 'vue-h5-template',
baseApi: 'https://test.xxx.com/api', // 当地api恳求地点
APPID: 'xxx',
APPSECRET: 'xxx'
}

复造代码

index.js 界说

// 按照情况引进差别设置 process.env.NODE_ENV
const quer = process.env.VUE_APP_ENV
const config = require("./env."+quer) //拼接
module.exports = config

复造代码

axios启拆

axios中文文档|axios中文网
http://www.axios-js.com/zh-cn/docs/

下载// npm install axios

复造代码

留意:正在src目次下创立http文件夹, 正在文件夹中创立index.js文件寄存下圆内乱容

import axios from 'axios'
import {Toast} from "vant" //logding的结果必需下载vant
import {baseURL} from "@/config"
console.log(baseURL);
// 设置axios的基地点【口试题】
// 每次diaoy个接心时皆要写上完好的地点，每一个接心的地点前脸部分是不异的，on
// 接心地点有不异的部门，我们要把不异的部门提掏出设置一下，前面挪用接心便没有需求写不异的部门
// axios.defaults.baseURL="不异的地点"
const service =axios.create({
baseURL:baseURL,
timeout:8000,
})
let logding;
// 增加恳求阻拦器----（设置恳求头，通报token）
service.interceptors.request.use(function (config) {
// 正在收收恳求之前做些甚么
logding=Toast.loading({
forbidClick: true,
message:"减载中...",
})
// let token = localStorage.getItem('user')?JSON.parse(localStorage.getItem('user')).token:""
// // console.log(token);
// // 设置头(英辞意思:头部) token(英辞意思:受权/承认/核准)
// config.headers.Authorization = token
return config;
}, function (error) {
// 对恳求毛病做些甚么
return Promise.reject(error)
});
// 增加呼应阻拦器---处置共性的毛病同一做处置
service.interceptors.response.use(function (response) {
// 对呼应数据做面甚么
logding.clear()
return response.data
}, function (error) {
// 对呼应毛病做面甚么
return Promise.reject(error)
});
// 导出
export default service;

复造代码

经由过程main.js 中导出

import axios from './http/index'
// 把axios挂载到Vue的本型上，如许的话项目中任何一个组件皆可使用了
Vue.prototype.$http = axios

复造代码

免责声明：假如进犯了您的权益，请联络站少，我们会实时删除侵权内乱容，感谢协作！