VUE项目后端api请求封装V2.0

一、安装axios和config

npm install axios --Save

npm install config --Save

二、封装config文件

在src目录下创建config文件夹，config内创建index.js文件

//网络请求地址 例如: http://wwww.baidu.com  本地开发时，可直接填写后端测试接口地址(需要设置浏览器允许跨域请求，或后端设置Cross-origin允许跨域)。

//本地开发时，也可使用默认空字符串，但需要在 vue.config.js 文件内设置代理地址

//打包生产时，可填写空字符串，默认使用页面部署所在域名(ip)和端口
let baseConfig = {
    baseUrl: "", 
};

//本地开发配置
let config = {
    development: {
        ...baseConfig, 
        //如有需要请在此行下面使用 变量覆盖 的方式，覆盖通用基本配置
        baseUrl: "http://***.***.***.***:****/",
    },
    //打包代码配置
    production: {
        ...baseConfig, 
        //如有需要请在此行下面使用 变量覆盖 的方式，覆盖通用基本配置
        baseUrl: "/productsManagement",
    },
};

//本地开发时采用 development 中的配置，打包时采用 production 中的配置
let exportConfig =
    process.env.NODE_ENV === "development" ?
    config.development :
    config.production;

//导出
export default exportConfig;

三、封装request.js文件

在src目录下创建libs文件夹，libs内创建request.js文件

//引入axios和封装好的config
import axios from 'axios';
import config from '@/config';

var instance = axios.create({
    baseURL: config.baseUrl,
    //超时时间，根据项目需求，决定是否启用
    //如有文件上传需求，建议设置大一些 或 另外创建一个axios实例 负责文件上传
    timeout: 1000 * 60 
});

//如有需要，可在请求发起之前，做拦截处理
instance.interceptors.request.use((request) => {

})

//如有需要，可在请求收到回复之后，做拦截处理
instance.interceptors.response.use(
  (res) => {
    //请根据项目前后端约定，更改对应字段取值
    let resData = res.data;
    let code = resData.code || '0000';
    if(code != '0000'){
      if(res.config.commonHandleError !== false){
        Message.error(resData && resData.message || '网络连接错误，请稍后再试');
      }
      //将数据暴露给调用函数，以便调用方使用catch捕获做个性化处理
      return Promise.reject(resData);
    }
    return resData;
  }, 
  (error) => {
    console.log(error);
    Message.error((error && error.message) || '网络连接错误，请稍后再试')
    return Promise.reject(error);
  }
)

//导出
export default instance;

四、封装api请求

在src目录下创建api文件夹，文件夹内存对应各个文件的js文件，以其中一个productCategoryConfig.js为例

//引入request文件
import request from '@/libs/request';

//导出封装ok的请求

//查询需求申请列表,queryRequestApplyPage为请求名
export const queryRequestApplyPage = data => {
  return request({
    url: '/requestApply/queryRequestApplyPage',
    method: 'post',
    //请求传递的参数
    data, 
  })
}

五、发送请求

在需要发送请求的文件中使用

//引入相对应的api
import {queryRequestApplyPage} from '@/api/productCategoryConfig';


//封装发送请求函数
queryRequestApplyPage(){
  queryRequestApplyPage({
    //传递的参数
    data
  }).then(res => {
    //请求成功时的操作
  })
  .catch(error => {
    //请求失败时的操作      
  })
}

六、总结

使用此种方法比我上一篇的方法要复杂一些，但是更适用一些偏大的项目，项目小只有几个页面的可以去看看VUE项目搭建后端请求环境具体步骤V1.0_不会js的小王的博客-CSDN博客。

因为项目大了页面和组件比较多，而且一个页面或者一个组件可能需要不止一个api接口。

因此使用此种方法可以有效的进行代码编写和后期维护，更适用规范的前后端分离项目中的交互部分。