基础版Axios网络库封装——满足日常开发

基础版Axios网络库封装——满足日常开发

axios介绍

首先把Axios的地址贴上来www.axios-js.com/,Axios ,一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

网络请求库无疑是项目开发中最基础的建设了,在这个前后端分离的时代,市面上有不少优秀的请求库,其中Axios就是优秀代表之一。

  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF
  • 支持 PromiseAPI

以上是axios的优秀点

axios使用

本文是基于Vue项目去使用Axios:

第一步安装 npm install axios 已经迈出了一步,打开我们的package.json文件发现已经安装成功,

接下来我们去具体实现功能:

  1. 配置请求基本信息

  2. 设置请求拦截器

  3. 设置请求响应器

实现以上三个方法

配置请求基本信息

//request.js
import axios from 'axios'


// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项,表示请求URL公共部分
  baseURL: process.env.VUE_APP_BASE_API,
  // 超时
  timeout20000
})

设置请求拦截器

在发送请求之前我们总得做一些事情:

  • 是否需要token(如需要的话将每个请求携带token)
  • 如果是get需要传递参数的话需要将特殊字符过滤掉
// request拦截器
service.interceptors.request.use(
  config => {
    // 是否需要设置 token
    const isToken = (config.headers || {}).isToken === false
    if (getToken() && !isToken) {
      config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
    }
    // get请求映射params参数
    if (config.method === 'get' && config.params) {
      let url = config.url + '?'
      for (const propName of Object.keys(config.params)) {
        const value = config.params[propName]
        var part = encodeURIComponent(propName) + '='
        if (value !== null && typeof value !== 'undefined' && value !== '') {
          if (typeof value === 'object') {
            for (const key of Object.keys(value)) {
              let params = propName
              // let params = propName + '[' + key + ']'
              var subPart = encodeURIComponent(params) + '='
              url += subPart + encodeURIComponent(value[key]) + '&'
            }
          } else {
            url += part + encodeURIComponent(value) + '&'
          }
        }
      }
      url = url.slice(0-1)
      config.params = {}
      config.url = url
    }
    return config
  },
  error => {
    console.log(error)
    Promise.reject(error)
  }
)

补充:

encodeURIComponent方法是js提供的一个方法,把字符串作为 URI 组件进行编码,该方法不会对 ASCII 字母和数字进行编码,主要作用是过滤掉特殊字符

设置请求响应器

当数据回来的时候,我们也得干一点事情:

  • 判断登录状态
  • 错误处理
import { Message, MessageBox, Notification } from 'element-ui'
import errorCode from '@/utils/errorCode'


// 响应拦截器
service.interceptors.response.use(
  res => {
    // 未设置状态码则默认成功状态
    const code = Number(res.data.code) || 200
    // 获取错误信息
    const msg = errorCode[code] || res.data.msg || errorCode['default']
    if (code === 401) {
      MessageBox.confirm(
        '登录状态已过期,您可以继续留在该页面,或者重新登录',
        '系统提示',
        {
          confirmButtonText'重新登录',
          cancelButtonText'取消',
          type'warning'
        }
      ).then(() => {
        store.dispatch('LogOut').then(() => {
          location.href = '/index'
        })
      })
    } else if (code === 500) {
      Message({
        message: msg,
        type'error'
      })
      return Promise.reject(new Error(msg))
    } else if (code !== 200) {
      Notification.error({
        title: msg
      })
      return Promise.reject(msg)
    } else {
      return res.data
    }
  },
  error => {
    console.log('err' + error)
    let { message } = error
    if (message == 'Network Error') {
      message = '后端接口连接异常'
    } else if (message.includes('timeout')) {
      message = '系统接口请求超时'
    } else if (message.includes('Request failed with status code')) {
      message = '系统接口' + message.substr(message.length - 3) + '异常'
    }
    Message({
      message: message,
      type'error',
      duration5 * 1000
    })
    return Promise.reject(error)
  }
)

export default {
  '401''认证失败,无法访问系统资源',
  '403''当前操作没有权限',
  '404''访问资源不存在',
  'default''系统未知错误,请反馈给管理员'
}

项目中使用

import request from '@/utils/request'
// 登录方法
export function login(username, password, code, uuid{
  return request({
    url'/auth/admin/login',
    method'post',
    data: { username, password, code, uuid }
  })
}

结尾

此时我们的网络库的基础版已经实现,把service进行一个导出,就可以在项目中使用了,这个版本基本可以满足日常项目的开发,如果需要其他设置可以另行添加。 扩展:

  • axios取消重复请求
  • axios无感token刷新

以上也是比较常见的场景,在本文注重实现基础版网络库,日后需要对以上的场景进行探索。完结撒花~😉

export default service

文章出自:https://juejin.cn/post/7133079220221116423

作者:云边刘十三


原文始发于微信公众号(前端24):基础版Axios网络库封装——满足日常开发

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/216676.html

(0)
李, 若俞的头像李, 若俞

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!