vant实战笔记

一般后台登录页面必须登录才可以使用的时候可以不用拦截器直接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

直接在vant文件夹里index.js里复制下面两行就行

然后是目录结构：

初始化项目后，入口文件应该是App.vue

一般使用路由占位符将这里填充这里设置的css样式就是全局样式了

不愧是组件化开发

引入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

请求拦截器，可以拦截请求信息和返回信息

调用方法：

import request from '@/request/request'
export default {
async created () {
    const { data: res } = await request.get('/index/index')
 
    console.log(res)
  }
}

一个新思想：

将所有的API接口调用封装到一个API.JS文件中，后续开发可以方便自己查询调用了什么接口