Axios二次封装及使用

2022-03-01 13:32:59 阅读：210 来源： 互联网

标签：axios Axios 封装请求二次拦截器 request api nprogress

开发中把Axios进行二次封装，可以更好的使用Axios的请求拦截器，以及响应拦截器去处理数据

实现代码如下新建/api/request.js：

/* 对axios进行二次封装 */
import axios from "axios";
// 引入进度条 start 进度条开始  done进度条结束
import nprogress from "nprogress";
//引入 进度条样式
import "nprogress/nprogress.css"

//1. 利用axios对象的方法create方法去创建一个axios实例
// request就是axios,只不过稍微配置一下
const request = axios.create({
    // 基础路径：发请求的时候，路径中会带有api
    baseURL:'/api',
    //代表请求超时的时间为5s
    timeout:5000,
})

// 配置请求拦截器,在请求发出去之前，拦截器可以监测到，可以在请求发出之前做一些事情
 request.interceptors.request.use((config)=>{
    //config 是一个配置对象，对象里有一个属性很重要，就是header请求头
    nprogress.start();
    return config;
 })

 // 响应拦截器
 request.interceptors.response.use((res)=>{
    //响应成功的回调函数，服务器响应数据回来以后，可以做一些事情
    nprogress.done();
    return res.data;
 },(error)=>{
    //响应失败的回调函数
    return error.msg
 })

 export default request;

现在其实以及封装完毕了，需要用的时候可以直接引入使用，但是都做到这一步了，干脆在做个api统一管理 /api/index

//该模块对所有的api进行统一管理

import request from "./request";

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

使用方法，因为本项目使用了vuex状态管理，所以在需要请求的时候，直接dispatch给action，不使用vuex可以直接调用接口函数即可

    mounted(){
      //通知vuex发请求，获取数据，存储与仓库当中
      this.$store.dispatch('categoryList');
    },

在action中处理:

import {reqCategoryList} from "@/api";

//actions 处理actions,可以写自己的业务，也可以处理异步
const actions = {
    //通过api接口向服务器发送请求
    async categoryList(commit){
        let result = await reqCategoryList();//发送请求
        //commit 向state提交数据，提交的数据就是获取到的数据
        if(result.code == 200){
            this.commit('CATEGORYLIST',result.data)
        }
    }
};

解决请求跨域问题，使用代理服务器

    //代理跨域  只有浏览器有跨域问题  服务器之间没有
    devServer: {
        proxy: {
            '/api':{
                target:'http://39.98.123.211',
                //这里路径不需要重写，因为请求服务器上的路径就带api
                //pathRewrite: { '^/api':''},
            }
        }
    }

文中代码进度条的实现，其实也算是请求拦截器、响应拦截器的使用了。同理动态加载动画也可以通过这种方式实现

标签：axios,Axios,封装,请求,二次,拦截器,request,api,nprogress
来源： https://www.cnblogs.com/csanyer/p/15949756.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Axios二次封装及使用