返回
阅读【枫落迎雪、】的帖子
Axios封装
版块:开发交流
1.下载axios
cnpm install axios -S
2.新建request.js
import axios from 'axios';
import router from '../../router';
import qs from 'qs'; //传给后台的数据为form格式
import { Dialog } from 'vant';//这里使用了vant组件库
// 创建axios实例
const service = axios.create({
baseURL: 'URL', // api的base_url
timeout: 15000, // 请求超时时间
headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
// 请求头处理,设置传给后台的参数格式,有form和json格式,这样写是form格式,application/json是json格式
});
// request 拦截器
service.interceptors.request.use((config) => {
// 在发送请求之前z转换data格式
if (config.method === 'post') {
config.data = qs.stringify(config.data);//这一步就是通过qs将传给后台的数据格式设置为form格式
}
// 当通过登录接口后,会返回一个请求头数据,以后每个接口前面都要加这个请求头,用来判断是否登录
if (window.sessionStorage.getItem('tooken')) {
config.headers['x-auth-token'] = window.sessionStorage.getItem('tooken');
}
return config;
}, (error) => {
Dialog.confirm({
title: '提示',
message: '登录状态异常, 是否跳转到登录页?',
}).then(() => {
router.push('/login');
}).catch((error) => {
console.log(error);
});
});
// respone拦截器
service.interceptors.response.use((response) => {
// 通过登录接口以后会返回一个请求头参数,存储到session里面(浏览器关闭清空),用于后面的接口
if (response.headers['x-auth-token']) {
window.sessionStorage.setItem('tooken', response.headers['x-auth-token']);
}
if (response.data.code !== 0) {
Dialog.alert({ message: response.data.msg });
return Promise.reject(response);//response可以通过catch捕获信息
}
return response.data;
}, (error) => {
if (error.message) {
// 登录超时
if (error.message === 'Network Error') {
// Dialog.alert({message:'登录超时'})
router.push('/login');
}
}
// if (error.response.status === 404) {
// console.error('404错误!')
// } else {
// Dialog.alert({message: error.message})
// router.push( '/login' )
// }
return Promise.reject(error);
});
export default service;
3.在实际项目中使用
1.main.js中引入
import request from '@/api/request'
Vue.prototype.$axios = request
2.代码中使用
this.$axios({
url: 'url',
method: 'post',
data: {}
}).then(res => {
console.log(res.data)
}).catch(error=>{
console.log(error)
})
4.使用proxy解决跨域
1.在项目根目录下新建文件vue.config.js(vue-cli 3.0)
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8080', //对应后台接口
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
如果是2.0则在config/index.js下的dev添加proxyTable
2.修改前面的request.js
// 创建axios实例
const service = axios.create({
baseURL: '/api', // 修改的这里!!!
timeout: 15000, // 请求超时时间
headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' } // 请求头处理
})
3.重启项目
5.打包设置路径
上面这种在打包出来的index.html下看的访问接口路径是不对的,需要按以下代码重新修改一下baseUrl
// 创建axios实例
const service = axios.create({
baseURL: process.env.NODE_ENV === 'production' ? 'http://localhost:8088' : '/api', //process.env.NODE_ENV是node变量,production表示打包,testing表示测试
timeout: 15000, // 请求超时时间
headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' }, // 请求头处理
});
(adsbygoogle = window.adsbygoogle || []).push({});
2022-08-14 20:53:06 管理员【加精帖子】
原因:被加精,
- 0
- 0收藏帖子
- 0关注帖子
- 0
本贴有需要购买的内容
共 8 条评论
排序:时间 降序
请文明交流~
7楼
路过顶一下.
一股超强台风在海上形成,所到之处无不狂风暴雨遮天蔽日。这数吨海水裹挟着鱼虾贝石,宛若一头面目狰狞的怪兽,呼啸着向陆地扑来。 到了岸边,眼见那台风踌躇不前,尝试了几次,却又屡屡退返海面。 这时,只听得风眼中传出一句:“擦!忘记密码了!” +10枚云币
00
最后一页