vue 引入jq并封装为回调执行函数（小程序请求封装类似）

一、引入jquery

//安装jq
npm i jquery --save

二、在package.json同级下创建vue.config.js配置文件

//在package.json同级下创建vue.config.js用于配置jq
// 引入jq需要加入以下代码
const webpack = require('webpack')

module.exports = {
    chainWebpack: config => {
        config.plugin('provide').use(webpack.ProvidePlugin, [{
            $: 'jquery',
            jquery: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        }])
    },
}

二、

//引入jq到文件，$可以替换成你想要的，我写成$主要是以前用$习惯了
import $ from "jquery";

//jq封装
export function api.post(uri,res,loading,callback){
	//uri是接口；res是数据；loading是布尔值，控制加载图标；callback是回调数据
	if(loading==true){
		message: '加载中...'
	}
	let baseuel='' //http或https网址，根据环境变量启用不同服务器地址
	//process.env.NODE_ENV是环境变量，我其他博客有介绍
	switch(process.env.NODE_ENV){
	        case 'prodapp':
            baseUrl = "https://mall.*****.com/Api/v3.php/Client/"  //正试环境请求
            break
        	case 'test':
            baseUrl = "http://testmall.*****.com/Api/v3.php/Client/"  //测试环境请求
            break
	}
	$.ajax({
		type:"POST"，//post请求
		timeout:10000,//毫秒
		url:baseurl+uri,//请求链接
		data:res,//请求数据
		async:true,//异步执行
		header:{'content-type': 'application/'},//请求头
		success: function(res){
			callback(res)
		},
		error: function(res,err){
			if (err == 'timeout') {
				Alert('网络繁忙，请稍后再试试')
			}
		}
	})
}

三、使用

import {api,res} from './utils/require'

methods:{
	getData(){
	const res={}
	api.post('/api/v3/products',res,true,this.getDataCallback())
	},
	getDataCallback(e){
	// e就是返回的data文件
	}
}

四、返回结果e的示例

{
	code:200
	data:[
		0:'zhangsan'
		1:'lisi'
	]
}

五、可以对结果另外处理（可用于小程序）

这样封装我们可以在ajax请求结果之后，直接对res进行处理，
例如
	success: function(res){
		if(res.code==200){
			callback(res.data)
		}else
		if(res.code==404 || res.code==500 || res.code==501){
			if(res.msg){
				alert(msg)
			}
		}else{
			alert('服务器连接错误')
		}
	},

在ajax这里处理之后，如果code结果不等于200，就不返回data，并且直接进行弹窗提示，并且可以直接让后端进行返回结果，这种情况针对小程序是最友善的，可以减少提交次数，减少代码量。返回结果提示让后端完成就可以了，并且可以随时改提示
返回的data仅仅有data内容，而没有code内容，这也是缺陷所在，不过可以与后端定义，避免这种状况