Vue-cli2 封装ajax(jquery)

1、首先安装jquery

cnpm install jquery --save-dev

2.配置webpack.base.conf

   2.1  找到webpack.base.conf.js文件。此文件路径是根目录下build->webpack.base.conf.js

   配置代码如下

 

const webpack = require('webpack')

 

    plugins: [
    new webpack.ProvidePlugin({  //引入Jquery
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery':'jquery'
    })
  ]

3.在main.js里挂载到Vue构造函数中

Vue.prototype.http = http

这样做的原因是让项目全局都可以使用

4.创建config.js文件

目的是统一管理uri，记得用export default将变量导出去

5.创建http.js文件，封装ajax方法

import config from './config.js'   //导入config.js文件里的变量

function ajax(url,info,cellback){
  info = JSON.stringify(info);
  $.ajax({
      url:config.url,
      type: "post",
      async: true,
      data: {
        ums_appId: config.ums_appId,
         ums_operUrl:`${config.ums_operUrl}${url}`,
         ums_SESSIONID: "",
         json: info
      },
      success:function(res){
        cellback(res)
      }
  })
}

export default {ajax}   //导出ajax方法

6.在需要请求接口的文件里调用之前挂载构造函数里的方法

   this.http.ajax('SearchData',data,(res)=>{
        console.log(res)
    })

   SearchData接口名  data为参数  res为返回的数据