vue路由配置 封装post请求

封装post请求

新建vue.config.js文件

截图不完整就把它收起来了，下方是完整代码

const webpack = require('webpack')
module.exports = {
	devServer: {
		overlay: { //eslint报错，前端取消遮罩层
			warnings: false,
			errors: false
		},
		proxy: {
			"/info": {
				target: "要请求的域名",
				changeOrigin: true,
				ws: true, //websocket支持
				secure: false,
				pathRewrite: {
					"^/info": ""
				}
			}
		},
	},
	
	lintOnSave: false, //直接关闭eslint检查
	configureWebpack: {
		//支持jquery
		plugins: [
			new webpack.ProvidePlugin({
				$: "jquery",
				jQuery: "jquery",
				jquery: "jquery",
				"windows.jQuery": "jquery"
			})
		]
	},


}

在src文件夹中创建utils文件夹，新建request.js文件

import axios from 'axios' // 引入axios
//import router from '../router/index.js'
import {Message} from 'element-ui'
// 将 aioxs 封装为 vue 的插件
const service = axios.create({
  baseURL: '/info', 
  withCredentials: false,
})
service.defaults.headers.post['Content-Type'] = 'application/json';
// 在 axios 的拦截器中添加一段内容：
service.interceptors.request.use(function (config) {
//在这里可以添加请求头
  config.headers['字段'] = '你的请求头';
  return config
}, function (error) {
  return Promise.reject(error)
})
 //拦截响应，做统一处理
service.interceptors.response.use(
  response => {
    return response
  }, //接口错误状态处理，也就是说无响应时的处理
  error => {
    return Promise.reject(error) // 返回接口返回的错误信息
  })

async function request(options) {
  // 这里主要是post方法的封装，get方法同理
   options.method = 'post'
  if (options.config === 'formData') {
    options.headers = {
      'Content-Type': 'multipart/form-data'
    }
  } else {

    options.data
  }
  return new Promise((resolve, reject) => {
    service(options).then(response => {
      // console.log(response)
      //  这里主要根据后来返回的数据作判断，请根据实际情况
      if (response.data.Status === **'Ok'**) {
        let res = response.data;
        resolve(res)
        // console.log("拦截器",res)
      } else {
        reject(response.data)
      }
    }).catch(error => {
      reject(error)
      // 显示拦截器对respone处理后的可读错误
    })
  })
}

export default request

在src中创建apis文件夹,新建index.js文件

在js文件中请求

import http from '../utils/request.js'
export const FnName= (params) =>{
	return http({
		url:'请求地址',
		data:params,
		method:'post'
	})
}

在vue页面中引用

import {FnName} from '../../apis/index.js'
export default {
	data(){
	  return{
			data:1 
       }
	},
	created(){
		this.GetInfo() 
	},
	methods: {
		GetInfo() {
		
			FnName(this.data).then(res => {
					console.log(res)
			})
			//或者
			FnName({data:1}).then(res => {
					console.log(res)
			})
		},
	}
}

完成啦！