1. 简介
参考网址：http://www.axios-js.com/zh-cn/docs/#axios-create-config
- 在现代的前端开发中，我们经常需要与后端API进行交互，而axios是其中的一个非常流行的选择。为了简化请求的处
理和增强代码的可读性，我们经常需要对axios进行封装。
-
我们会使用 axios 来请求后端接口, 一般都会对 axios 进行一些配置 (比如: 配置基础地址,请求响应拦截器等等)
-
一般项目开发中, 都会对 axios 进行基本的二次封装, 单独封装到一个模块中, 便于使用
2. 封装axio的好处
- 代码复用：通过封装，我们可以将常用的请求参数、配置等封装为一个函数或模块，方便在其他地方复用。
- 增强可读性：通过封装，我们可以为每个请求定义一个清晰的函数名，使得代码更加易于阅读和理解。
- 简化代码：通过封装，我们可以将复杂的请求逻辑和参数处理抽象到一个函数中，使代码更加简洁。
- 统一管理错误：在封装中，我们可以统一处理请求中的错误，提供一致的错误处理机制。
3. 封装axio
目标：将 axios 请求方法，封装到 request 模块
- 安装 axios
npm i axios
// 或
yarn add axios
-
新建
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.tokenif (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- 使用：创建文件：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)}
}
