前端发请求的方式

XMLHttpRequest (面试手写) fetch JQ axios(常用)

axios二次封装
为什么需要进行二次封装axios?
请求拦截器、响应拦截器：
请求拦截器：可以在发送请求之前处理一些业务
响应拦截器：当服务器数据返回以后，可以处理一些事情

在src 下面创建api文件夹，创建reques.js

//对于axios 进行二次封装
import axios from "axios";


//1.利用axios对象的create,去创建一个axios实例
//2.request就是axios,只不过稍微配置一下
const requests = axios.create({
    //配置对象
    //基础路径,发送请求的时候,路径当中会默认出现api
    baseURL:"/api",
    //代表请求超时的时间为5s
    timeout:5000,
});
//请求拦截器:在发送请求之前,请求拦截器可以检测到,可以请求发送出去之前做一些事情
requests.interceptors.request.use((config) =>{
    //config:配置对象,对象里面有一个属性很重要,headers请求头
    return config
})
//响应拦截器
requests.interceptors.response.use((res)=>{
    //成功的回调函数,服务器响应的数据回来以后,响应拦截器可以检测到,可以做一些事情
    return res.data
},(error)=>{    
    //响应失败的回调函数
    return Promise.reject(new Error('false'))
})      

export default requests