axios二次封装

362 阅读1分钟

为啥要对axios进行二次封装

1.请求拦截器,响应拦截器:

请求拦截器可以在发请求之前处理一些业务

响应拦截器可以在服务器返回数据时,处理一些业务逻辑

2.在项目中一般使用axios包 如何对axios进行二次封装

2.1
import axios from "axios"

2.2

//利用axios的create方法,去出创建一个axios实例

const service=axios.create({ 基础路径 发请求的时候 路径中会出现api

baseUrl:'/api'

//请求超时时间

timeout:5000 })

2.3 请求拦截器

service.interceptors.request.use((config)=>{ // config :配置对象 ,对象里面包含请求参数,其中有一个属性很重要

headers请求头

return config

})

2.4 响应拦截器

service.interceptors.response.use((res)=>{ return res.data

},

(err)=>{

Promise.reject(new Error('失败'))

} )

3.axios ajax fetch的区别

axios既提供了并发的封装,也没有fetch的各种问题,而且体积也较小,当之无愧现在最应该选用的请求的方式。

1.从浏览器中创建 XMLHttpRequest
2.支持 Promise API
3.客户端支持防止CSRF
4.提供了一些并发请求的接口(重要,方便了很多的操作)
5.从 node.js 创建 http 请求
6.拦截请求和响应
7.转换请求和响应数据
8.取消请求
9.自动转换JSON数据

2.fetch优势

  1. 语法简洁,更加语义化
  2. 基于标准 Promise 实现,支持 async/await
  3. 同构方便,使用 isomorphic-fetch 4.更加底层,提供的API丰富(request, response) 5.脱离了XHR,是ES规范里新的实现方式