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

2. 新建 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

3. 使用：创建文件：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)
  }
}