ajax: 封装

一、封装ajax

import store from '../store/index.js'
export default function (param) {               // ajax 接口封装
    let obj = {};
    var defaultOptions = {
        root: 'api',
        type: 'POST',
        data: obj,
    }
    var opt = Object.assign({}, defaultOptions, param);
    var optData = Object.assign({}, opt.data, defaultOptions.data)
    this.$Loading.start();                      // 显示加载进度条
    
    let ajaxParams = {
        url: opt.root + opt.url,
        type: opt.type,
        beforeSend: (xhr)=> {
            let token = store.state.token;     
            // 在vuex设置token后，通过beforeSend拦截请求并添加请求头中的token
            if(token != "" && opt.url !== 'admin/login' && opt.url !== 'admin/register'){
                // 注册、登录、忘记密码都不用在请求头中传 token 
                xhr.setRequestHeader("AUTH_TOKEN",token)
            }
            /*if(opt.url === 'upload') {
                xhr.setRequestHeader("Content-Type", "multipart/form-data");
            }*/
            xhr.setRequestHeader("Content-Type", "application/json");
            if (typeof opt.beforeSend === 'function') {
                opt.beforeSend(xhr);
            }
        },
        header: opt.header,
        success: (res) => {
            this.$Loading.finish();             // 加载进度条结束 
            if(res.code === 401 || res.code === 407 || res.code === 406) {
                // 401未登录 407 token失效 406 非法token
               if(opt.url === 'menu/treeList' || opt.url === 'shop/pullDownList') {
                    // 当这两个请求的时候返回也是未登录，直接让它不显示登录过期。登录过期弹出一次。不用弹出多次。
               } else {
               }
                this.$router.push({path: '/loginPass'})
                return false;
            }
            if(res.code === 1) {
                opt.success(res);
            }
            if(res.code !== 1) {                // 如果返回是错误的信息，向用户提示出来。
                this.$Message.error({
                    content: `抱歉！${res.local}。`,
                    background: true,
                    duration: 3
                });
                
            }
        },
        error: () => {
            this.$Loading.error();           // 加载进度条结束 
            alert("网络错误")
        }
    }
    if (opt.type.toUpperCase() === 'POST') {
        ajaxParams.data = JSON.stringify(optData);
    }
    $.ajax(ajaxParams);                      // 发起网络请求

}

二、main.js 引入封装好的 ajax

import http from './request/http.js'            // ajax封装请求
Vue.prototype.$apis = apis;

三、GET请求 引用封装好的 ajax

this.$http({
   url: `${this.$apis.forgetVerificate}?phone=${this.resetForm.phone}`,
   type: 'GET',
   success: (res) => {
       this.$Message.success({
            content: '验证码已发送,请注意查收！',
            background: true
      });
    }
})

四、POST请求引用封装好的 ajax

this.$http({
   url: this.$apis.resetPass,
   data: {
       phone: this.resetForm.phone,
  },
  success: (res) => {
      this.$Message.success({
          content: '重置密码成功,请重新登录！',
          background: true,
          duration: 3
  });
})