axios的二次封装

1 axios是干什么的?

XMLHttpRequest、jq、fetch、axios都是用来向服务器端发送请求，并获得响应

2 为什么要进行二次封装axios？

为了封装请求拦截器，响应拦截器

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

响应拦截器：当服务器数据返回以后，可以处理一些事情

在src下创建一个api文件夹，这里面放着我们项目中对一些api的请求

requests是我们对axios的二次封装

/* 对于axios进行二次封装 */
import axios from "axios"
//1:利用axios对象的方法create，去创建一个axios实例
//2:request就是axios，我们进行一下配置
const requests = axios.create({
    //配置对象
    //基础路径，发送请求的时候，路径当中会出现api
    baseURL:"/api",
    //配置请求超时时间
    timeout:2000,
    
});
//请求拦截器：再发请求指示之前，请求拦截器可以检测到，可以在请求发出去之前做一些事情
//interceptors拦截器
requests.interceptors.request.use((config)=>{
    //config:配置对象，对象里面有一个属性很重要，header请求头
    return config;
});
//响应拦截器
requests.interceptors.response.use((res)=>{
    //成功的回调函数：服务器响应数据回来以后，响应拦截器可以检测到，可以做一些事情
    return res.data;
},(error)=>{
    //响应失败的回调函数
    return Promise.reject(new Error('faile'));
}
)
//向外暴露
export default requests

经过上面的改写，requests就相当于axios，我们可以用requests来发送请求

例如，在api下的index.js中

在此文件中，我们对api进行统一的管理，可以将对某个api的请求封装为方法，当项目中的多个地方都需要访问该api时，就可以调用该方法，提高开发效率，也便于当api路径更改时，造成的维护困难

import requests from "./request";
export const req=()=>{
 //发请求
   return requests({
   //注意axios发请求返回的结果是Promise对象
        url:" ",//这里是我们要访问的api接口
        method:'get'//注意该接口应该采用的访问方法，get还是post
    })
}