vue配置http.js和api.js代码详解,axios请求的使用(前后端分离-前端如何调后端接口地址)

http.js(创建axios请求,及添加请求拦截器等)

import axios from 'axios'; // 引入axios
// import QS from 'qs'; // 引入qs模块，用来序列化post类型的数据，后面会提到
// vant的toast提示框组件，大家可根据自己的ui组件更改。
import {Toast} from 'vant';

let mask = true;

const request = axios.create({
  // baseURL: apiConfig.baseUrl,//baseURL+接口地址
  timeout: 15000,
});

// request.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
// request.defaults.headers.post['Content-Type'] = 'application/json;chartset=uft-8';
request.defaults.headers.post['X-Requested-With'] = 'XMLHttpRequest';


// 添加请求拦截器
request.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    return config;
  },
  error => {
    return Promise.reject(error);
  });

// 添加响应拦截器
request.interceptors.response.use(
  response => {
    if (mask)
      Toast.clear();
    return response;
  },
  error => {
    if (mask)
      Toast.clear();
    return Promise.reject(error);
  });

/**
 *
 * @param url 请求的url地址
 * @param params 请求时携带的参数
 * @param isShowMask 是否显示遮罩动画。默认显示
 * @param maskTitle 遮罩动画的提示文案。默认文案：“处理中...”
 * @returns {Promise<unknown>} 返回一个promise对象，当axios其请求成功时resolve服务器返回值，请求失败时reject错误值
 */
function get(url, params, isShowMask = true, maskTitle = '处理中...') {
  mask = isShowMask;
  return new Promise((resolve, reject) => {
    if (isShowMask) {
      Toast.loading({
        message: maskTitle,
        forbidClick: true,
        duration: 0,
      });
    }

    axios.get(url, {
      params: params
    }).then(res => {
      if (isShowMask)
        Toast.clear();
      resolve(res);
    }).catch(err => {
      if (isShowMask)
        Toast.clear();
      reject(err)
    })
  });
}


function post(url, params, isShowMask = true, maskTitle = '处理中...') {
  mask = isShowMask;

  return new Promise((resolve, reject) => {
    if (isShowMask) {
      Toast.loading({
        message: maskTitle,
        forbidClick: true,
        duration: 0,
      });
    }

    // request.post(url,Qs.stringify(params))
    request.post(url, params)
      .then(res => {
        if (isShowMask)
          Toast.clear();
        resolve(res);
      })
      .catch(err => {
        if (isShowMask)
          Toast.clear();
        reject(err);
      })
  });
}

export {get, post};

调后端接口地址说明

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
//vue中用的跨域代理接口,适用于开发测试,生产上都改成Nginx代理
    proxyTable: {
      '/api': {
        target: 'http://localhost:8084',//接口地址
        changeOrigin: true,
        pathRewrite: {
          // '^/api': 'api/'//本地运行，访问本地服务删除api/    访问服务器服务增加api/
          '^/api': ''
        },
        // secure: true,
      }
    },

    // webpack的测试服务的地址跟端口
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8085, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-


    /**
     * Source Maps
     */

    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'cheap-module-eval-source-map',

    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true,

    cssSourceMap: true
  },