为什么要对axios进行模块化处理呢?
答案:对api做统一管理,模块化处理后api较容易维护。如果axios没有进行模块化吃力,试想一下,随着我们的项目越做越大,页面和接口也越来越多,这个时候后端改了个接口,多加一个参数什么的,那我们该如何修改相应代码呢?那就只有找到那个页面进去修改,整个过程很繁琐不易于项目的维护和迭代。
文章目录
- 1、axios的统一配置
- 2、API解耦
- 3、调用(与async和await结合使用)
1、axios的统一配置
模块化axios时,我们常常会对其配置拦截器,而拦截器又分为请求拦截器和响应拦截器:
// request.js
// 导入axios包
import axios from 'axios'
// 创建实例,参数是config对象
let instance = axios.create({
// 基本路径
baseURL: '',
// 超时请求,若超出该时间则重新发送请求。
timeout: 2000
})
/**
不同环境下配置不同接口
switch(process.env.NODE_ENV){
// 生产环境,部署到服务器上的环境
case 'production':
axios.defaults.baseURL='http://api.zhengqinan.cn';
break;
//设置测式环境的接口地址
case 'text':
axios.defaults.baseURL='http://api.zhengqinantext.cn';
break;
//开发环境接口地址
default:
axios.defaults.baseURL='http://api.kaifa.cn'
}
*/
// 配置请求拦截器
instance.interceptors.request.use(config=>{
return config
},error=>{
return Promise.reject(error)
})
// 配置响应拦截器
instance.interceptor.response.use(
// 2xx范围内的状态码会触发function(response)
response=>{
return response
},
// 超出2xx范围的状态码会触发function(error)
error=>{
// error: {}对象中有五个属性包括{response、request、config、toJSON和isAxiosError}
// 将error解构
let { response } = error
// 如果有返回结果
if(response){
switch(response.status){
//这里面根据公司需求进行写
case 404: break;
......
}
}else{
//服务器没有返回结果 分两种情况断网或服务器崩了
if(!window.navigator.onLine){
//断网处理:跳转到断网页面
return
}
return Promise.reject(error)
}
}
)
// 向外暴露
export default instance
我们知道,error对象有五个属性,包括response、request、config、toJSON和isAxiosError,但是response里也有一个config,那么为什么会有那么多个config?
这里涉及到一个config优先级的问题:请求配置要先于实例配置 。请求配置是封装后再在实际中添加的配置(如api.js中根据需求添加的配置),而实例配置是统一的配置(如request.js中的配置),故有多个config,且response中的config是请求配置,error中的config是实例配置。
2、API解耦
对api解耦,目的:
(1)进一步的对api进行统一化管理
(2)提高接口的复用率,减少代码量
// api.js
import axios from 'axios'
import request from 'request'
export const getFlowers = (parms: {}) => {
return request({
url: '/getflowers',
methods: 'get' // 默认get方法
headers: {} //自定义请求头
})
}
export const login = (data:{}) => {
return request({
url: '/getflowers',
methods: 'post' // 默认get方法
// post方法默认传送数据的格式是json格式,若传送的表单,可以修改请求头
headers: {
}
})
}
3、调用(与async和await结合使用)
<template>
<button @click='getFlowers'></button>
</template>
<script setup>
import { ref, onMounted } from 'vue'
// 导入接口
import { getFlowers } from 'api'
const parms = {
id: '123'
}
const list = ref()
const getList = async() => {
list.value = await getFlowers(parms)
}
</script>
这只是简单的封装,拦截器的配置还有很多,请期待接下来的文章!!!