axios 不配置axios 他是什么 axios(config)

转载

mob6454cc68310b 2023-07-04 15:15:32

文章标签 axios 不配置axios 他是什么 ios ajax .net 文章分类 iOS 移动开发

axios-config模式

axios是ajax的库，可以去官网下载axios的js文件，调用即可

<h2>axios的config模式</h2>
<button class="get">get请求</button>
<button class="post">post请求</button>
<script src="./lib/axios.js"></script>
<script>
  // 1. 测试get请求
  // 机器人聊天接口：http://ajax-api.itheima.net/api/robot
  document.querySelector(`.get`).onclick = () => {
    // console.log(1)
    axios({
      method:`get`,
      url : `http://ajax-api.itheima.net/api/news`,
      // 请求参数
      params : {
        spoken:`你吃饭了吗`
      }
    }).then(res => {
      console.log(`res`,res)})
  }
  // 2.测试post请求 ：http://ajax-api.itheima.net/api/login
  // 账号：admin 密码：123456
  document.querySelector(`.post`).onclick = () => {
    axios({
      method: `post`,
      url: `http://ajax-api.itheima.net/api/login`,
      data : {
        username : `admin`,
        password : `123456`
      }
    }).then(res => {
      console.log(res)
    })
  }
</script>

表单ajax提交

<h2>ajax+form</h2>
<!--action 提交的接口地址
  method 提交的方法-->
<form action="http://ajax-api.itheima.net/api/data" method="post">
  <!-- name 提交到服务器数据的 key -->
  <input
          class="username"
          name="username"
          type="text"
          placeholder="请输入用户名"
  />
  <br />
  <input
          class="food"
          name="food"
          type="text"
          placeholder="请输入喜欢的食物"
  />
  <br />
  <input
          class="sign"
          name="sign"
          type="textarea"
          placeholder="请输入个性签名"
  />
  <br />
  <input
          class="male"
          name="male"
          type="textarea"
          placeholder="请输入性别"
  />
  <br />
  <button type="submit">提交</button>
</form>
<script src="./lib/axios.js"></script>
<script>
  // http://ajax-api.itheima.net/api/data
  document.querySelector(`form`).addEventListener(`submit`,(e) => {
    // console.log(1)
    e.preventDefault() //阻止默认行为
    //ajax
    axios({
      method : `post`,
      url : `http://ajax-api.itheima.net/api/data`,
      data : {
        username : document.querySelector(`.username`).value,
        // password : ``,
        food : document.querySelector(`.food`).value,
        sign : document.querySelector(`.sign`).value,
        male : document.querySelector(`.male`).value,
      }
    }).then(res => {
      console.log(res)})
  })
</script>

form-serialize插件

可以获取表单中所有数据，并且可以转换为JSON或者对象属性，我们集中给Ajax传入参数

<h2>ajax+form-插件</h2>
<!--
  action 提交的接口地址
  method 提交的方法
 -->
<form action="http://ajax-api.itheima.net/api/data" method="post">
  <!-- name 提交到服务器数据的 key -->
  <input class="username" name="username" type="text" placeholder="请输入用户名" />
  <br />
  <input class="food" name="food" type="text" placeholder="请输入喜欢的食物" />
  <br />
  <input class="sign" name="sign" type="textarea" placeholder="请输入个性签名" />
  <br />
  <input class="male" name="male" type="textarea" placeholder="请输入性别" />
  <br />
  <input class="male" name="hobby" type="textarea" placeholder="请输入爱好" />
  <br />
  <input class="male" name="age" type="textarea" placeholder="请输入年龄" />
  <br />
  <button type="submit">提交</button>
</form>
<script src="./lib/axios.js"></script>
<!-- 1. 导入插件 -->
<script src="./lib/form-serialize.js"></script>
<script>
  // http://ajax-api.itheima.net/api/data
  document.querySelector(`form`).onsubmit = (e) => {
    e.preventDefault() //阻止默认提交事件
    // hash:false //键值对，字符串
    console.log(serialize(document.querySelector(`form`),{hash:true}))
    let data = serialize(document.querySelector(`form`),{hash:true}) //获取表单的每个元素
    console.log(data)
    axios({
      method:`post`,
      url : `http://ajax-api.itheima.net/api/data`,
      data,
    }).then(res => {
      console.log(res)})
  }
