关于ajax请求的二次封装

最新推荐文章于 2022-12-05 10:23:10 发布

时间的荒漠666

最新推荐文章于 2022-12-05 10:23:10 发布

阅读量153

点赞数

分类专栏：前端文章标签： json

本文链接：https://blog.csdn.net/weixin_50789445/article/details/119444813

版权

前端专栏收录该内容

14 篇文章 2 订阅

订阅专栏

该代码段展示了如何使用axios和jsonp库创建HTTP和JSONP请求，并实现请求的统一拦截处理。请求模块包括AJAX和JSONP两种方式，具备错误处理和进度回调功能。同时，定义了获取和发送数据的辅助函数，如postData和getData，它们检查登录状态并在必要时添加token。

摘要由CSDN通过智能技术生成

创建http导出ajax请求
http.js

/**
  * ajax: 引入axios 返回promise对象
  * jsonp:引入jsonp插件，返回promise对象
*/
import originJsonp from 'jsonp'
import router from '../router'
const axios = require('axios')
axios.defaults.withCredentials = true
axios.defaults.timeout = 1000000
// 根据请求返回结果统一拦截
function interceptor (res, fn) {
  if (res.data) {
    if (res.data.meta && res.data.meta.state === '400000') {
      sessionStorage.defaultMenu = ''
      router.push({
        path: '/login'
      })
    } else {
      fn(res)
    }
  } else {
    // this.$notify.error({
    //   title: '提示',
    //   message: res.data.meta.msg
    // })
  }
}
// ajax
export function Ajax (url, action, data, headers, isQuery, callBack) {
  return new Promise((resolve, reject) => {
    if (!isQuery) { return false }
    axios({
      'url': url,
      'method': action,
      'data': action === 'POST' || action === 'PUT' || action === 'PATCH' ? data : null,
      'params': action === 'GET' || action === 'DELETE' ? data : null,
      'headers': action === 'POST' || action === 'PUT' || action === 'PATCH' ? headers : null,
      'onUploadProgress': progressEvent => {
        var complete = ((progressEvent.loaded / progressEvent.total) * 100) | 0
        if (callBack) { callBack(complete) }
      }
    }).then((res) => {
      interceptor(res, resolve)
    }).catch((err) => {
      reject(err)
    })
  })
}
// JSONP
export function Jsonp (url, data, option) {
  url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)
  return new Promise((resolve, reject) => {
    originJsonp(url, option, (err, data) => {
      if (!err) {
        resolve(data)
      } else {
        reject(err)
      }
    })
  })
}
export function param (data) {
  let url = ''
  for (var k in data) {
    let value = data[k] !== undefined ? data[k] : ''
    url += '&' + k + '=' + encodeURIComponent(value)
  }
  return url ? url.substring(1) : ''
}

request.js

import { Ajax } from './http'
import router from '../router'
// import qs from 'qs'
// 获formData
export function getFormData (url, action, json = {}, callBack, urlType = 'other') {
  let tokenData
  const data = json
  // const headers = {
  //   //   'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
  //   // }
  const headers = {
    'Content-Type': 'application/json;charset=UTF-8'
  }
  tokenChek(url, tokenData, data, action, headers, urlType)
  return Ajax(url, action, data, headers, isQuery, callBack)
}

// 检测token
let isQuery

function tokenChek (url, tokenData, data, action, headers, urlType) {
  // isQuery = true
  // if (url.indexOf('login') === -1) {
  //   if (localStorage.loginState) {
  //     tokenData = JSON.parse(localStorage.loginState)
  //     if (action === 'POST' || action === 'PUT' || action === 'PATCH') {
  //       headers.Authorization = tokenData.token
  //     } else {
  //       data.Authorization = tokenData.token
  //     }
  //   } else {
  //     router.push('/login')
  //     isQuery = false
  //   }
  // }
  isQuery = true
  if (urlType !== 'login') {
    if (localStorage.loginState) {
      // tokenData = JSON.parse(localStorage.loginStateCP)
      tokenData = JSON.parse(localStorage.loginState)
      if (action === 'POST' || action === 'PUT' || action === 'PATCH') {
        headers.Authorization = tokenData.token
      } else {
        data.Authorization = tokenData.token
      }
    } else {
      router.push('/login')
      isQuery = false
    }
  }
}
// POST/PUT/PATCH
export function postData (url, action, json = {}, urlType = 'other') {
  let tokenData
  const data = Object.assign({}, json)
  const headers = {
    'Content-Type': 'application/json;charset=UTF-8'
  }
  tokenChek(url, tokenData, data, action, headers, urlType)
  return Ajax(url, action, data, headers, isQuery)
}
// POST/PUT/PATCH 接收任意格式数据传入
export function postSelfData (url, action, json = {}, urlType = 'other') {
  let tokenData
  const headers = {
    'Content-Type': 'application/json;charset=UTF-8'
  }
  tokenChek(url, tokenData, json, action, headers, urlType)
  return Ajax(url, action, json, headers, isQuery)
}
// GET//DELETE'
export function getData (url, action, json = {}, urlType = 'other') {
  let tokenData
  const data = Object.assign({}, json)
  tokenChek(url, tokenData, data, action, null, urlType)
  return Ajax(url, action, data, null, isQuery)
}

想调用就可以import { postData, getData } from '@/api/request'
然后

 postData(url, 'POST', param).then(res => {
        if (res.data.meta.state === '000000') {
        } else {
          this.$notice({title: '提示', type: 'error', noticeMsg: res.data.meta.msg})
        }
      })
      或get请求
 getData(url, 'GET', param).then(res => {
    if (res.data.meta.state === '000000') {
    } else {
      this.$notice({title: '提示', type: 'error', noticeMsg: res.data.meta.msg})
    }
  })