【axios】vue中axios的请求配置

这篇具有很好参考价值的文章主要介绍了【axios】vue中axios的请求配置。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

注意:本文实例化为TS版

1、axios概念

axios 是一个基于 promise 封装的网络请求库,它是基于 原生XHR 进行二次封装,可以说是 XHR 的一个子集,而 XHR 又是 Ajax 的一个子集

特点

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF

 2、接口列表

举例api文件夹在有个qrCode模块,里面存放我们要用的各个接口,那get,post等封装就放在request文件夹中,封装源码请参考第四点

import { get, post, formPost, exportExcel } from '@/request/index'

export function checkPdfRecord(params: object) {
  return get('/api/xxx', params)
}

export function updatePdf(params: object) {
  return post('/api/xxx', params)
}

3、调用实例

import {
    checkPdfRecord
  } from '@/api/qrCode';

checkPdfRecord(params).then(res => {
    }).finally(() => {
    })

4、源码 

核心文件展示

【axios】vue中axios的请求配置

 1、index.ts

import axios from 'axios'
import NProgress from 'nprogress'
import { requestInterceptors, requestInterceptorsCatch, responseInterceptors, responseInterceptorsCatch } from './interceptors'
import { getPromise, formPostPromise, postPromise, exportPromise, uploadPromise, postExportPromise } from './requestPromise'

import type { AxiosInstance, AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios'

import { getSession } from '@/utils/storage'
const baseUrl = '' // 你的接口请求地址
const service: AxiosInstance = axios.create({
  baseURL: baseUrl,
  timeout: 10 * 1000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  }
})
// 请求前的处理
const requestHook = function (config: AxiosRequestConfig) {
  NProgress.start()
  const token = getSession('token')

  if (token) {
    config.headers.Authorization = token
  }
}
// 请求前的错误处理
const requestCatchHook = function (error: AxiosError) {
  console.log(error, 'requestCatchHook') // for debug
}

// 过期回调
const responseExpireHook = function (response: AxiosResponse) {
  // 过期回调处理 此处写你自己的逻辑
  return response
}

// 响应完成回调
const responseFinishCallback = function (e: any) {
  NProgress.done()
}

// request interceptor
service.interceptors.request.use(requestInterceptors(requestHook), requestInterceptorsCatch(requestCatchHook))

// response interceptor
service.interceptors.response.use(
  responseInterceptors(responseExpireHook, responseFinishCallback),
  responseInterceptorsCatch(responseExpireHook, responseFinishCallback)
)

export const get = (url: string, params?: any) => getPromise(service, url, params) // get 请求
export const post = (url: string, params?: any) => postPromise(service, url, params) // post 请求
export const formPost = (url: string, params?: any) => formPostPromise(service, url, params) // form post
export const exportExcel = (url: string, params: any) => exportPromise(service, url, params) // 导出
export const upload = (url: string, files: Blob, config?: AxiosRequestConfig) => uploadPromise(service, url, files, config) // 上传
export const postExcel = (url: string, paramss: any) => postExportPromise(service, url, paramss)

export default service

2、interceptors.ts

import type { AxiosRequestConfig, AxiosResponse, AxiosError, AxiosPromise } from 'axios'
import { ElMessage } from 'element-plus'

// 下面响应结果的结构为普遍使用,但可根据你们公司自己规则来定
interface Result<T = any> {
  code: number | string
  msg?: string
  message?: string
  data: T
}

export const requestInterceptors =
  (requestHook: Function) =>
  (config: AxiosRequestConfig): AxiosRequestConfig => {
    requestHook && requestHook(config)
    return config
  }

export const requestInterceptorsCatch =
  (requestCatchHook: Function) =>
  (error: AxiosError): AxiosPromise => {
    requestCatchHook && requestCatchHook(error)
    return Promise.reject(error)
  }

export const responseInterceptors =
  (responseHook: Function, responseCallback: Function) =>
  (response: AxiosResponse): any => {
    responseCallback && responseCallback(response)
    const res: Result = response.data
    if (response.config.responseType == 'blob') {
      return Promise.resolve(response)
    } else {
      if (res === void 0 || res === null || !res) {
        const message: string = `Error:${response.config.url} response.data is null or does not exist !`
        ElMessage.error(message)
        return Promise.reject(message)
      // 接口响应code码我默认1或者200是正常响应,这个值根据你们后端的逻辑来定噢
      } else if (res.code == 1 || res.code === 200) {
        // 正确响应
        res.data === null && console.log(response)
        return Promise.resolve(response)
      } else {
        return Promise.resolve(response)
      }
    }
  }

