Vue 封装axios 实现请求的简单操作

2020-12-27 23:33:06 阅读：147 来源： 互联网

Vue 封装axios 实现请求的简单操作

vue是一款非常优秀的前端框架，其组件化开发的思想以及丰富的组件库为我们的开发提供了很大的便利。

在其内有一个封装好的axios Ajax请求框架可以方便的请求后端的数据，但是绝大多数的情况下我们所请求的url其域名都是相同的，而且返回的结果也需要二次提取后才可使用，一些代码还好，如果是个大型的项目的话就会有很多重复的代码，浪费了很大的精力，因此可以对axios进行封装，以实现重复代码的利用

幸运的是axios也提供了对应的方法，来供我们封装使用。

create()方法可以传入该项目中通用的配置比如请求的域名了，超时时间，是否携带cookie等这里可以配置，，然后使用拦截器对响应进行过滤，这样可以直接获取到数据，而不需要二次提取。

再返回的时候返回的是个函数，因为在js中函数也是个对象，这样在调用时就可以传入一些简单的配置即可使用

基本如下

import axios from "axios";

export default function (config) {
    const inst = new axios.create({
        baseURL: 'http://localhost:8000/',
        timeout: 500000,
        withCredentials: true
    });
    inst.interceptors.response.use(res => {
        return res.data;
    })
    return inst(config)
};

使用方法

import request from "@/network/request";

export function getUserByNameAndPwd(user) {
    return request({
        url: '/user/login',
        method: 'get',
        params: {
            username: user.username,
            password: user.password
        }
    })
};

这里下只需要指定一些必备的参数比如url、请求方式、请求参数等

至此完成

标签：axios,return,请求,Vue,inst,user,封装
来源： https://www.cnblogs.com/clion/p/14199559.html

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

ICode9

Vue 封装axios 实现请求的简单操作

Vue 封装axios 实现请求的简单操作