前端开发之axios请求封装详细讲解

前言

在vue项目中，和后台交互获取数据这块，通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等

1、安装axios

‘

npm install axios

2、创建公共文件request

3、导入axiso

import axios from 'axios'
qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。可以进行对象与字符串之间的一个转换。是axios中自带的，也可以单独安装使用
import qs from 'qs'

4、初始化axios

/**
 * @description axios初始化
 */
const instance = axios.create({
    
    
  baseURL,
  timeout: requestTimeout,
  headers: {
    
    
    'Content-Type': contentType
  }
})

5、axios请求拦截器

instance.interceptors.request.use(
  (config) => {
    
    
    const token = store.getters['user/token']
    if (token) config.headers['token'] = token
    if (
      config.data &&
      config.headers['Content-Type'] ===
        'xxxxxxxxxxxx'
    ) {
    
    
      config.data = qs.stringify(config.data)
    }
    return config
  },
  (error) => {
    
    
    return Promise.reject(error)
  }
)

6、axios响应拦截器

/**
 * @description axios响应拦截器
 */
instance.interceptors.response.use(
  (response) => handleData(response),
  (error) => {
    
    
    const {
    
     response } = error
    if (response === undefined) {
    
    
    //封装的全局ElMessage
      gpt.$baseMessage(
        '未可知错误，大部分是由于后端不支持跨域CORS或无效配置引起',
        'error'
      )
      return {
    
    }
    } else return handleData(response)
  }
)

7、handleData：处理请求后来的response

const handleData = ({
     
      config, data, status, statusText }:{
     
      config:any, data:any, status:any, statusText:any }) => {
    
    
  // 若data.code存在，覆盖默认code
  let code:any = data && data[statusName] ? data[statusName] : status
  switch (code) {
    
    
    case 200:
      // 例如响应内容：
      // 错误内容：{ code: 1, msg: '非法参数' }
      // 正确内容：{ code: 200, data: {  }, msg: '操作正常' }
      // return data
      return data
    case 401:
      store
        .dispatch('user/resetAll')
        .then(() =>
          router.push({
    
     path: '/login', replace: true })
        )
      break
    case 403:
      router.push({
    
     path: '/403' })
      break
  }
  // 异常处理
  // 若data.msg存在，覆盖默认提醒消息
  const errMsg = `${
      
      config.url} 后端接口 ${
      
      code} 异常：${
      
      
    data && data[messageName]
      ? data[messageName]
      : CODE_MESSAGE[code]
      ? CODE_MESSAGE[code]
      : statusText
  }`
  gpt.$baseMessage(errMsg, 'error', false, 'vab-hey-message-error')
  const err = new Error(errMsg)
  if (checkNeed()) {
    
    
    store.dispatch('errorLog/addErrorLog', {
    
    
      err,
      url: config.url
    })
  }

  return Promise.reject(err)
}

8、CODE_MESSAGE：code信息

const CODE_MESSAGE:Record<string, string> = {
    
    
  200: '服务器成功返回请求数据',
  201: '新建或修改数据成功',
  202: '一个请求已经进入后台排队(异步任务)',
  204: '删除数据成功',
  400: '发出信息有误',
  401: '用户没有权限(令牌、用户名、密码错误)',
  403: '用户得到授权，但是访问是被禁止的',
  404: '访问资源不存在',
  406: '请求格式不可得',
  410: '请求资源被永久删除，且不会被看到',
  500: '服务器发生错误',
  502: '网关错误',
  503: '服务不可用，服务器暂时过载或维护',
  504: '网关超时'
}