您好,欢迎访问代理记账网站
移动应用 微信公众号 联系我们

咨询热线 -

电话 15988168888

联系客服
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

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

一、安装axios

npm install axios --save-dev

二、创建文件夹

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

三、封装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>

分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进