• axios请求五种方法


    一、介绍

    Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

    可以提供以下服务:

    1、从浏览器中创建XMLHttpRequests

    2、从node.js创建http请求

    3、支持PromiseAPI

    4、拦截请求和响应

    5、转换请求数据和响应数据

    6、取消请求

    7、自动转换JSON数据

    8、客户端支持防御XSRF

    二:使用

    1、axios的安装: 

      安装命令; npm install axios

    2、axios五种请求:

      1⃣️get: 一般多用于获取数据  

    不带参数      
    方式一: axios({ methods: 'get', url: '/ulr' })
    方式二: axios.get(
    '/url')
    带参数
        方式一: axios.get('/url', {params: {id: 12}})  //请求的地址实际为 localhost:8080/url?id=12
        方式二: axios({
                       methods: 'get',
                       url: 'url',
                       params: {
                            id:12
                       }
                   })   

       2⃣️post: 主要提交表单数据和上传文件

         let data = {}
          let config = {}
          方式一:  axios.post('/url',data,config)
          
          方式二:  axios({
            methods: 'post',
            url: '/url',
            data: data,
            config: config
          })
        其中 data可以有两种格式form-data(图片上传,文件上传) applicition/json(目前比较流行)
    上面两种方法 都是 appliction/json格式
        如下为: form-data
        let formData = new FormData()
    let data = {
          id: 12
        }
    for (let key in data) {
         formData.append(key, data[key]) //床架form-data格式数据
    }
         axios({
          methods: 'post',
         url: '/url',
          data: formData
         })
         该请求发出之后可以在浏览器中查看此次请求的request header里面content-type: 为 form-data形式

       3⃣️put对数据全部进行更新

         该请求和post类似,只是请求方法不同

         4⃣️patch只对更改过的数据进行更新

           该请求和post类似,只是请求方法不同

       5⃣️delete删除请求(参数可以放在url上也可以和post一样放在请求体中)

         axios.delete('/url', {params: {id: 12}})  参数在url params很重要

                   axios.delete('/url', {data: {id: 12}}) 参数在请求体中 将params改为 data就行 

  • 相关阅读:
    React Virtual Dom 与 Diff
    打造前端CI/CD工作流
    webpack-chain明细
    React项目中实现多语言支持
    【WPF】大量Canvas转换为本地图片遇到的问题
    【C#】【分享】 XX分钟学会C#
    【WPF】一些拖拽实现方法的总结(Window,UserControl)
    【WPF】 InkCanvas 书写毛笔效果
    js中this指向问题
    js原型浅谈理解
  • 原文地址:https://www.cnblogs.com/webtaotao/p/11465663.html
Copyright © 2020-2023  润新知