axios接口请求封装以及跨域代理配置(简单基础配置,后续可按需封装)
axios接口请求封装以及跨域代理配置(简单基础配置,后续可按需封装)原生axios接口请求npm install axios--S新建axios封装js文件request.js并引入axiosimport axios from 'axios'request.js:import axios from 'axios'//创建一个axios对象const instance = axios.create
·
axios接口请求封装以及跨域代理配置(简单基础配置,后续可按需封装)
原生axios接口请求
npm install axios--S
新建axios封装js文件request.js并引入axios
import axios from 'axios'
request.js:
import axios from 'axios'
//创建一个axios对象
const instance = axios.create({
baseURL:'/api',//会在发送请求时候拼接在url参数前面
timeout:5000,//请求5s超时
withCredentials: true // 是否允许带cookie这些
})
//全局请求拦截
//表示所有的网络请求都会先走这个方法
//我们可以在它里面添加一些自定义的内容
instance.interceptors.request.use(
function (config) {
console.group('全局请求拦截')
console.log(config)
console.groupEnd()
config.headers.token = '12345'//例如可以在请求头里面设置token值,token变量名前后端约定
return config;
},
function (err) {
return Promise.reject(err);
},
)
//全局响应拦截
//表示所有网络请求返回数据之后都会先执行此方法
//此处可以根据服务器返回的状态码做相应的处理
//如根据请求状态码404/401/500等做相应的处理,页面跳转等
instance.interceptors.response.use(function (response) {
console.log('全局响应拦截');
console.log(response)
console.groupEnd()
return response
}),function (err) {
return Promise.reject(err)
}
/*export function get (url,params) {
return axios.get(url,{
params
});
}*/
export function get (url,params) {
return instance.get(url,{
params
});
}
export function post (url,data) {
return instance.post(url,data);
}
export function del (url) {
return instance.delete(url);
}
export function put(url,data) {
return instance.put(url,data);
}
跨域配置:vue-cli2.0版本在config文件下的index.js进行配置、vue-cli3.0版本在vue.config.js下进行配置
vue-cli2.0
在module.exports下的dev下的proxyTable添加下列配置即可
proxyTable: {//用代理的方式实现跨域访问
'/': {
target: 'http://152.136.185.210:7878/api/m5', //设置你调用的接口域名和端口号
changeOrigin: true, //true表示允许跨域,有人说false也可以,我没试过
pathRewrite: {
'/api': '' //请求接口时直接用/api = http://123.456.789.123:8081/abc
}
}
},
3.0版本:在devServer下的module.exports下的proxy进行配置
devServer: {
port: 8089, // 端口号
open: false, // 配置自动启动浏览器
proxy: {
'/': {
target: 'http://152.136.185.210:7878/api/m5',
changeOrigin: true,
pathRewrite: {
'^/parkingServer': '/'
}
},
}
}
},
组件中接口请求使用
组件中引入request.js以,axios以及请求方法(按需引入)
import axios from 'axios'
import '../../api/request'
import {get} from '../../api/request'
组件完整代码:
<template>
<div>
<!--接口请求封装测试-->
<button @click="getAxiosMethods">未封装接口请求get</button>
<button @click="getMyAxiosMethods">封装接口请求get</button>
<div>
</div>
</div>
</template>
<script>
import axios from 'axios'
import '../../api/request'
import {get} from '../../api/request'
export default {
data(){
return{
}
},
methods:{
//接口请求测试
//未封装
getAxiosMethods(){
axios.get('http://152.136.185.210:7878/api/m5/home/multidata',{
params:{
},headers:{}
}).then(res=>{
console.log(res,'未封装')
})
},
//已封装
getMyAxiosMethods(){
//未设置baseUrl时候
/*get('http://152.136.185.210:7878/api/m5/home/multidata',{}).then(res=>{
console.log(res,'已封装')
})*/
//设置baseUrl时候
get('/home/multidata',{}).then(res=>{
console.log(res,'已封装')
})
},
}
}
</script>
<style>
</style>
请求效果:
具体可按照自己的需求对接口内容进行封装。
更多推荐
已为社区贡献4条内容
所有评论(0)