分享一套自己封装的ajax请求--结合jquery&&vue

分享一套自己封装的ajax请求--结合jquery&&vue

axios和ajax各有利弊，相对而言，原生ajax较为复杂，一般都会对其进行封装，便于使用。

1.代码自取

我基于jquery的ajax进一步封装了一套自用的ajax，分享给需要的朋友：

  $.ajax({
    type: params.type || 'get',
    url: params.url,
    dataType: 'json',
    contentType: 'application/json',
    async: params.async || true,
    data: (params.type == 'post' || params.type == 'POST') ? JSON.stringify(params.data) : params.data,
    success: (res) => { params.success(res) },
    error: (err) => { params.error(err) }
  })

相关配置参数和jquery官方文档中的一致，见：https://api.jquery.com/jQuery.ajax/

2.在vue中全局使用

（1）在main.js中定义：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
//1.引入jquery
import $ from 'jquery'   


Vue.config.productionTip = false;

//2.将封装代码起名为sendAjax（可自命名），挂载在Vue的原型上

Vue.prototype.sendAjax = (params)=>{
  $.ajax({
    type: params.type || 'get',
    url: params.url,
    dataType: 'json',
    contentType: 'application/json',
    async: params.async || true,
    data: (params.type == 'post' || params.type == 'POST') ? JSON.stringify(params.data) : params.data,
    success: (res) => { params.success(res) },
    error: (err) => { params.error(err) }
  })
};

（2）在page中使用，举个栗子：

methods:{
 getList(){
//在methods的函数中使用。
//1.定义params
 
        let params = {
          type: 'get',
          async: false,
          url: '这里是后台接口路径',
          data: {//这里是给后台的参数
            'pageSize': this.pageSize,
            'pageNum': this.pageNum,
            'token': this.token,
            'id': this.id
          },
          success: (res) => {//这里是成功的回调函数
            // console.log('请求成功啦！这里是返回的详情', res);
            
          },
          error: function (err) {
            console.log('请求失败啦！',err);
          }
        };
//2.将配置好的params传入sendAjax函数即可

        this.sendAjax(params)
    
    }


}