Axios的三层封装思想

最新推荐文章于 2024-11-10 18:27:37 发布

sparrow_girl

最新推荐文章于 2024-11-10 18:27:37 发布

阅读量1k

点赞数 2

分类专栏： Vue 文章标签：前端

本文链接：https://blog.youkuaiyun.com/qq_51053759/article/details/121252025

版权

Vue 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了Axios的三层封装思路，从底层设置默认地址、请求和响应拦截器，到接口层封装具体API，再到视图层组件中调用接口。在底层request.js中，设置默认基础URL并添加请求和响应拦截器处理token及提示信息。接口层如api/user.js，根据需求封装POST和GET请求，并引入Qs处理后台兼容问题。视图层如AccountList.vue组件，引入接口并使用async/await进行异步请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、底层（默认地址、请求拦截器、响应拦截器）request.js

1、引入axios

import axios from 'axios'

2、设置默认地址

axios.defaults.baseURL='http://127.0.0.1:5000'

3、设置请求拦截器-----携带token

axios.interceptors.request.use(
    function (config) {
        // 在发送请求之前做些什么
        // 从本地中拿到token
        let tk = local.get("tk");
        if (tk) {
            //将token设置给请求头
            config.headers.Authorization = tk;
        }
        return config;
    },
    function (error) {
        // 对请求错误做些什么
        return Promise.reject(error);
    }
);

4、设置响应拦截器-----统一封装提示框

axios.interceptors.response.use(
    function (response) {
        // 对响应数据成功做点什么
        // 判断msg是否存在
        if (response.data.code||response.data.msg) {
            let { code, msg } = response.data;
            if (code == 0) {
                Message({
                    message: msg,
                    type: "success",
                });
            } else {
                Message.error(msg);
            }
        }

        return response;
    },
    function (error) {
        // 对响应错误做点什么
        return Promise.reject(error);
    }
);

5、将axios暴露出去

export default axios

2、接口层 api/user.js

1、引入底层封装好的模块

import request from '@/utils/request.js'

2、引入qs(axios的插件)

import Qs from 'qs'

3、封装接口eg：

发送post请求需要用qs转一下，因为后台是node.js写的，如果是用java写的后台就不用转
// 登录接口
export const login_api = data =>
    request({
        method: "post", //请求方式
        url: "/users/checkLogin", //地址
        data:Qs.stringify(data)//请求参数(只有post请求需要通过qs转)
    });
// 删除账号
export const accDel_api=params=>request({
    method:'get',
    url:'/users/del',
    params
})
发送get请求时请求参数必须传params

3、视图层 AccountList.vue

1、在需要用的组件引入接口层模块

import {login_api,accDel_api} from '@/api/user.js'

2、在需要发送请求的函数中使用
/* 封装一个getList获取列表数据的函数 */
async getList() {
   let res = await getList_api({ currentPage: this.currentPage, pageSize: this.pageSize });
   console.log(res.data);
   let { total, data } = res.data;
   if(data.length==0&&this.currentPage>1){
       this.currentPage--
       this.getList()
   }
   this.accData = data;
   this.total = total;
},
注：async用在await的最近父函数上