一般后台登录页面 必须登录才可以使用的时候 可以不用拦截器 直接if判断是否登录
而电商项目中,因为有些功能不需要登录 有些功能需要登录 所以设置响应拦截器
但是感觉又不是这样
不懂
export const 导出模块
api.js 外面都这么写
方便同一个管理
按需导入
一个很重要的思想!不需要很循规蹈矩遵循某一个规则!
按照自己所喜欢!所熟悉的规则去遵循!
例如API.js 如果能适应 肯定是一个很好的方法 但是若不能熟悉 不用也不会影响项目效果
vant按需自动导入:
先安装babel-plugin-import
cnpm i babel-plugin-import
然后配置:
babel.config.js
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
}
然后创建一个专门用来导入组件的文件夹 vant 并创建index.js
然后在main.js入口函数里引入vant组件
// 引入vant组件
import '@/vant'
因为vant比较麻烦 。 可能 每个组件需要引入样式,用了这个就不需要引入样式了,直接导入组件就ok
<br/>
直接在vant文件夹里index.js里复制下面两行就行
<br/>
<br/>
然后是目录结构:
初始化项目后,入口文件应该是App.vue
<br/>
一般使用路由占位符将这里填充 这里设置的css样式就是全局样式了
不愧是组件化开发
<br/>
<br/>
引入axios 在main.js入口文件引入:
import axios from 'axios'
Vue.prototype.$http = axios
如果需要 可以设置基本地址:
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
// import axios from 'axios'
import axios from 'axios'
const instance = axios.create({
baseURL: 'http://kumanxuan1.f3322.net:8001',
timeout: 5000
})
// 拦截器
instance.interceptors.request.use(
config => {
// 发请求之前执行这个函数
// 可以判断用户有没有登录 如果没有登录 就直接return 请求就不会发送出去
console.log(config) // 本次请求的信息
return config
},
err => {
return Promise.reject(err)
}
)
instance.interceptors.response.use(
res => {
// 在接收到响应之前 在执行than方法之前
// 先执行这个函数
console.log(res) // 本次服务器响应的信息
return res // 返回的这个res 被then方法的res形参接受了
},
err => {
return Promise.reject(err)
}
)
export default instance
请求拦截器,可以拦截请求信息和返回信息
<br/>
调用方法:
import request from '@/request/request'
export default {
async created () {
const { data: res } = await request.get('/index/index')
console.log(res)
}
}
一个新思想:
将所有的API接口调用封装到一个API.JS文件中,后续开发可以方便自己查询调用了什么接口
最后一次更新于2021-01-29
0 条评论