axios封装-reques.js

1. 简介

参考网址:http://www.axios-js.com/zh-cn/docs/#axios-create-config

  • 在现代的前端开发中,我们经常需要与后端API进行交互,而axios是其中的一个非常流行的选择。为了简化请求的处

理和增强代码的可读性,我们经常需要对axios进行封装。

  • 我们会使用 axios 来请求后端接口, 一般都会对 axios 进行一些配置 (比如: 配置基础地址,请求响应拦截器等等)

  • 一般项目开发中, 都会对 axios 进行基本的二次封装, 单独封装到一个模块中, 便于使用

2. 封装axio的好处

  1. 代码复用:通过封装,我们可以将常用的请求参数、配置等封装为一个函数或模块,方便在其他地方复用。
  2. 增强可读性:通过封装,我们可以为每个请求定义一个清晰的函数名,使得代码更加易于阅读和理解。
  3. 简化代码:通过封装,我们可以将复杂的请求逻辑和参数处理抽象到一个函数中,使代码更加简洁。
  4. 统一管理错误:在封装中,我们可以统一处理请求中的错误,提供一致的错误处理机制。

3. 封装axio

目标:将 axios 请求方法,封装到 request 模块

  1. 安装 axios
npm i axios
// 或
yarn add axios
  1. 新建 utils/request.js 封装 axios 模块

    利用 axios.create 创建一个自定义的 axios 来使用

    参考:http://www.axios-js.com/zh-cn/docs/#axios-create-config

如下封装代码:

import store from '@/store'
import axios from 'axios'
import {
    Toast } from 'vant'

const instance = axios.create({
   
  // 基础地址
  baseURL: 'http://cba.itlike.com/public/index.php?s=/api/',
  // 超时时间
  timeout: 5000
  // headers: { 'X-Custom-Header': 'foobar' }
})

// 自定义配置
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
   
  // 在发送请求之前做些什么
  // 添加请求头信息
  config.headers.platform = 'H5'
  // 开启loading,禁止背景点击(节流处理)
  Toast.loading({
   
    message: '加载中...',
    forbidClick: true,
    duration: 0 // 不会自动关闭
  })
  // 添加token到请求头
  const token = store.getters.token
  if (token) {
   
    config.headers['Access-Token'] = token
  }
  return config
}, function (error) {
   
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
   
  // 2xx 范围内的状态码都会触发该函数。
  // 对响应数据做点什么
  const res = response.data
  // console.log(res)
  if (res.status !== 200) {
   
    // 弹出提示信息
    Toast(res.message)
    // 抛出异常
    return Promise.reject(res.message)
  }
  // 去除loading效果
  Toast.clear()
  // 返回
  return res
}, function (error) {
   
  // console.log(error)
  // 超出 2xx 范围的状态码都会触发该函数。
  // 对响应错误做点什么
  return Promise.reject(error)
})

// 导出实例
export default instance

  1. 使用:创建文件:src/api/xxx.js
  • 如:src/api/user.js
import request from '@/utils/request'

// 获取个人信息
export const getUserInfoDetail = () => {
   
  return request.get('/user/info')
}

// 列表
export const getUserList = (userType, page) => {
   
  return request.get('/user/list', {
   
    params: {
   
      userType,
      page
    }
  })
}

// 获取短信验证码
export const getSmsCode = (captchaCode, captchaKey, mobile) => {
   
  return request.post('/captcha/sendSmsCaptcha', {
   
    form: {
   
      captchaCode,
      captchaKey,
      mobile
    }
  })
}

...

其他测试:

import request from '@/utils/request'
export default {
   
  name: 'LoginPage',
  async created () {
   
    const res = await request.get('/captcha/image')
    console.log(res)
  }
}

相关推荐

  1. v3+ts/request封装axios

    2024-01-21 06:40:03       30 阅读
  2. Vue3+Vite+Axios Request 请求封装(TS版本)最新

    2024-01-21 06:40:03       36 阅读
  3. axios封装、二次封装

    2024-01-21 06:40:03       71 阅读
  4. axios封装-reques.js

    2024-01-21 06:40:03       53 阅读
  5. 请求封装axios、fetch)

    2024-01-21 06:40:03       59 阅读
  6. axios的跨越封装

    2024-01-21 06:40:03       33 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-01-21 06:40:03       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-01-21 06:40:03       100 阅读
  3. 在Django里面运行非项目文件

    2024-01-21 06:40:03       82 阅读
  4. Python语言-面向对象

    2024-01-21 06:40:03       91 阅读

热门阅读

  1. Mybatis的占位符中使用的名称

    2024-01-21 06:40:03       59 阅读
  2. 聊聊PowerJob的AliOssService

    2024-01-21 06:40:03       47 阅读
  3. centos 安装rabbitmq集群

    2024-01-21 06:40:03       46 阅读
  4. logstack 日志技术栈-01-ELK/EFK 入门介绍 ELK+filebeta

    2024-01-21 06:40:03       55 阅读
  5. 【DevOps-09-1】Jenkins流水线任务初体验

    2024-01-21 06:40:03       62 阅读
  6. 编程笔记 html5&css&js 049 CSS列表

    2024-01-21 06:40:03       56 阅读
  7. 24秋招,帆软测试开发工程师一面

    2024-01-21 06:40:03       50 阅读
  8. 笨蛋学设计模式行为型模式-策略模式【16】

    2024-01-21 06:40:03       48 阅读
  9. Vue2学习之第四章——Vue中的ajax

    2024-01-21 06:40:03       50 阅读