export const responseInterceptorsCatch =
  (responseCatchHook: Function, responseCallback: Function) =>
  (error: AxiosError): AxiosPromise => {
    responseCallback && responseCallback(error)
    if (error && error.response) {
      // 以下外部状态码是常规普遍使用的噢~你也可以根据你们公司自己逻辑来定
      switch (error.response.status) {
        case 400:
          error.message = '请求错误(400)'
          break
        case 401:
          error.message = '未授权,请重新登录(401)'
          break
        case 403:
          if (error.response.data && error.response.data.code === 5001) {
            error.message = error.response.data.msg
          } else {
            error.message = '拒绝访问(403)'
          }
          break
        case 404:
          error.message = '请求出错(404)'
          break
        case 408:
          error.message = '请求超时(408)'
          break
        case 500:
          error.message = '服务器错误(500)'
          break
        case 501:
          error.message = '服务未实现(501)'
          break
        case 502:
          error.message = '网络错误(502)'
          break
        case 503:
          error.message = '服务不可用(503)'
          break
        case 504:
          error.message = '网络超时(504)'
          break
        case 505:
          error.message = 'HTTP版本不受支持(505)'
          break
        default:
          error.message = `连接出错(${error.response.status})!`
      }
    }

    if (error.message && error.message.indexOf('timeout') !== -1) {
      error.message = '请求超时'
    }

    if (error.response?.data && error.response.data.code === 5001) {
      // 过期
      return responseCatchHook && responseCatchHook(error)
    }

    error.message && ElMessage.error(error.message)

    return Promise.reject({ ...error.response })
  }

3、requestPromise.ts

import type {
  AxiosInstance,
  AxiosRequestConfig
} from 'axios'

// 下面响应结果的结构为普遍使用,但可根据你们公司自己规则来定
interface Result<T = any> {
  code: number | string
  msg?: string
  message?: string
  data: T
}

// 默认格式下的post
export const postPromise = (service: AxiosInstance, url: string, params: any): Promise < Result > =>
  new Promise((resolve, reject) => {
    service
      .post(url, params)
      .then((response) => resolve(response.data))
      .catch((err) => {
        reject(err)
      })
  })

// 表单格式下的post
export const formPostPromise = (service: AxiosInstance, url: string, params: any): Promise < any > =>
  new Promise((resolve, reject) => {
    const formdata = new FormData()
    for (const [k, v] of Object.entries(params)) {
      formdata.append(k, v as string)
    }
    service
      .post(url, formdata)
      .then((response) => {
        resolve(response.data)
      })
      .catch((err) => {
        reject(err)
      })
  })

// 默认格式下的get
export const getPromise = (service: AxiosInstance, url: string, params: any): Promise < Result > =>
  new Promise((resolve, reject) => {
    service
      .get(url, {
        params
      })
      .then((response) => resolve(response.data))
      .catch((err) => {
        reject(err)
      })
  })

// 默认格式下的导出文件 post类型
export const postExportPromise = (service: AxiosInstance, url: string, params: any): Promise < any > =>
  new Promise((resolve, reject) => {
    service({
        method: 'post',
        url: url,
        data: {
          ...params
        },
        responseType: 'blob'
      })
      .then((response) => {
        const res = response.data
        const filename = decodeURI(response.headers['content-disposition'].split(';')[1].split('filename=')[1])
        resolve({
          res,
          filename
        })
      })
      .catch((err) => {
        reject(err)
      })
  })

// 默认格式下的导出文件 get类型
export const exportPromise = (service: AxiosInstance, url: string, params: any): Promise < any > =>
  new Promise((resolve, reject) => {
    service({
        method: 'get',
        url: url,
        params,
        responseType: 'blob'
      })
      .then((response) => {
        const res = response.data
        try {
          const filename = decodeURI(response.headers['content-disposition'] ?.split(';')[1].split('filename=')[1])
          let blob = new Blob([res])
          let downloadElement = document.createElement('a')
          let href = window.URL.createObjectURL(blob) //创建下载的链接
          downloadElement.href = href
          downloadElement.download = filename //下载后文件名
          document.body.appendChild(downloadElement)
          downloadElement.click() //点击下载
          document.body.removeChild(downloadElement) //下载完成移除元素
          window.URL.revokeObjectURL(href) //释放掉blob对象
          resolve({
            res,
            filename
          })
        } catch (error) {
          console.log(error)
          reject({
            res,
            filename: ''
          })
        }
      })
      .catch((err) => {
        reject(err)
      })
  })

// 表单格式下的上传文件
export const uploadPromise = (service: AxiosInstance, url: string, files: Blob, config?: AxiosRequestConfig): Promise < any > =>
  new Promise((resolve, reject) => {
    config && (config.headers['Content-Type'] = 'multipart/form-data')

    service
      .post(url, files, config)
      .then((res) => {
        resolve(res.data)
      })
      .catch((err) => {
        console.log(err, 'err')
        reject(err)
      })
  })

5、拓展知识

1、Fetch

Fetch是在 ES6 出现的,它使用了 ES6 提出的 promise 对象。它是 XMLHttpRequest 的替代品。

  • 使用 promise,不使用回调函数。
  • 采用模块化设计,比如 rep、res 等对象分散开来,比较友好。
  • 通过数据流对象处理数据,可以提高网站性能。

2、Ajax

Ajax 是一个技术统称,是一个概念模型,它囊括了很多技术,并不特指某一技术,它很重要的特性之一就是让页面实现局部刷新,是fetch和XMLHttpRequest的父级

