axios的模块化处理及其调用

为什么要对axios进行模块化处理呢？
答案：对api做统一管理，模块化处理后api较容易维护。如果axios没有进行模块化吃力，试想一下，随着我们的项目越做越大，页面和接口也越来越多，这个时候后端改了个接口，多加一个参数什么的，那我们该如何修改相应代码呢？那就只有找到那个页面进去修改，整个过程很繁琐不易于项目的维护和迭代。

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>

这只是简单的封装，拦截器的配置还有很多，请期待接下来的文章！！！