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>

 

posted @ 2020-08-18 09:02  全情海洋  阅读(1516)  评论(0)  编辑  收藏  举报