axios的二次封装
什么是axios?
axios是一个基于Promise的HTTP客户端,用于浏览器和Node.js。它可以在浏览器中发送异步HTTP请求,并且支持拦截请求和响应、转换请求和响应数据、取消请求等功能。axios可以用于发送GET、POST、PUT、DELETE等各种类型的请求,并且可以设置请求头、请求参数、超时时间等。它是一个简单易用、功能强大的HTTP客户端工具。"
特性
从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF
为什么要进行axios的二次封装了?
在实际的前端项目开发中,使用axios进行网络请求是非常常见的做法。但是,直接使用axios可能会导致代码重复、难以维护等问题。因此,前端开发者通常会对axios进行二次封装,以便更好地满足项目的需求。
以下是一些常见的原因:
-
统一处理请求和响应:通过二次封装axios,可以在请求发送前和响应返回后进行统一的处理,例如添加请求头、处理错误信息等。这样可以减少重复的代码,并且方便在整个项目中进行统一的错误处理。
-
简化接口调用:通过二次封装axios,可以将接口的调用方式进行统一,例如将接口的URL、请求方法、请求参数等进行封装,使得接口调用更加简洁和易读。
-
封装通用功能:在二次封装axios的过程中,可以根据项目的需求封装一些通用的功能,例如请求的loading状态、请求的超时处理、请求的重试机制等。这样可以提高开发效率,并且减少重复的代码。
-
方便切换请求库:通过二次封装axios,可以将请求库的使用进行抽象,使得在项目中切换请求库变得更加容易。例如,如果将来需要替换axios为其他请求库,只需要修改封装的代码,而不需要在整个项目中修改每个请求的代码。
总之,二次封装axios可以提高代码的可维护性、可读性和可扩展性,使得前端开发更加高效和便捷。
1.新建request.js文件
import axios from 'axios'
import cookie from 'js-cookie'
import store from '@/store'
import {
Message } from 'element-ui'
// 请求token常量
import {
USER_LOGIN_TOKEN } from '@/config/constantMap'
const request= axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 5 * 60 * 1000 // 请求超时时间戳
})
// 请求拦截器
request.interceptors.request.use(
(config) => {
config.headers = {
Authorization: cookie.get(USER_LOGIN_TOKEN) || '',
Accept: 'application/json',
ContentType: 'application/json;charset=UTF-8'
}
return config
},
(error) => {
return Promise.reject(error)
}
)
// 响应拦截器
request.interceptors.response.use(
(response) => {
const {
code, success, message} = response.data
if (code == 200 || success) {
return response.data
} else {
// 对于登录失效进行单独判断
if (code == 401) {
window.location.reload(true)
store.dispatch('LoginOut')
}
// 对于非 200 的状态码进行统一拦截提示
Message.error(message)
return Promise.reject(response.data)
}
},
(error) => {
// 对接口响应错误进行统一处理
const {
message } = error.response.data
Message({
message, type: 'error' })
return Promise.reject(error.response.data)
}
)
export default request
2.在api文件模块中引入(user.js)
import axios from '@/utils/axios'
// get 请求
export const getUserInfo = (id) => axios({
method: 'get', url: '/userInfo/getUserInfo/' + id })
// post 请求
export const login= (daa) => axios({
method: 'post', url: '/userInfo/login', data })
// delete 请求
export const deleteAccount= (userId) => axios({
method: 'delete', url: '/userInfo/deleteAccount/', userId})
3.页面文件中使用
import {
getUserInfo } from '@/api/user.js'
mounted(){
this.GetUserInfo ()
},
methods:{
async GetUserInfo () {
try {
// try 中执行接口调用成功并且返回200的状态值
const {
data, code } = await getUserInfo (this.userId)
} catch(err){
// 在catch 中捕获错误
this.$message.error(err)
}
}