首页
友链
导航
影视
壁纸
更多
关于我
统计
留言板
Search
1
js获取昨天今天明天日期
203 阅读
2
如何封装axios,并模块化
171 阅读
3
Vuex使用教程
130 阅读
4
el-upload自定义触发按钮及触发上传前判断
124 阅读
5
封装localStorage本地存储
110 阅读
web前端
vue
react
javascript
nuxt
typescript
indexDB数据库
美文欣赏
心情随笔
技术分享
其他
PHP
nodejs
博客api实战项目
登录
Search
标签搜索
web
vue
node项目实战
js
javascript
css
vuex
router
nginx
git
element
leaflet
dateFormat
map
date
axios
reg
正则表达式
Array
copy
辰漪
累计撰写
55
篇文章
累计收到
46
条评论
首页
栏目
web前端
vue
react
javascript
nuxt
typescript
indexDB数据库
美文欣赏
心情随笔
技术分享
其他
PHP
nodejs
博客api实战项目
页面
友链
导航
影视
壁纸
关于我
统计
留言板
搜索到
1
篇与
axios
的结果
2021-11-29
如何封装axios,并模块化
1. 安装axiosnpm install axios -s2. 导入axios// utils/request.js import axios from 'axios' export const baseURL = process.env.NODE_ENV === 'production' ? 'http://wrz521.top:8080/api/' : 'http://127.0.0.1:8080/api/' // 实例化axios const request = axios.create({ baseURL, // 基准路径 timeout: 10000 }) // 添加请求拦截器 request.interceptors.request.use(function (config) { // 在发送请求之前做些什么 if (config.url !== '/my/login') { config.headers.Authorization = getToken() } return config }, function (error) { // 对请求错误做些什么 return Promise.reject(error) }) // 添加响应拦截器 request.interceptors.response.use(function (response) { // 对响应数据做点什么 const { data } = response if (data.status === 401) { removeToken() router.push('/login') } return data }, function (error) { // 对响应错误做点什么 return Promise.reject(error) }) export default request3. 使用request封装api函数// api/user.js import request from '@/utils/request.js' export const login = function (username, password) { return request({ url: '/api/login', method: 'get', params: { username, password } }) }4. 在页面中调用api函数发送请求import { login } from '@/api/user.js' export default { data () { return { username: 'admin', password: '123456789' } }, mounted () { this.onLogin() }, methods: { async onLogin () { const res = await login(this.username, this.password) console.log(res, 'login result') } } }
2021年11月29日
171 阅读
3 评论
5 点赞