vue中封装axios 以及api 统一管理

一、安装axios

npm install axios --save-dev

二、创建文件夹

在我们根目录下的src文件夹中创建一个http文件，专门用来放我们封装的axios。
新建2个js文件，request.js 和 api.js
request.js专门用来封装。
api.js专门用来放置我们的接口请求。

三、封装axios

1、引入axios

import axios from “axios”;

2、引入vuex

import store from “@/store/index”;

3、引入vant

import { Toast } from “vant”;

4、引入我们的环境变量

import baseUrl from “@/config/index”;

5、创建axios实例

const instance = axios.create({
	// axios.create 创建axios实例
    timeout: 5000,
    // 如果请求超过事件，就放弃这个请求
    baseUrl
    // 域名
})

6、添加请求拦截

使用 axios实例.interceptors.request.use(成功回调,失败回调);
我们可以在请求拦截中开启loading动画，判断用户是否登录，以及携带token

instance.interceptors.request.use(config => { // config 就是我们一些请求的配置
    // 成功回调
    Toast.loading({
        message: '加载中...',
        forbidClick: true,
        loadingType: 'spinner',
    });
    // vant loading 动画
    if (store.state.token) {
    // vuex中的token是否是空，如果不为空就设置请求头，携带token
        config.headers.Authorization = store.state.token;
    }
    return config;
    // 一定要返回config，否则报错
}, error => {
    // 失败回调
    return Promise.reject(error);
    // 失败返回一个 Promise对象
})

7、响应拦截

使用 axios实例.interceptors.response.use(成功回调,失败回调);
我们在响应拦截中，可以关闭loading动画，判断返回的状态码来做响应的操作

instance.interceptors.response.use(response => { // response 服务器返回的数据
    // 成功回调
    Toast.clear();
    // vant中关闭loading动画
    return response;
    // 必须返回有返回值
}, error => {
    // 失败回调
    return Promise.reject(error);
    // 必须有返回值
})
// 响应拦截

7、导出封装的axios函数

export default (url, method, params) => {
// url请求地址
// method 请求方式
// params 参数
    return instance({
    // 返回我们的axios实例
        url:url,
        method:method,
        params:params,
    }).then(res => {
    // res 我们后端返回的数据
        if (res.status >= 200 && res.status < 300) {
        // 如果我们返回的数据状态码为200-300之间就是成功
            return res;
        } else {
            return Promise.reject(res.data);
            // 失败返回一个Promise对象
        }
    }).catch(err => {
        return Promise.reject(err);
        // 请求失败返回一个Promise对象
    })
}

四、api统一管理

1、引入我们封装的axios

import http from “./request”

2、使用async/await进行请求优化

async function getIndex(obj) {
    let res = await http('url',"get",{id:1});
    // 我们使用await等待请求结果出来
    return res;
    // 返回这个结果
}
// 比如这是我们主页的数据
// 可以写多个

3、导出

export {
    getIndex,
}

五、使用

比如我们在主页要使用这个接口

<template>
  <div class="home">
  </div>
</template>

<script>
import { getIndex } from "@/http/api";
// @表示我们的 src文件夹
// 首先我们需要引入响应的接口函数，使用解构赋值的方式
// 当导入多个的时候，函数名之间使用逗号隔开
export default {
  data() {
    return {};
  },
  mounted() {
    getIndex().then((res) => {
    // 调用函数即可
    // res就是我们的数据
      console.log(res);
    }).catch(err=>{
		console.log(err)
		// err是我们的报错
	});
  },
};
</script>

封装axios主要是为了在我请求数据的时候方便管理，到后期我们打包好要上线的时候也方便我们管理一级维护代码。如果后面我们到项目需要更换接口，或者需要修改某一个模块的数据接口，我们就不需要在每个组件中一个个寻找，只需要在我们封装的接口中更改就OK了