3、多环境如何配置

根据环境变量文件来噢(开发模式或生产模式根据package.json)

【axios】vue中axios的请求配置

package.json文件

"scripts": {
    "dev": "vite --mode development",
    "test": "vite --mode release",
    "buildTest": "vite build --mode release",
    "buildProduct": "vite build --mode production"
}

---本篇还是相当实用,喜欢就一键三连吧~欢迎评论---文章来源地址https://www.toymoban.com/news/detail-497040.html

到了这里,关于【axios】vue中axios的请求配置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Vue框架】Vue2中axios发送请求—安装axios、配置全局域名、传递参数、axios原理之Promise(什么是Promise、使用原因、基本使用、相关API、async与await使用)

    官网: https://www.axios-http.cn/ 1.1.1 安装axios库 安装 axios 通信库: npm install axios -S 1.1.2 在全局中引入axios库 全局在main.js中引入axios: import axios from \\\'axios\\\' 1.1.3 挂在原型对象 Vue.prototype.$axios = axios; 将 axios 挂载到Vue原型对象中,实现数据共享,节约内存空间。 此时在任何页面都可

    2024年02月05日
    浏览(51)
  • vue3【使用axios并封装axios请求】

    第一步:安装axios 第二步:编写请求文件 新建request.js 简单的axios封装,里面相关提示信息,自己可以引入element-plus去添加

    2024年02月04日
    浏览(64)
  • 【vue】利用axios发送请求

    根组件App.vue 路由配置 main.js配置 固定写法,复制粘贴即可 请求失败时,控制台输出的对象 请求成功时,控制台输出的对象 保存登录返回的token 获取token const token=response.data.token 保存到LocalStorage中:永久存储,只有不手动删除,永久保存到LocalStorage中 window.localStorage.setItem(‘

    2024年02月05日
    浏览(64)
  • Vue3 网络请求——axios 高级用法之 axios 拦截器实战与并发请求

    Axios 是一个流行的基于 Promise 的 HTTP 客户端库,用于在浏览器和 Node.js 中发出 HTTP 请求。 Axios 还支持请求和响应的拦截器。接下来通过这篇文章,我们一起来学习和了解一下 Axios 拦截器和并发请求,通过实际代码来介绍如何使用 Axios 拦截器。 拦截器会在发生响应请求之前和

    2024年02月10日
    浏览(45)
  • vue axios实现下载文件及responseType:blob注意事项

    需要使用axios和js-file-download组件 注意事项: responseType:blob表示服务器返回的响应类型是二进制流,一般用于文件、视频下载等场景。正常情况下后端返回二进制数据,当后端服务器出错时,往往会以json形式返回错误信息,例如{\\\"code\\\":500,\\\"msg\\\":\\\"未知异常\\\"}。因为设置了blob类型,

    2024年02月11日
    浏览(46)
  • Vue3的axios请求封装,请求拦截,相应拦截

    对于三者放在Service.js中封装,方便使用 axios.create  的作用是创建一个新的  axios  实例,该实例可以具有自定义配置。通过使用  axios.create ,您可以为任何 API 生成一个客户端,并在使用同一客户端的任何调用中重复使用相同的配置。这使得在应用程序中使用多个 API 时更加

    2024年02月03日
    浏览(47)
  • Vue3——Axios(网络请求库)

    希望大家看完觉得有用的话点赞、关注和收藏,感谢!!! axios可以在浏览器和node里面用 原生的问题:无法在node里使用,fetch是在浏览器里使用的。(但是原生可以帮助我们理解。) 1.安装axios 2.创建service文件夹并在里面创建index.js,import axios,然后创建封装axios的类并导出创建

    2024年02月05日
    浏览(39)
  • Vue3+Axios网络请求封装

    本文将详细介绍一款基于Axios+Typescript封装的网络请求库,该库可以自动携带token、拦截请求和响应等操作,并能够处理请求重复、超时和错误状态码等异常情况。 Axios 是基于Node.js的HTTP客户端,也是一款广泛使用的网络请求库。它具有使用简单、可扩展性高、易用性好等特点

    2024年02月07日
    浏览(50)
  • axios 统一配置请求超时时间

    你可以通过配置 axios 的实例来统一设置请求的超时时间。以下是一个示例: 首先,安装 axios(如果还没有安装): 然后,在你的 Vue 项目中,你可以创建一个 axios 的实例,并设置默认的超时时间,然后将它应用到所有的请求。例如,你可以在项目的某个地方(例如 main.js )

    2024年02月03日
    浏览(38)
  • html+Vue+封装axios实现发送请求

    在html中使用Vue和Axios时,可以在HTML中引入Vue库和Axios库,然后使用Vue的语法和指令来创建Vue组件和模板。在Vue组件中,你可以使用Axios发送HTTP请求来获取数据,并将数据绑定到Vue模板中进行展示。 这段代码在HTML中使用了Vue,使用axios并设置了请求拦截器和响应拦截器。它实现

    2024年02月13日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包