封装请求

# 封装请求

有了 axios 模块之后，可以有以下操作

封装接口请求模块
封装登录请求动作

# 封装接口请求模块

创建 api 文件夹，创建 sys.js：

import request from '@/utils/request'

/**
 * 登录
 */
export const login = data => {
  return request({
    url: '/sys/login',
    method: 'POST',
    data
  })
}

1
2
3
4
5
6
7
8
9
10
11
12

# 封装登录请求动作

该动作我们期望把它封装到 vuex 的 action 中

# 实现实例

在 store 下创建 modules 文件夹，创建 user.js 模块，用于处理所有和 用户相关 的内容（此处需要使用第三方包 md5 ）：

import { login } from '@/api/sys'
import md5 from 'md5'
export default {
  namespaced: true,
  state: () => ({}),
  mutations: {},
  actions: {
    login(context, userInfo) {
      const { username, password } = userInfo
      return new Promise((resolve, reject) => {
        login({
          username,
          password: md5(password)
        })
          .then(data => {
            resolve()
          })
          .catch(err => {
            reject(err)
          })
      })
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

在 store/index 中完成注册：

import { createStore } from 'vuex'
import user from './modules/user.js'
export default createStore({
  modules: {
    user
  }
})

1
2
3
4
5
6
7

#Axios

上次更新: 2024/08/14, 04:14:33

← 封装 axios 模块拦截器→