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

目录
  • 引言
  • 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网络库封装的资料请关注我们其它相关文章!

(0)

相关推荐

  • axios库的核心代码解析及总结

    目录 一.关键步骤 1.创建axios对象 2.请求 二.Axios类 1.基础属性 2.辅助方法 3.request方法 三.adpter适配器 1.xhradpter 2.httpadpter 一.关键步骤 1.创建axios对象 axios库导出的对象是一个已经被创建好的axios对象,它本质上是一个方法,可以直接接收一个config配置参数进行请求.在库的入口处,即可看到如下代码: function createInstance(defaultConfig) { // 传入默认配置生成a

  • Vue3 (五)集成HTTP库axios详情

    目录 一.安装 axios 二.axios的使用 1.在主页中引用 axios 2.重新启动服务 3.何为跨域? 4.解决跨域问题 5.重新启动后端服务,再次访问 三.结论 一.安装 axios npm install axios@0.21.0 --save 二.axios的使用 1.在主页中引用 axios 在Vue3新增了setup初始化方法,所以我们在这里开始使用并测试,示例代码如下: <template> <a-layout> <a-layout-sider widt

  • VUE中使用HTTP库Axios方法详解

    Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中 安装Axios模块 在Vue中使用,最好安装两个模块axios 和vue-axios $npm install axios vue-axios --save 然后引用并使用模块 import Axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios,Axios) 在组件中通过如下方式进行使用 this.$http[meth

  • 解析vue 3.0 使用axios库发起 post get 的配置过程

    get post 请求开发中最普通最常见的请求方式 但是在vue 中如何实现呢 这里记录一下配置过程, 首先在src 目录下新建 api 文件夹 在文件夹下新建 request.js 请求基类 // 请求配置过程的代码是这样的 import axios from "axios"; const requests = axios.create({ // 配置对象 baseURL: "", // 这里写自己的域名 timeout: 5000, // withCredent

  • Vue axios库发送请求的示例介绍

    目录 1.什么是axios 2.axios请求图例 3.使用 async 和 await 配合 axios 发起请求 4.使用解构赋值 5.使用 axios.get() axios.post() 来简化请求过程 1.什么是axios Axios,是一个基于 promise 的网络请求库,作用于node.js和浏览器中,它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中). 使用方式如下: <script> //调用axios方法得到的返回值是 promise 对象

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

    目录 引言 axios使用 配置请求基本信息 设置请求拦截器 设置请求响应器 项目中使用 结尾 引言 首先Axios,一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 网络请求库无疑是项目开发中最基础的建设了,在这个前后端分离的时代,市面上有不少优秀的请求库,其中Axios就是优秀代表之一. 拦截请求和响应 转换请求数据和响应数据 自动转换 JSON 数据 客户端支持防御 XSRF 支持 PromiseAPI 以上是axios的优秀点 axios使用 本文是基于

  • Spring Boot + Vue 前后端分离开发之前端网络请求封装与配置

    前端网络访问,主流方案就是 Ajax,Vue 也不例外,在 Vue2.0 之前,网络访问较多的采用 vue-resources,Vue2.0 之后,官方不再建议使用 vue-resources ,这个项目本身也停止维护,目前建议使用的方案是 axios.今天松哥就带大家来看看 axios 的使用. axios 引入 axios 使用步骤很简单,首先在前端项目中,引入 axios: npm install axios -S 装好之后,按理说可以直接使用了,但是,一般在生产环境中,我们都需要对网络请

  • Vue简单封装axios网络请求的方法

    目录 Vue简单封装axios网络请求 一.utils下的httpUtils.js: 二./api下的path.js: 三./api下的index.js: 四.组件中引入并请求: Vue简单封装axios网络请求 一.utils下的httpUtils.js: import axios from 'axios'; import querystring from 'querystring'; const errorHandler = (status, info) => { switch(status

  • Vue浅析axios二次封装与节流及防抖的实现

    目录 什么是axios axios请求图例 axios的二次封装 为什么要进行二次封装 防抖与节流 什么是axios Axios,是一个基于 promise 的网络请求库,作用于node.js和浏览器中,它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中). 使用方式如下: <script> //调用axios方法得到的返回值是 promise 对象 axios({ //请求方式 method: 'get', // 请求地址 url: 'http://www.liu

  • vue中axios请求的封装实例代码

    axios Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中, 也是vue官方推荐使用的http库:封装axios,一方面为了以后维护方便,另一方面也可以对请求进行自定义处理 安装 npm i axios 封装 我把axios请求封装在http.js中,重新把get请求,post请求封装了一次 首先,引入axios import axios from 'axios' 设置接口请求前缀 一般我们开发都会有开发.测试.生产环境,前缀需要加以区分,我们利用

  • 详解vue中axios请求的封装

    axios Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中, 也是vue官方推荐使用的http库:封装axios,一方面为了以后维护方便,另一方面也可以对请求进行自定义处理 安装 npm i axios 封装 我把axios请求封装在http.js中,重新把get请求,post请求封装了一次 首先,引入axios import axios from 'axios' 设置接口请求前缀 一般我们开发都会有开发.测试.生产环境,前缀需要加以区分,我们利用

  • vue项目中axios请求网络接口封装的示例代码

    每个项目网络请求接口封装都是很重要的一块,第一次做Vue项目,我们的封装方法如下: (1).新建一个js文件,取名api.js (2).引入 axios ,mint-UI ,如下图: import axios from 'axios' import {MessageBox, Toast} from 'mint-ui' axios.defaults.timeout = 50000//默认请求超时时间 axios.defaults.headers = '请求头' (2).封装get方法 export

  • vue中数据请求axios的封装和使用

    目录 一.什么是axios 二.下载方式 三.拦截器 四.请求的封装 五.使用 一.什么是axios 简单的来说,​Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中,我们在项目中会经常用axios请求接口来获取数据. 二.下载方式 直接在当前使用的项目中打开终端: npm install axios --save 或者yarn  add  axios 三.拦截器 拦截器就是在数据请求的过程中,拦截请求或者拦截响应的技术 请求拦截器:就是在发送请求的时

  • vue axios二次封装的详细解析

    axios的二次封装 视频讲解 npm i axios //下载axios 首先创建两个文件夹在src目录下:api和config 先在config文件夹下建立一个index.js:具体代码如下: export default{ baseUrl:{ dev: "http://localhost:8082/mhy", //开发环境 pro: "http://xxx.xx.xx.xx:8082/mhy", //上线环境 } } 当然我这里是因为我主要写后端springb

随机推荐