一般后台登录页面 必须登录才可以使用的时候 可以不用拦截器 直接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文件中,后续开发可以方便自己查询调用了什么接口