</script>

FromData属性的基本信息

FromData是浏览器提供的内置对象，是一个构造函数，需要new出来，是以键值对的形式保存数据的，能够结合Ajax进行数据交互

添加数据以后通过实例化看不到添加的数据，需要使用get（不是Ajax的方式，是他自己的方式，实例化对象.get（对应的键））方式才可以看到

创建方法：通过new关键字实例化，.append(key，value)添加数据，.get（key）获取对应的值。可以用来保存文件

<script>
    let data = new FormData()
    console.log(data)
    // 往实例化对象添加
    data.append(`uname`,`rose`)  //添加数据
    console.log(data)
    // 实例化对象.get(`键名`)
    console.log(data.get(`uname`))  //获取对应key的值
</script>

FromData-type = file语法补充

是吧img图片往后端传递的

<script>
    const input = document.querySelector(`[type = "file"]`)
    input.onchange = (e) => {
        console.log(e)
        // 后续把相关信息传给后端
        console.log(e.target.files[0])
    }
</script>

头像上传格式

<h2>直接通过FormData</h2>
<!-- e.target.files[0] -->
<!-- 推荐用户选择 图片 -->
<input type="file" accept="image/*" />
<img src="" alt="" />
<!-- 点击按钮 上传用户选择的图片 -->
<button>上传</button>
<script src="./lib/axios.js"></script>

<script>
  // 1.点击按钮上传图片
  document.querySelector(`button`).onclick = () => {
    // console.log(1)
    const img = document.querySelector(`input`).files[0]
    // console.log(img)
    // 传给后端一定要使用FromData格式
    const data = new FormData()  //实例化FromData
    data.append(`avatar`,img)  //键名是需要根据参数来更改的
    console.log(data.get(`avatar`))
    // 上传头像参数
    axios({
      url:`http://ajax-api.itheima.net/api/file`,
      method : `post`,
      data : data
    }).then(res => {
      // console.log(res)
      console.log(res.data.data.url)
      document.querySelector(`img`).src = res.data.data.url
    })
  }
</script>

使用不同的数据格式上传头像

<h2>form-data</h2>
<input class="ipt" type="file" accept="image/*" />
<h2>application/json</h2>
<button class="json">测试登录接口</button>
<h2>urlencoded</h2>
<button class="urlencoded">测试urlencoded格式</button>
<script src="./lib/axios.js"></script>
<script>
    // http://ajax-api.itheima.net/api/file
    // 1.测试formData
    document.querySelector('.ipt').onchange = function (e) {
        // 调用头像上传接口 提交图片
        const data = new FormData()
        data.append('avatar', e.target.files[0])
        axios({
            url: 'http://ajax-api.itheima.net/api/file',
            method: 'post',
            data: data,
        }).then((res) => {
            console.log('res:', res)
        })
    }
    // 2.测试application/json
    document.querySelector('.json').onclick = function () {
        axios
            .post('http://ajax-api.itheima.net/api/login', {
                username: 'admin',
                password: '123456',
            })
            .then((res) => {
                console.log('res:', res)
            })
    }
    // 3.测试 application/x-www-form-urlencoded
    document.querySelector('.urlencoded').onclick = function () {
        axios({
            url: 'http://ajax-api.itheima.net/api/data',
            method: 'post',
            data: 'name=jack&age=18&friend=rose',
        }).then((res) => {
            console.log('res:', res)
        })
    }
</script>

axios基地址

<h2>axios的config模式</h2>
    <button class="get">get请求</button>
    <button class="post">post请求</button>
    <script src="./lib/axios.js"></script>
    <script>
      // 我要设置基地址
      axios.defaults.baseURL = `http://ajax-api.itheima.net`
              // 1. 测试get请求
      document.querySelector('.get').onclick = function () {
        axios({
          // get请求传递参数-->拼接到url中
          params: {
            spoken: '好无聊呀!',
          },
          // 方法 默认就是get
          // method: 'get',
          // 地址
          url: '/api/robot',
        }).then((res) => {
          console.log('res:', res)
        })
      }

      // 2.测试post请求
      document.querySelector('.post').onclick = function () {
        axios({
          url: '/api/login',
          method: 'post',
          data: {
            username: 'admin',
            password: '123456',
          },
        }).then((res) => {
          console.log('res:', res)
        })
      }
    </script>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。