软件测试学习笔记丨Vue使用axios

软件测试大空翼

于 2024-06-11 17:20:22 发布

阅读量269

点赞数 3

文章标签：学习笔记 vue.js 自动化测试测试开发软件测试

本文链接：https://blog.csdn.net/Tester_muller/article/details/139604348

版权

本文转自测试人社区，原文链接：https://ceshiren.com/t/topic/23497

axios访问api示例

axios是一个基于Promise，可以用于浏览器和node.js的HTTP客户端

<template>
  <div>{{ msg }}</div>
</template>

<script>
export default {
  data: () => ({
    msg: "",
  }),
  created() {
    // 导入依赖
    const axios = require("axios");
    // axios.get 发出get请求
    axios
      .get("https://httpbin.ceshiren.com/get?id=123")
      .then((result) => {
        console.log("get请求 通过拼接url的形式传递参数");
        // thenc快截键，then 接收响应
        // result是响应数据
        console.log(result);
        this.msg = result.data;
      })
      .catch((err) => {
        // catch接收可能会遇到的异常
        console.log(err);
      });

    axios.get(
        "https://httpbin.ceshiren.com/get",
    {
        params: {id: 123}
    }
    ).then((result) => {
        console.log("通过params 传递参数")
        console.log(result)
    }).catch((err) => {
        console.log(err)
    });

    // axios 发送post请求
    axios.post(
        'https://httpbin.ceshiren.com/post',
        {name: 'lili'}
        ).then((result) => {
            console.log('post 请求 携带json请求体')
            console.log(result)
        }).catch((err) => {
            console.log(err)
        });
    
    // post请求，传递form表单，先下载form-data，安装命令npm install form-data --save
    // 导入依赖
    const FormData = require('form-data')
    // 实例化对象
    const form = new FormData();
    form.append('name', 'joker');

    axios.post(
        'https://httpbin.ceshiren.com/post',
        form,
        {'conten-type': 'application/x-www-form-urlencoded'}
    ).then((result) => {
        console.log('post请求，表单格式请求体')
        console.log(result)
    }).catch((err) => {
        console.log(err)
    });
    
  }
};
</script>