zoukankan      html  css  js  c++  java
  • axios的学习与使用

    最近的项目都是使用的vue框架,所以请求都使用了vue官方推荐的axios。

    官方中文介绍

    此处记录一下常用的写法

    • 执行 GET 请求
    // 为给定 ID 的 user 创建请求
    axios.get('/user?ID=12345')
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
    
    // 可选地,上面的请求可以这样做
    axios.get('/user', {
        params: {
          ID: 12345
        }
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });

    实际用例

    this.axios.get('***/edu-upload/token/', {headers: {
                'token': this.$store.state.UserMod.token
              }}
          )
            .then(function (respone) {
              if (respone.status === 200) {
                console.log(respone)
                me.uploadInfo = respone.data
                me.uploadFile(file,me)
              }
            })
            .catch(function (error) {
              console.log(error)
            })
    • 执行 POST 请求
    axios.post('/user', {
        firstName: 'Fred',
        lastName: 'Flintstone'
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });

    实际用例

    this.axios.post(url_pref + '/release/add', JSON.stringify(params),
            {headers: {'Content-Type': 'application/json', 'token': this.$store.state.UserMod.token}})
            .then(function (respone) {
              if (respone.status === 200 && respone.data.code == 0) {
                console.log(respone)
                me.handleOkBtn()
              } else {
                alert("发布失败!");
              }
            })
            .catch(function (error) {
              console.log(error)
              me.$notify.error({
                title: '错误',
                message: '发布备课失败!'
              })
            })
    • 执行多个并发请求
    function getUserAccount() {
      return axios.get('/user/12345');
    }
    
    function getUserPermissions() {
      return axios.get('/user/12345/permissions');
    }
    
    axios.all([getUserAccount(), getUserPermissions()])
      .then(axios.spread(function (acct, perms) {
        // 两个请求现在都执行完成
      }));

    axios API

    可以通过向 axios 传递相关配置来创建请求

    axios(config)

    // 发送 POST 请求
    axios({
      method: 'post',
      url: '/user/12345',
      data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
      }
    });

    axios(url[,config])

    // 发送 GET 请求(默认的方法)
    axios('/user/12345');
  • 相关阅读:
    分布式系统(五)——容错问题
    分布式系统(四)—— 一致性问题
    分布式系统(三)——选举问题
    分布式系统(二)——互斥问题
    结合中断上下文切换和进程上下文切换分析Linux内核的一般执行过程
    深入理解系统调用
    基于mykernel 2.0编写一个操作系统内核
    微信小程序npm安装pinyin库
    SpringBoot实现下载文件以及前台应当如何对接
    OSX 安装mujoco
  • 原文地址:https://www.cnblogs.com/shenting/p/10414294.html
Copyright © 2011-2022 走看看