首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue开发Axios网络库封装

vue日常开发基础Axios网络库封装

2022-08-19 09:00:24 作者：云边刘十三

这篇文章主要为大家介绍了vue日常开发基础Axios网络库封装示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

引言

首先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,
  // 超时
  timeout: 20000
})

设置请求拦截器

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

是否需要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',
      duration: 5 * 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

以上就是vue日常开发基础Axios网络库封装的详细内容，更多关于vue开发Axios网络库封装的资料请关注脚本之家其它相关文章！