axios的请求封装
// 首先要在node的环境下 安装axios并导入 可以用 npm install i 进行全局下载安装
import axios from 'axios'
先看一下结构目录
在requister.js中
import axios from 'axios'
const service = axios.create({ // 添加自定义配置新的axios
baseurl:"" , // 请求接口路径
timeout: 20000 // 设置接口超时20s
})
// axios.interceptors.request.use(config =>{ // 接口请求拦截器 在请求接口前进行配置的内容
// })
service.interceptors.request.use(config =>{
config.headers['UserId'] = localStorage.getItem('USERID') // 在请求头中添加参数
if (config.headers["Content-Type"] === "application/x-www-form-urlencoded") {
let form = new FormData(); // 构造函数 解决传递头部参数格式不正确
for (let key in config.data) {
form.append(key, config.data[key]);
}
config.data = form
}
if(config.method === 'get'){ // get 请求
}else if(config.method === 'post'){// post 请求
// 根据真实数据进行调整
if (config.data instanceof FormData) { //instanceof 判断 config.data 是否是构造函数
} else {
// 第二次请求 数据会序列号 所以需要判断 解除二次序列化
if(typeof config.data === 'string') {
config.data = JSON.parse(config.data)
}
}
}
return config // 请求头部抛出
},
error =>{
return Promise.reject(error) //返回一个带有拒绝原因的 Promise 对象。
}
)
service.interceptors.response.use(response => { //拦截器相应之后 在响应之后对数据进行相对应的处理
return response
},
error => {
return Promise.reject(error)
}
)
export default service // 将这个接口拦截给抛出 让其他文件能够导入
在im.js中
.env文件用于区分是正式环境还是测试环境
import request from '../store/requister'
let d = process.env.NODE_ENV !== "development" ? "/newApi" : "/api" // 用于区分环境 正式环境还是测试环境
export function fetchGetUserInfo(data) { // 接口中 后面拼接参数方式
return request({
url:`${d}/IM/getUserInfo/${data}`,
method:'get',
params:{}
})
}
export function GetWebUserGroup(data) { // 直接以键值对的方式进行传参
return request({
url:`${d}/RYGroup/GetWebUserGroup`,
method:'get',
params:data
})
}
export function ManagerCreateUserGroup(data) { // post方式
return request({
url:`${d}/RYGroup/ManagerCreateUserGroup`,
method:'post',
headers: {
"Content-Type": "application/x-www-form-urlencoded", //(我在请求头中添加的判断,根据业务逻辑来进行对应的更改)
},
data,
})
}
两个.env文件
下面是第一个.env文件 .env.development
。
ENV = 'development'
VUE_APP_BASE_INDEX_URL = 'https://xxxxxxxxx/#/'
#//VUE_APP_BASE_API = 'http://192.000.000.000' 后台主机本地地址
VUE_APP_BASE_IM_KEY = 'xxxxxxxxr' // 全局用到第三方插件的key值 (根据具体的业务插件进行填写 没有课不写)
第二个.env文件 .env.test
。
ENV = 'test'
VUE_APP_BASE_INDEX_URL = 'https://xxxxxxxxx/#/'
#//VUE_APP_BASE_API = 'http://192.000.000.000'
VUE_APP_BASE_IM_KEY = 'xxxxxxxxr'
两者的基本区别就是 ENV的值不一样 其他基本相同 为了辨别是那个环境
基本准备完成 接着就是调用的问题了
在你想调用的页面引入im.js文件
import {fetchGetUserInfo,GetWebUserGroup} from '../store/im'
方法调用
btnclick(){
let userId = '' // 传递的参数
fetchGetUserInfo(userId).then(res=>{
console.log(res)
})
},
btnclick1(){
let arr = [] //参数数据
let userId = 20010818
GetWebUserGroup({userId:userId ,groupIds:arr}).then(res=>{
console.log(res)
})
}
至此基本上已完成 但是还有个问题 就是如果你接口地址不在本机服务器中 就需要 webpack进行配置一番
const webpack = require('webpack')
module.exports = {
publicPath:'./',//打包后的位置(如果不设置这个静态资源会报404)
outputDir:'disTst',
assetsDir:'static',//静态资源目录名称
productionSourceMap:false, //去掉打包的时候生成的map文件
lintOnSave:false, //设置是否在开发环境下每次保存代码时都启用 eslint验证
filenameHashing: false, //执行 npm run build 之后的 dist 目录的静态资源的文件名多会追加上 hash 值 当 html 不是自动生成或者其他情况时候,就不能加 hash 了,可以配置 false
devServer: {
host: '127.0.0.1', // 本机名称
port: 8080, // 端口
https: true, // 前缀是http 还是https
hotOnly: false, // 是否开启热更新
proxy: {
'/api': {
target: 'https://xxxxxxx.com', // 后天接口域名
secure: false, // 如果是https接口,需要配置这个参数
ws: true, //如果要代理 websockets,配置这个参数
logLevel:'debug', // 在终端查看代理的真实请求地址
changeOrigin: true, // 是否跨域
pathRewrite: { // 重定向域名
'^/api': '/api'
}
},
'/foo': {
target: '<other_url>' // 要使用 Proxy 包装的目标对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理)。
},
},
headers: {
'Access-Control-Allow-Origin': '*',
},
},
}
配置完成 重启项目运行 即可!