Vue2中axios的三层架构的简单搭建

最新推荐文章于 2024-08-16 19:02:09 发布

星錵

最新推荐文章于 2024-08-16 19:02:09 发布

阅读量43

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_45991979/article/details/131956258

版权

文章介绍了在Vue项目中如何利用axios库进行HTTP请求的配置，包括设置基础URL、添加请求和响应拦截器，以及在utils和api文件夹中封装请求方法。在组件中，使用async/await来调用这些接口函数，以异步方式获取和处理后台返回的数据。

摘要由CSDN通过智能技术生成

1.辅助工具层---utils

        //在utils文件夹下面建立request.js文件
        //引入axios库
        import axios from 'axios';
        //配置请求的基准URL地址
        axios.defaults.baseURL = 'http://sell.h5.itsource.cn:8087';
        // 添加请求拦截器
        axios.interceptors.request.use(function(config) {
            // 在发送请求之前做些什么
            return config;
        }, function(error) {
            // 对请求错误做些什么
            return Promise.reject(error);
        });

        // 添加响应拦截器
        axios.interceptors.response.use(function(response) {
            // 2xx 范围内的状态码都会触发该函数。
            // 对响应数据做点什么
            return response;
        }, function(error) {
            // 超出 2xx 范围的状态码都会触发该函数。
            // 对响应错误做点什么
            return Promise.reject(error);
        });
        export default axios;

我们可以在请求拦截中配置token；在响应拦截中对消息进行统一管理

2.接口层---api

//在api文件夹中封装每个组件的接口  (xx.js)
import request from '@/utils/request.js'

// get的请求方式
export const reqxxx = (params) => {
    return request({
        method: 'get',
        url: 'xxx',
        params
    })
};

// post的请求方式
export const reqxxxx = (data) => {
    return request({
        method: 'post',
        url: 'xxx',
        data
    })
};

3.应用层---各个组件中使用

//在对应的组件中引入使用api接口的封装函数
import {reqxxx} from "@/api/xx.js";


//具体使用 async和await搭配使用
  created() {
    this.getData();
  },

  methods: {
    // 获取列表
    async getData() {
      let res = await reqxxx(data);
    },

data为对象是接口文档所需要发送数据，res为响应数据是后台返回来的数据