一、引入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内容,这也是缺陷所在,不过可以与后端定义,避免这种状况