本文介绍: 1 axios是干什么的?XMLHttpRequest、$、fetchaxios都是用来服务器端发送请求,并获得响应2 为什么要进行二次封装axios?为了封装请求拦截器响应拦截器请求拦截器可以发送请求之前可以处理一些业务响应拦截器:当服务器数据返回以后,可以处理一些事情在src创建一个api文件夹,这里面放着我们项目中对一些api的请求requests我们axios的二次封装 经过上面的改写,requests就相当于axios,我们可以requests发送请求例如,在api下的i

1 axios是干什么的?

XMLHttpRequestjqfetchaxios都是用来服务器端发送请求,并获得响应

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
    })
}

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注