接口定义

接口参数和返回值需要定义为强类型，特殊情况可以用any

  1. import { createAPI } from '@/utils/request'
  3. // 用户列表
  4. export function list(params: any): Promise<any> {
  5.   return createAPI('/users', 'get', params)
  6. }
  8. // 用户添加
  9. export function add(body: any): Promise<any> {
  10.   return createAPI('/users', 'post', null, body)
  11. }
  13. // 用户修改
  14. export function edit(id: number, body: any): Promise<any> {
  15.   return createAPI(`/users/${id}`, 'put', null, body)
  16. }
  18. // 用户删除
  19. export function remove(id: number): Promise<any> {
  20.   return createAPI(`/users/${id}`, 'delete')
  21. }
  23. // 用户详情
  24. export function detail(id: number): Promise<any> {
  25.   return createAPI(`/users/${id}`, 'get')
  26. }

组件中读取数据

  1. // 1 导入接口包
  2. import { list, remove } from '@/api/users'
  4. // 2 定义接收对象
  5. private listData: Page<User> = {
  6.     counts: 0,
  7.     page: 0,
  8.     items: [],
  9.     pages: 0,
  10.     pagesize: 0
  11.   }
  13. // 3 采用 promise 方式读取
  14. private async getList() {
  15.   const { data } = await list()
  16.   this.listData = data
  17. }

request 参考

采用 axios 二次封装，更多处理你可以在 interceptors 中实现。

  1. import axios, { AxiosRequestConfig, Method } from 'axios'
  2. import { Message /*, MessageBox*/ } from 'element-ui'
  3. import { getToken } from '@/utils/cookies'
  5. const service = axios.create({
  6.   baseURL: '/api',
  7.   timeout: 5000 * 5
  8. })
  9. service.defaults.headers.post['Content-Type'] = 'application/json'
  11. // Request interceptors
  12. service.interceptors.request.use(
  13.   config => {
  14.     const token = getToken()
  15.     if (token) {
  16.       config.headers['Authorization'] = token
  17.     }
  19.     return config
  20.   },
  21.   error => {
  22.     Promise.reject(error)
  23.   }
  24. )
  26. // Response interceptors
  27. service.interceptors.response.use(
  28.   response => response,
  29.   error => {
  30.     Message({
  31.       message: error.response.data.errMessage || error.message,
  32.       type: 'error',
  33.       duration: 5 * 1000
  34.     })
  35.     return Promise.reject(error)
  36.   }
  37. )
  39. export const createAPI = (
  40.   url: string,
  41.   method: Method = 'get',
  42.   params: any = undefined,
  43.   data: any = undefined
  44. ) => {
  45.   const config: AxiosRequestConfig = {}
  46.   config.url = url
  47.   config.method = method
  48.   if (params !== undefined) {
  49.     config.params = params
  50.   }
  51.   if (method != 'get' && data !== undefined) {
  52.     config.data = data
  53.   }
  55.   return service(config)
  56. }
  58. export const createFormAPI = (url: string, method: Method, data: any) => {
  59.   const config: AxiosRequestConfig = {}
  60.   config.url = url
  61.   config.method = method
  62.   config.data = data
  63.   config.headers = {
  64.     'Cache-Control': 'no-cache',
  65.     // 'Content-Type': 'application/x-www-form-urlencoded'
  66.     'Content-Type': 'multipart/form-data'
  67.   }
  68.   // config.responseType = 'json'
  69.   // config.transformRequest = [
  70.   //   function(data) {
  71.   //     let ret = ''
  72.   //     for (let it in data) {
  73.   //       ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
  74.   //     }
  75.   //     return ret
  76.   //   }
  77.   // ]
  78.   return service(config)
  79. }
  81. export default service