封装ajax请求

发布于 12 天前  78 次阅读


前言

如题,我封装了一个自己的ajax请求函数。

无压缩版: https://cdn.xxhzm.cn/request/request.js

压缩版: https://cdn.xxhzm.cn/request/request.min.js

使用说明

传参
  1. URL地址
  2. 请求方法(GET,POST)
  3. 请求参数
  4. 请求头
  5. 是否异步请求(true,false),默认开启异步请求

GET

GET不带参数,不带请求头:

  <script src="https://cdn.xxhzm.cn/request/request.min.js"></script>

    request('user/info', 'GET').then(val => {
      console.log(val)
    }).catch(val => {
      console.error(val)
    })

GET带参数,不带请求头:

    const data = {
      username: 'xxhzm',
      sex: '男',
      age: '16'
    }

    request('user/info', 'GET', data).then(val => {
      console.log(val)
    }).catch(val => {
      console.error(val)
    })

GET不带参数,带请求头

    const header = {
      'Content-Type': 'text/html; charset=utf-8'
    }

    request('user/info', 'GET', null, header).then(val => {
      console.log(val)
    }).catch(val => {
      console.error(val)
    })

POST

post不带参数,不带请求头

    request('user/info', 'POST').then(val => {
      console.log(val)
    }).catch(val => {
      console.log(val)
    })

post带参数,不带请求头

    const data = new URLSearchParams()
    data.append('name', 'xxhzm')
    data.append('sex', '男')
    data.append('age', '16')

    request('user/info', 'POST', data).then(val => {
      console.log(val)
    }).catch(val => {
      console.log(val)
    })

post不带参数,带请求头

    const header = {
      'Content-Type': 'text/html; charset=utf-8'
    }

    request('user/info', 'POST', null, header).then(val => {
      console.log(val)
    }).catch(val => {
      console.log(val)
    })

扩展写法

    const userGet = async () => {
      const res = await request('user/info', 'GET')
      console.log(res)
    }

小小孩子们