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

    一、概念

    ajax：

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

    promise：

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

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

    axios：

            基于promise的网络请求库

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

    二、使用（封装）

    1、ajax（原生封装）

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.   <div>1121212div>
    13.   <script>
    14.     //封装ajax请求
    15.     function fun (options) {
    16.       //初始化默认值
    17.       options = options || {}
    18.       options.type = (options.type || 'POST').toUpperCase()
    19.       const params = options.data
    20.       // 创建XMLHttpRequest对象
    21.       const xhr = new XMLHttpRequest()
    22.       //发送请求
    23.       if (options.type === "GET") {
    24.         xhr.open('GET', options.url + "?" + getParams(params), true)
    25.         xhr.send()
    26.       } else if (options.type === "POST") {
    27.         xhr.open('POST', options.url, true)
    28.         //设置请求头
    29.         xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
    30.         xhr.send(getParams(params))
    31.  
    32.       }
    33.       //设置返回信息格式
    34.       xhr.responseType="json"
    35.       //接收返回信息
    36.       xhr.onreadystatechange = function () {
    37.         if (xhr.readyState === 4) {
    38.           if (xhr.status >= 200 && xhr.status < 300) {
    39.             options.success(xhr.response)
    40.           } else {
    41.             options.fail("参数错误" + status)
    42.           }
    43.  
    44.         }
    45.       }
    46.     }
    47.     //调用
    48.     fun(
    49.       {
    50.         type: "post",
    51.         url: 'http://192.168.166.146:8184/indexPage/readIndexPages',
    52.         // url: ' http://192.168.166.146:8184/Topo/getCloudStatus',
    53.         data: {
    54.           name: 30
    55.         },
    56.         success: function (text, xml) { // 成功回调
    57.           console.log(text, xml);
    58.         },
    59.         fail: function (status) { // 失败回调
    60.           console.log(status);
    61.         }
    62.       }
    63.     )
    64.     //处理传值形式
    65.     function getParams (data) {
    66.       let arr = []
    67.       for (const key in data) {
    68.         arr.push(`${key}=${data[key]}`)
    69.       }
    70.       return arr.join('$')
    71.     }
    72.   script>
    73. body>
    74.  
    75. html>

    2、promise封装ajax

    1.  
    2. html>
    3. <html lang="en">
    4.  
    5. <head>
    6.   <meta charset="UTF-8">
    7.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    8.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    9.   <title>Documenttitle>
    10. head>
    11.  
    12. <body>
    13.   <div>1121212div>
    14.   <script>
    15.     //封装ajax请求
    16.     function fun (options) {
    17.       return new Promise((resolve, reject) => {
    18.         //初始化默认值
    19.         options = options || {}
    20.         options.type = (options.type || 'POST').toUpperCase()
    21.         const params = options.data
    22.         // 创建XMLHttpRequest对象
    23.         const xhr = new XMLHttpRequest()
    24.         //发送请求
    25.         if (options.type === "GET") {
    26.           xhr.open('GET', options.url + "?" + getParams(params), true)
    27.           xhr.send()
    28.         } else if (options.type === "POST") {
    29.           xhr.open('POST', options.url, true)
    30.           //设置请求头
    31.           xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
    32.           xhr.send(getParams(params))
    33.  
    34.         }
    35.         //设置返回信息格式
    36.         xhr.responseType = "json"
    37.         //接收返回信息
    38.         xhr.onreadystatechange = function () {
    39.           if (xhr.readyState === 4) {
    40.             if (xhr.status >= 200 && xhr.status < 300) {
    41.               resolve(xhr.response)
    42.             } else {
    43.               reject(new Error(xhr.statusText))
    44.             }
    45.  
    46.           }
    47.         }
    48.         xhr.onerror = function () {
    49.           reject(new Error(xhr.statusText))
    50.         }
    51.         //设置接口请求超时时间
    52.         setTimeout(() => {
    53.           //取消当前请求
    54.           xhr.abort()
    55.         }, 5000)
    56.  
    57.       })
    58.  
    59.     }
    60.     //调用
    61.     fun(
    62.       {
    63.         type: "post",
    64.         url: 'http://192.168.166.146:8184/indexPage/readIndexPages',
    65.         // url: ' http://192.168.166.146:8184/Topo/getCloudStatus',
    66.         data: {
    67.           name: 30
    68.         },
    69.       }
    70.     ).then((res) => {
    71.       console.log(res);
    72.     }).catch((reson) => {
    73.       console.log(reson);
    74.     })
    75.     //处理传值形式
    76.     function getParams (data) {
    77.       let arr = []
    78.       for (const key in data) {
    79.         arr.push(`${key}=${data[key]}`)
    80.       }
    81.       return arr.join('$')
    82.     }
    83.   script>
    84. body>
    85.  
    86. html>

    3、axios（封装）

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

    1. import axios from 'axios'
    2.  
    3. export default request = axios.create({
    4.   baseURL: 'https://some-domain.com/api/',
    5.   timeout: 1000,
    6.   headers: {'X-Custom-Header': 'foobar'}
    7. });

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

    1. import request from '@/utils/request'
    2. export function getAllData(params){
    3.   return request({
    4.     method:'GET',
    5.     url:'/xxx',
    6.     params,
    7.  
    8.   })
    9. }

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

    1. import test1 from './test1'
    2. import test2 from './test2'
    3. import test3 from './test3'
    4.  
    5. export default {
    6.   test1,
    7.   test2,
    8.   test3,
    9. }

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

    1. import api from './api'
    2.  
    3. Vue.prototype.$api=api

    ⑤、引用

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

  • 相关阅读:
    easyPoster一个基于uniapp的canvas绘制海报库支持绘制图表到海报中
    mysql docker 安装
    还在想消除笔怎么用？这有几个易操作的软件
    【华为OD机试真题 python】 拼接url【2022 Q4 | 100分】
    《Python+Kivy(App开发)从入门到实践》自学笔记：第六章 打包——知识点总览
    HZOJ-838：2020年数据结构41题
    [nlp] 对抗学习 FGM, PGD到FreeLB
    unity操作_光源组件 c#
    C++学习之路-智能指针
    get与post的区别
  • 原文地址：https://blog.csdn.net/flhhly/article/details/126785866