第二章：Api请求

介绍

API请求是连接前端UI和后端服务的关键部分,对于构建一个高效、可维护的管理系统至关重要，当前框架选择的是Axios库进行封装。封装库文件位于：src/utils/request.js 。

如何写自己的API接口

系统中，目前封装的api请求都在 src/api 目录下，当然api请求的目录不是固定的，使用的时候，可以写在任意目录，只需在文件中采取以下引用即可

import {request }from '@/utils/request.js'

我们来看一个案例：

import {request }from '@/utils/request.js'

export default {
  /**
   * 获取公告列表
   * @returns
   */
  getNoticeList(params = {}) {
    return request({
      url: '/core/system/notice',
      method: 'get',
      params
    })
  },

  /**
   * 保存网络图片
   * @returns
   */
  saveNetWorkImage(data = {}) {
    return request({
      url: '/core/system/saveNetworkImage',
      method: 'post',
      data
    })
  },

}

params 和 data 的区别

后端代码需要通过 $request->get 方式获取的，需要使用上面params的方式

后端代码需要通过 $request->post 方式获取的，需要使用上面案例中data的方式

在页面中如何调用

由于封装的 api 是 promise 类型，我们可以通过同步或者异步的方式进行调用

• 同步方式调用（同步表示该接口请求完了之后，才会继续运行后面的代码）：

// 引用api
import api from '@/api/index'

// 同步方法调用，外部必须用 async 标识
const getData = async (id) => {
  // 调用的时候 在方法前面用 await 标识
  const resp = await api.readData({ id })
  if (resp.code === 200) {
    Message.success(resp.message)
  }
}

• 异步方式调用（异步表示当前接口请求的过程中，后续代码也会继续执行，不会阻塞）：

// 引用api
import api from '@/api/index'

// 异步调用方式
const getData = (id) => {
  // 调用的时候 在方法后面通过  then catch  finally 等形式进行处理
  api.readData({ id }).then((resp) => {
    if (resp.code === 200) {
        Message.success(resp.message)
    }
  })
}

如何在header中加入自己的业务字段

在 src/utils/request.js 文件中，找到以下代码，在headers位置进行修改：

/**
 * @description 创建请求方法
 * @param service
 * @param externalService
 */
function createRequest(service, externalService) {
  return function (config) {
    const env = import.meta.env
    const token = tool.local.get(env.VITE_APP_TOKEN_PREFIX)
    const setting = tool.local.get('setting')
    const configDefault = {
      headers: Object.assign(
        {
          'Authori-zation': token,
          'Accept-Language': setting?.language || 'zh_CN',
          'Content-Type': get(
            config,
            'headers.Content-Type',
            'application/json;charset=UTF-8'
          )
        },
        config.headers
      ),

      timeout: 10000,
      data: {}
    }

    ......

  }
}

如何根据返回code的不同，增加自己的业务处理

在 src/utils/request.js 文件中，找到以下代码，在响应拦截器位置进行修改：

// HTTP response 拦截器
  service.interceptors.response.use(
    (response) => {
      if (
        (response.headers['content-disposition'] ||
          !/^application\/json/.test(response.headers['content-type'])) &&
        response.status === 200
      ) {
        return response
      } else if (response.data.size) {
        response.data.code = 500
        response.data.message = '服务器内部错误'
        response.data.success = false
      } else if (response.data.code && response.data.code !== 200) {
        // 后台为401进行跳转登录
        if (response.data.code === 401) {
          throttle(() => {
            Message.error({
              content: response.data.message || response.data.msg
            })
            tool.local.clear()
            router.push({ name: 'login' })
          })()
        } else {
          // 非401则弹出错误信息，可以自行增加判断业务
          Message.error({
            content: response.data.message || response.data.msg
          })
        }
      }
      return response.data
    },