http请求后台接口配置

http.js

import axios from 'axios';
import Qs from "qs"
import store from '@/store/store'
import router from '@/router/index'

// 设置请求超时时间  https://www.kancloud.cn/yunye/axios/234845 axios配置
axios.defaults.timeout = 1000;
// `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
axios.defaults.baseURL ='';


// 在请求或响应被 then 或 catch 处理前拦截它们。
// http request 拦截器 在headers上添加token
// 添加请求拦截器
axios.interceptors.request.use(
    config => {
      // 在发送请求之前做些什么
        if (store.state.token.token) {
          let token = store.state.token.token
          // 在 XRH 的Request Headers 中查看
          // 判断是否存在token，如果存在的话，则每个http header都加上token
          // config.headers.Authorization = `token ${store.state.token}`;

          // 但是我要的是不是Authorization，而是自定义的 X-Auth-Token
          // config.headers['toekn'] = '840e8e68de044986ba1d5565063f205c'
          config.headers['X-Auth-Token'] = `token ${token}`;
        }
        return config;
    },
    err => {
      // 对请求错误做些什么
        return Promise.reject(err);
    });

// http response 拦截器  token 已过期，重定向到登录页面 
// 添加响应拦截器 
axios.interceptors.response.use(
    response => {
      // 对响应数据做点什么
        return response;
    },
    error => {
      // 对响应错误做点什么
      if (error.response) {
        // console.log('后台返回的全部数据结构',error.response)
        // console.log('error.response',error.response.data == 'error@nologin')
        // 首页中出现access_token已经过期时不直接跳转到登录页
        // return
        switch (error.response.status) {
          case 401:
            // 401 清除token信息并跳转到登录页面
            store.commit('logout');
            router.replace({
                path: '/login',
                query: {redirect: router.currentRoute.fullPath}
            })
        }
        // console.log('router',router)
        console.log('router.currentRoute',router.currentRoute)
      }
      // console.log(JSON.stringify(error));//console : Error: Request failed with status code 402
      return Promise.reject(error.response.data) // 返回接口返回的错误信息
    });


/**
 * 封装get方法
 */
export function get(url,param={}){
  return new Promise((resolve,reject) => {
    axios.get(url,{params:param}).then(response => {
      resolve(response.data);
    }).catch(err => {
      reject(err)
    })
  })
}
/**
 * 封装post请求
 */

// http://www.onlyued.com/archives/344
// vue-resource中使用了Vue.http.options.emulateJSON = true; 以application/x-www-form-urlencoded的请求头部发送参数
/* axios 使用 headers: {
 'Content-Type': 'application/x-www-form-urlencoded',//请求头部
},
*/
//  这里可以在发送请求之前对请求数据做处理，比如form-data格式化等，
// 这里可以使用开头引入的Qs（这个模块在安装axios的时候就已经安装了，不需要另外安装）
 export function post(url,data = {}){
     return new Promise((resolve,reject) => {
         axios.post(url, data,{
             headers:{
                //  小程序中需要全部小写
                // 'content-type': 'application/json'
                'content-type': 'application/json;charset=UTF-8'
                // 'Content-Type': 'application/x-www-form-urlencoded'  data数据处理 -- Qs.stringify(data) //以表单形式提交
            }
        }).then(response => {
            resolve(response.data);
        },err => {
            reject(err)
        })
   })
 }

api.js

import {post,get} from './http'

let SERVER_FLAG = 'problem-manage';//通用标识

//服务器环境标识 1:测试；2:生产。
let signSystem = 1;

let host = 'http://' //测试环境

if(signSystem === 2){
    host = 'http://';//生产环境
}

if (process.env.NODE_ENV === 'development') {
  // dev 环境
  host = '/api';
}

// 请求接口
export function indexReport(data = {}){
    return post(`${host}/${SERVER_FLAG}/indexReport`,data)
}

config目录下的index.js里配置

proxyTable: {
      '/api': {
        target: 'http://10.98:8080', // 代理请求后台地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },

build里的assetsPublicPath前面加一个点

assetsPublicPath: './',

http请求后台接口配置

猜你喜欢