axios接口请求封装以及跨域代理配置（简单基础配置，后续可按需封装） |
您所在的位置：网站首页 › js请求头设置cookie › axios接口请求封装以及跨域代理配置（简单基础配置，后续可按需封装） |
axios接口请求封装以及跨域代理配置（简单基础配置，后续可按需封装）
|
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'组件完整代码： 未封装接口请求get 封装接口请求get 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,'已封装') }) }, } }请求效果： |
具体可按照自己的需求对接口内容进行封装。【本文地址】
今日新闻 |
推荐新闻 |