vue请求接口封装

最新推荐文章于 2024-08-24 07:00:00 发布

小码哥学习中

最新推荐文章于 2024-08-24 07:00:00 发布

阅读量658

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/boveysmith/article/details/113122801

版权

这篇博客介绍了如何在Vue（electron-vue）项目中封装axios请求接口。通过创建一个名为request.js的文件，利用axios和qs库处理后台接收参数问题。在main.js中引入并挂载该文件，然后在页面组件中引用这些封装好的接口。

摘要由CSDN通过智能技术生成

最近做的electron-vue的一个项目和vue请求一样，封装了下请求接口函数。项目中使用到了element-ui

接口方法使用到了axios和qs（electron-vue中自带了axios和qs，qs解决后台接收不到参数的问题）。

在utils文件夹下新建request.js，代码如下：

import axios from 'axios';
import { Message, Loading } from 'element-ui'
import qs from 'qs'; //参数序列化，把数据格式转为 x-www-form-urlencoded
import store from '../store' //token 放在了vuex store存储中

let BASE_URL = '', loadingInstance;
let HOST = process.env.NODE_ENV; //可自定义写死
switch (HOST) {
    case 'development':
        BASE_URL = 'http://xx.xx.xxx.xx:8080/api';
        break;
    case 'test':
        BASE_URL = 'http://xx.xx.xxx.xx:8080/api';
        break;
    default:
        BASE_URL = 'http://xx.xx.xxx.xx:8080/api';
}
axios.create({
    crossDomain: true,//设置cross跨域
    withCredentials: false,  //跨域请求是否允许携带cookie资源凭证
    baseurl: BASE_URL,
    time: 1000               //请求超时时间
    // responseType:"arraybuffer"  返回的数据格式
})


//  request请求拦截器
axios.interceptors.request.use(config => {
    config.headers = {
        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'  //转换数据格式
    }
    let token = store.state.userInfo.token;
    if (token) { //请求携带token