今天本来打算把自己项目的主页面写完的 但是写到一半发现不行还是必须先把接口搞定 把需要的数据引过来
于是我就打算先写api接口了 老规矩依旧用axios
but！我看了原本的别人写的api 太太简单了 不过这个项目也比较简单已经够用了
但我不感觉！我要写也写一个比较泛用的
然后就去找资料看能不能跟着学 写一个自己比较满意的
然后就懵了
我发现他们写api的二次封装都很喜欢用TS
然后是一些名词比如
AxiosRequestConfig，
AxiosInstance
这啥啊！这下才疏学浅了！顶着头写了一段，越写越懵，完了完了，ts也就学了点皮毛 唉！没办法了还是跟我之前一样简单封装一下吧
这个封装其实相当于没有 只为记录一下自己 哪天自己可以用TS封装出一个很完美的AXIOS之后再看我的成果！
首先先写好配置文件
export default {
baseURL:
{
dev: 'https://api.pingcc.cn/',
pro: ''
}
}我这里只是简短的写一下 真正的配置文件肯定肯定非常的复杂
我们的项目环境可能有开发环境、测试环境和生产环境。我们通过node的环境变量来匹配我们的默认的接口url前缀。axios.defaults.baseURL可以设置axios的默认请求地址就不多说了
但是我这里选择换一种方式
import axios from 'axios'
import config from "../../config";
const baseURL = process.env.NODE_ENV === 'development' ? config.baseURL.dev : config.baseURL.pro不直接给 只是因为我们可能不止一个axios 并且我这个只是个人小项目 由其只有一个环境 哈哈哈！
但是真实的项目肯不是这样的
真实的应该是
// 环境的切换
if (process.env.NODE_ENV == 'development') {
axios.defaults.baseURL = 'https://www.baidu.com';}
else if (process.env.NODE_ENV == 'debug') {
axios.defaults.baseURL = 'https://www.ceshi.com';
}
else if (process.env.NODE_ENV == 'production') {
axios.defaults.baseURL = 'https://www.production.com';
}如上
OK
接下来我们拿到了url地址了 并不直接着急写我们的axios封装
这里将其封装为一个类，而不是一个函数的原因是因为类可以创建多个实例，适用范围更广，封装性更强一些
class HttpRequest {
constructor(baseURL) {
this.baseURL = baseURL
}
}然后就是config了
这里的config是指代信息配置项 比如请求地址和参数 请求头等等 我的并不复杂所以简短的写
//信息配置项 特别是请求的时用
getInsideConfig() {
const config =
{
baseURL: this.baseURL,
header: {
}
}
return config
}真实的肯不是这样
然后的是axios拦截器
axios拦截器是一个大杀招合理的利用可以让项目的更加的完美
intercerptors(instance) {
instance.interceptors.request.use(config => {
// Do something before request is sent
return config;
}, error => {
// Do something with request error
return Promise.reject(error);
});
instance.interceptors.response.use(response => {
// Do something before response is sent
console.log(response)
return response;
}, error => {
console.log(error)
// Do something with response error
return Promise.reject(error);
});
}我这边的需求度不高 所以只是简单配置 （全是水）
OK关键的来了
为什么用类上面已经说了
哪里体现的用
就在下面这个方法
request(options) {
const instance = axios.create()
options = { ...this.getInsideConfig(), ...options }
this.intercerptors(instance)
return instance(options)
}我们一个一个看
第一行 万众瞩目的axios终于出现了 使用axios.create生成一个新的axios 独立于之前的
第二行,options这个变量 合并了上面的方法中的
baseURL以及传过来的实参 使用扩展运算符合并成为一个对象 第三行 调用写好的拦截器给创建的axios挂上 第四行就是把整理好的信息传给新的axios 因为axios本质上就是接收一个对象 然后根据对象中的属性进行操作 最后 把这个类生成一个新的对象 然后把这个对象暴露出去export default new HttpRequest(baseURL)import axios from 'axios'
import config from "../../config";
const baseURL = process.env.NODE_ENV === 'development' ? config.baseURL.dev : config.baseURL.pro
class HttpRequest {
constructor(baseURL) {
this.baseURL = baseURL
}
//信息配置项 特别是请求的时用
getInsideConfig() {
const config =
{
baseURL: this.baseURL,
header: {
}
}
return config
}
intercerptors(instance) {
instance.interceptors.request.use(config => {
// Do something before request is sent
return config;
}, error => {
// Do something with request error
return Promise.reject(error);
});
instance.interceptors.response.use(response => {
// Do something before response is sent
console.log(response)
return response;
}, error => {
console.log(error)
// Do something with response error
return Promise.reject(error);
});
}
request(options) {
const instance = axios.create()
options = { ...this.getInsideConfig(), ...options }
this.intercerptors(instance)
return instance(options)
}
}
export default new HttpRequest(baseURL)OK
现在让我们用一段测试检验一下
import axios from "./axios";
export const homeApi = () => {
return axios.request({
url: '/comic/search/comicType/少年/1/17',
method: 'get'
})
}第一步引入 第二步那就是使用了 我们这个只是发送一个没有参数的get请求 所以比较简单 url写是baseUrl 后面需要接上去的就好了 我一开始也没理解 因为的代码里面并没有axios.defaults.baseURL
后来我发现了这一段相当于
baseURL:'https://api.pingcc.cn/',
url: '/comic/search/comicType/少年/1/17',
method:'GET',也是可行的
结果
完全OK 就写到了这里了代我学好ts就封装一个完美的
标签：axios,封装,二次,baseURL,error,return,config,response From： https://www.cnblogs.com/tomxiao/p/16609130.html