流程: 下载 创建实例 接着封装请求响应拦截器,抛出,最后封装接口
为什么要封装axios呢?
- 弥补原生框架上的不足
- 理解成本低
- 保持原有的功能
我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中。他有很多优秀的特性,例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护,直接推荐我们使用axios库。
Axios封装
// 1.引入axios
import axios from 'axios'
// 2.创建实例
const api=axios.create({
// 请求地址的公共部分
baseURL:'',
// 请求的超时事件
timeout:3000
})
// 3.axios拦截器
// 请求拦截器
axios.interceptors.request.use(config=>{
// config 请求的信息
return config
},err=>{
// 抛出错误
Promise.reject(err)
})
// 响应拦截器
axios.interceptors.response.use(res=>{
// res 拿到的一些信息
console.log(res)
return Promise.resolve(res)
},err=>{
// 抛出错误
Promise.reject(err)
})
// 返回api
export default api
接口封装
request.js
//引入封装好的axios文件
import api from './axios'
// 封装接口
export const login=()=>api({
url:'',
// url 接口地址
method:'get',
// method请求方式
params:params
// params携带参数可选的
})
使用接口
vue文件
<template>
<div>login</div>
<button @click="loginHandel">登录</button>
</template>
<script>
// 引入封装好的接口文件
import {login} from './request'
export default{
name:'login',
data(){
return{
}
},
methods:{
loginHandel(){
// 调用登录接口
login().then(res=>{
console.log(res)
})
}
}
}
</script>
总结
封装的比较少,一些关于状态码和一些别的处理都没有进行封装,阅读本文存在不同想法时,可以在评论中表达,如果更多的需求,或者说是不一样的需求,可以根据自己的需求进行一个改进。后续有时间再更新吧!!!!
- 封装是编程语言中多态之一,简单对axios封装,就可以体会到它带来的无限魅力。
- 根据项目的需求进行封装,且简单易用,那就是一个好的方案。
如果这篇【文章】有帮助到你💖,希望可以给我点个赞👍,创作不易,如果有对前端端或者对python感兴趣的朋友,请多多关注💖💖💖,咱们一起探讨和努力!!!
👨🔧 个人主页 : 前端初见