axios封装-reques.js

发布时间:2024年01月21日

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)
  }
}
文章来源:https://blog.csdn.net/m0_72560900/article/details/135715186
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。