Axios 为什么将 xhr 再封装？如何统一API接口管理？

yuroll

已于 2023-05-15 15:22:40 修改

阅读量120

点赞数

分类专栏： Ajax 文章标签：前端 vue.js spring

于 2023-03-17 16:59:30 首次发布

本文链接：https://blog.youkuaiyun.com/yuroll/article/details/129623049

版权

Ajax 专栏收录该内容

4 篇文章

订阅专栏

能使用 ‘请求拦截器’ 和 ‘响应拦截器’

请求拦截器：为了在请求发送前，处理一些业务

响应拦截器：为了在响应之后，处理一些事情

步骤一：安装axios

cnpm i axios -S

步骤二：创建src / API / allRequest.js，引入axios进行二次封装

//对axios进行二次封装，设置请求拦截器和响应拦截器

//引入axios插件
import axios from "axios";

//1、创建一个axios实例。利用axios.create()方法
//2、requests就是axios，但requests可以配置一下
const allRequest=axios.create({
    //配置对象
    //基础路径，发请求的时候，路径当中会出现/api
    baseURL:'/api',
    timeout:5000,
})

//请求拦截器。在发送请求前，做一些事情
allRequest.interceptors.request.use((config)=>{return config})

//响应拦截器。服务器响应数据回来后，在响应成功，做一些事情。和响应失败做一些事情
allRequest.interceptors.response.use((res)=>{
    return res.data
},(error)=>{
    return Promise.reject(new Error('faile'))
})

export default allRequest;

步骤三：创建src / API / index.js ,使用二次封装后的axios

//将allRequest实例对象
import allRequest from "./allRequest";

//三级联动接口，获取数据 /product/getBaseCategoryList  get  无参数
export const reqCategoryList=()=>{
    //axios发请求，返回结果是promise对象
    return allRequest({
        url:'/product/getBaseCategoryList',
        method:'get', 
    })
}

步骤四：在main.js中。引入所有axios统一管理接口

//引入统一管理API请求
import { reqCategoryList } from "./API/index";

此处会出现跨域问题：解决方案查看解决跨域问题_yuroll的博客-优快云博客