ajax封装，promise封装ajax，axios封装

最新推荐文章于 2022-09-14 11:45:03 发布

渣渣灰飞

最新推荐文章于 2022-09-14 11:45:03 发布

阅读量473

点赞数

文章标签： ajax javascript 前端 promise axios

本文链接：https://blog.csdn.net/flhhly/article/details/126785866

版权

一、概念

ajax：

核心XMLHttpRequest ，在不重新加载整个页面的情况下更新部分数据

promise：

承诺，只有三种模式（ pending：执行状态、fulfilled：已成功、rejected：已失败），且不受外界影响，解决回调地域

官网地址：https://www.promisejs.org/

axios：

基于promise的网络请求库

参考地址：使用说明 · Axios 中文说明 · 看云

二、使用（封装）

1、ajax（原生封装）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div>1121212</div>
  <script>
    //封装ajax请求
    function fun (options) {
      //初始化默认值
      options = options || {}
      options.type = (options.type || 'POST').toUpperCase()
      const params = options.data
      // 创建XMLHttpRequest对象
      const xhr = new XMLHttpRequest()
      //发送请求
      if (options.type === "GET") {
        xhr.open('GET', options.url + "?" + getParams(params), true)
        xhr.send()
      } else if (options.type === "POST") {
        xhr.open('POST', options.url, true)
        //设置请求头
        xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
        xhr.send(getParams(params))

      }
      //设置返回信息格式
      xhr.responseType="json"
      //接收返回信息
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status >= 200 && xhr.status < 300) {
            options.success(xhr.response)
          } else {
            options.fail("参数错误" + status)
          }

        }
      }
    }
    //调用
    fun(
      {
        type: "post",
        url: 'http://192.168.166.146:8184/indexPage/readIndexPages',
        // url: ' http://192.168.166.146:8184/Topo/getCloudStatus',
        data: {
          name: 30
        },
        success: function (text, xml) { // 成功回调
          console.log(text, xml);
        },
        fail: function (status) { // 失败回调
          console.log(status);
        }
      }
    )
    //处理传值形式
    function getParams (data) {
      let arr = []
      for (const key in data) {
        arr.push(`${key}=${data[key]}`)
      }
      return arr.join('$')
    }
  </script>
</body>

</html>

2、promise封装ajax


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div>1121212</div>
  <script>
    //封装ajax请求
    function fun (options) {
      return new Promise((resolve, reject) => {
        //初始化默认值
        options = options || {}
        options.type = (options.type || 'POST').toUpperCase()
        const params = options.data
        // 创建XMLHttpRequest对象
        const xhr = new XMLHttpRequest()
        //发送请求
        if (options.type === "GET") {
          xhr.open('GET', options.url + "?" + getParams(params), true)
          xhr.send()
        } else if (options.type === "POST") {
          xhr.open('POST', options.url, true)
          //设置请求头
          xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
          xhr.send(getParams(params))

        }
        //设置返回信息格式
        xhr.responseType = "json"
        //接收返回信息
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
              resolve(xhr.response)
            } else {
              reject(new Error(xhr.statusText))
            }

          }
        }
        xhr.onerror = function () {
          reject(new Error(xhr.statusText))
        }
        //设置接口请求超时时间
        setTimeout(() => {
          //取消当前请求
          xhr.abort()
        }, 5000)

      })

    }
    //调用
    fun(
      {
        type: "post",
        url: 'http://192.168.166.146:8184/indexPage/readIndexPages',
        // url: ' http://192.168.166.146:8184/Topo/getCloudStatus',
        data: {
          name: 30
        },
      }
    ).then((res) => {
      console.log(res);
    }).catch((reson) => {
      console.log(reson);
    })
    //处理传值形式
    function getParams (data) {
      let arr = []
      for (const key in data) {
        arr.push(`${key}=${data[key]}`)
      }
      return arr.join('$')
    }
  </script>
</body>

</html>

3、axios（封装）

①、项目中src文件下创建utils文件，文件中创建request.js文件

import axios from 'axios'

export default request = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

②、项目中src文件下创建api文件，里面创建对应模块test.js文件

import request from '@/utils/request'
export function getAllData(params){
  return request({
    method:'GET',
    url:'/xxx',
    params,

  })
}

③、api文件中创建index.js文件，并且引入api文件下其他js文件

import test1 from './test1'
import test2 from './test2'
import test3 from './test3'

export default {
  test1,
  test2,
  test3,
}

④、挂载全局，在main.js文件中引入api文件下的index.js文件

import api from './api'

Vue.prototype.$api=api

⑤、引用

this.$api.test.getAllData()//传参数调用接口