axios 的基本使用

Axios,基于 Promise 的 HTTP 客户端,可以工作于浏览器中,也可以在 node.js 中使用。
1.通用方式
①发起 GET 请求:

axios({
     // 请求方式
     method: 'GET',
     // 请求的地址
     url: '',
     // URL 中的查询参数
     params: {
       id: 1
     }
   }).then(function (result) {
     console.log(result)
   })

②发起 POST 请求:

document.querySelector('#btnPost').addEventListener('click', async function () {
     // 如果调用某个方法的返回值是 Promise 实例,则前面可以添加 await!
     // await 只能用在被 async “修饰”的方法中
     // 使用解构赋值,从 axios 封装的大对象中,把 data 属性解构出来
      // 把解构出来的 data 属性,使用 冒号 进行重命名,一般都重命名为 { data: res }
     const { data: res } = await axios({
       method: 'POST', 
       url: '',
       data: {
         name: 'zs',
         age: 20
       }
     })
   
     console.log(res)
   })

2.直接方式
①直接发起GET请求

document.querySelector('#btnGET').addEventListener('click', async function () {
      /* axios.get('url地址', {
        // GET 参数
        params: {}
      }) */

      const { data: res } = await axios.get('http:....', {
        params: { id: 1 }
      })
      console.log(res)
    });

②直接发起POST请求

 document.querySelector('#btnPOST').addEventListener('click', async function () {
      // axios.post('url', { /* POST 请求体数据 */ })
      const { data: res } = await axios.post('http:...', { name: 'zs', gender: '女' });
      console.log(res);
    });
上一篇:Vue axios二次封装 含Token


下一篇:必背-6.axios和fetch用法