vue封装api接口

Posted 2022-12-08 ```飞翔的翅膀```

vue axios封装以及API统一管理

在vue项目中，每次和后台交互的时候，经常用到的就是axios请求数据，它是基于promise的http库，可运行在浏览器端和node.js中。当项目越来越大的时候，接口的请求也会越来越多，怎么去管理这些接口?多人合作怎么处理?只有合理的规划，才能方便往后的维护以及修改，

1. 第一步安装axios

cnpm install axios --save // 只有安装了淘宝镜像之后才可以使用cnpom
npm install axios --save  // 这是没有安装淘宝镜像就可以安装axios

2. 第二步 创建文件夹
   一般我都会在src中新建一个http目录 ，其中evn用于管理接口域名,request处理请求拦截和响应拦截 api负责接口文件(接口文件可以自己新建一个文件夹，然后放对应的接口文件)

.在request.js文件中，用于处理axios中对请求拦截和响应拦截做处理，token处理，并引入element-ui加载动画等。

import axios from "axios"
// 引入element ui
import  Message  from "element-ui"
import baseURL from "./evn";
const service = axios.create(
    baseURL: `$baseURL.prod.baseURL/api/private/v1`,
    timeout: 5000,
)
// 请求拦截
service.interceptors.request.use(function (config) 
    // 在发送请求之前做些什么，例如加入token
    if (config.url !== '/login') 
        // 获取token
        const token = sessionStorage.getItem('token')
        // 配置请求头
        token && (config.headers['Authorization'] = token)
    
    // console.log(config);
    return config;
, function (error) 
    // 对请求错误做些什么
    return Promise.reject(error);
);
// 响应拦截
service.interceptors.response.use(function (response) 
    console.log(response);
    const res = response.data;
    const resultOK = [200, 201, 204]
    if (resultOK.includes(res.meta.status)) 
        // 轻提示
        Message(
            message: res.meta.msg,
            type: 'success'
        )
        return res.data
    
    return Promise.reject('请输入正确的账号或密码');
, function (error) 
    

    console.log(error);
    // 对响应错误做点什么
    return Promise.reject(error);
);

export default service;

在evn.js文件中,用于管理我们请求接口的域名，极大的方便后期的维护和开发，如果以后更改域名地址或者增加域名，只需要修改这样就可以了、

const evn = XXXXX
    prod: 
    // 公共请求部分
        baseURL: 'https://www.XXXXX.top:8888',
    
;

export default evn;

在api.js中

import request from "./request";
//封装的登录接口
export function login(data) 
    return request(
        url: '/loginaas',// 请求地址
        method: 'POST',  //请求方式
        data // 形参 用来接收传过来的参数
    )

然后再需要调用接口的页面引入使用

// 引入api 接口
<script>
import  login  from "../../http/api";
export default 
  data() 
   return
  mounted() 
  // 调用login方法也就等于调用了接口
    login ().then((res) => 
    //打印res 获取参数
      console.log(res);
    );
  ,
;
</script>