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、请求方式、请求参数等

至此 完成

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