zoukankan      html  css  js  c++  java
  • axios发请求的基本语法:

    axios发请求的基本语法:
        axios({
          url: '路径', // 这个路径中可以包含params或query参数
          method: 'get/post/put/delete',
          params: {}, // 包含query参数的对象,问号后面的参数
          data: {}, // 包含请求体参数的对象
        })
        axios.get(url, {配置})  // {params: {id: 1}}
        axios.delete(url, {配置})
        axios.post(url, data数据对象)
        axios.put(url, data数据对象)
    
      使用axios发ajax请求携带参数:
        params参数: 只能拼在路径中: /admin/product/baseTrademark/delete/1
        query参数: 
          拼在路径中的?后面: /admin/product/baseTrademark?id=1
          通过params配置来指定: axios({params: {id: 1}})
        请求体参数: 
          通过data配置或post()/put()的第二个参数指定

    案例

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    
    <body>
      <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
      <script>
    
        // 普通axios通信https://api.github.com/search/repositories?q=v&sort=stars
        // axios({
        //     url:'https://api.github.com/search/repositories',
        //     method:"GET",
        //     params:{
        //       q:'v',
        //       sort:'stars'
        //     }
    
        //   }).then(v=>{
        //     console.log(v.data)
        //   }).catch(error=>{
        //     console.log(error.message)
        //   })
    
    
        //axios的基本使用
        //函数用法以及对象用法
        //
        async function sendAjax() {
          try {
    
            //result为响应的数据
            const result = await axios({
              url: 'https://api.github.com/search/repositories',
              // /8也是一种参数,真正的params参数
              method: 'GET',
              params: {
                //params参数对应的是我们所说的query参数,url查询参数 ?key=value
                //如果url里面写了这个query参数,这里就不需要写了
                // username:'zhaoliying'
                // ?q=v&sort=stars'
                q: 'v',
                sort: 'stars'
              },
              // data:{
              //   //data参数对应的是请求体参数
              // }
            })
            console.log(result.data)
          } catch (error) {
            console.log(error.message)
          }
          
        }
    
        // async函数返回值一定是promise
        // 返回的promise成功还是失败看这个函数的返回值
        // 分两种情况:返回值返回的是promise,要么就是一个数据,要么throw一个ERROR
        // 返回的值是一个promise,name这个async函数返回的promise成功和失败就看这个promise的状态
        // 是一个ERROR,那么就是失败的
        // 其余都是成功的
    
        sendAjax()
    
      </script>
    </body>
    
    </html>
  • 相关阅读:
    将Moba的输出导出为文件
    MyBatis入参为0时失效问题
    (笔记)交大电院MEM提前面试优秀经验分享【附面试流程及规则】
    (笔记)GPIO基本原理与寄存器配置(STM32篇)
    (笔记)高速电路板完美走线的诀窍
    使用 python 收集 kubernetes events 并写入 elasticsearch
    java使用io.kubernetes.client-java调用k8s api创建pod/service/ingress示例
    中英文逗号空格分隔符正则式
    SpringCloud学习一-搭建netflix-eureka微服务集群
    Spring 中经典的 9 种设计模式,打死也要记住啊!
  • 原文地址:https://www.cnblogs.com/fsg6/p/13521444.html
Copyright © 2011-2022 走看看