axios学习笔记

最新推荐文章于 2022-12-23 19:43:06 发布

暂时的萌新

最新推荐文章于 2022-12-23 19:43:06 发布

阅读量208

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/lwr3379966/article/details/107026118

版权

文章目录

axios学习笔记

axios学习笔记

使用axios前要引入axios文件

一.axios的get方式请求接口

静态接口数据请求方式

//1
	axios.get('url') //获取数据
		.then(res => console.log(res)) //显示数据
		.then(err => promise.reject(err)) //报错处理
//2
	axios({ //axios默认数据请求方式是 get
          url: 'url'
        }).then(res => console.log(res ))
          .catch(err => Promise.reject(err))

动态接口请求方式

axios.get('url',{
          params: { //参数
            参数:'值'
          }
        }).then(res => console.log(res))
          .catch(err => Promise.reject(err))

二.axios的post方式请求接口

json格式提交

    axios.post('url',{
          username: '',   //提交的数据
          password: ''
        }).then(res => console.log(res))
          .catch(err => Promise.reject(err))

form提交

 const p = new URLSearchParams()
        p.append('username','')      //提交的数据
        p.append('password','')
        axios.post('url',p,{
          headers: {   //请求头
            'Content-Type': 'application/x-www-form-urlencoded' 
          }
        }).then(res => console.log(res))
          .catch(err => Promise.reject(err))

file提交

单个文件提交

        const p = new FormData()
        p.append('file',e.target.files[0])  //文件
        axios.post('url',p,{
          headers: {  //请求头
            'Content-Type': "multipart/form-data"
          }
        }).then(res => console.log(res))
          .catch(err => Promise.reject(err))

多个文件提交

 const p = new FormData()
        p.append('filename','')   //文件名
        p.append('file',e.target.files[0])  //文件
        axios.post('url',p,{
          headers: { 
            'Content-Type': 'multipart/form-data'
          }
        }).then(res => console.log(res))
          .catch(err => Promise.reject(err))

三.axios的并发

<body>
  <div id="app">
    <button @click="send"> 发送 </button>
    <button @click="sendMore"> 执行多个并发请求 </button>
  </div>
</body>
<script src="../../lib/vue.js"></script>
<script>
  //! 同时发两个数据请求，如何做？
  new Vue({
    el: '#app',
    methods: {
      sendMore () {
        const p1 = new Promise((resolve,reject) => {
          resolve(1)
        })
        const p2 = new Promise((resolve,reject) => {
          setTimeout(function () {
            resolve(1)
          },3000)
        })
        axios.all([p1,p2])
        .then(axios.spread(function (acct, perms) {
          // 两个请求现在都执行完成
          console.log(acct,perms)  //直接得到结果
        }));
      },
      send () {
        const p1 = new Promise((resolve,reject) => {
          resolve(1)
        })
        const p2 = new Promise((resolve,reject) => {
          setTimeout(function () {
            resolve(1)
          },3000)
        })
        
        axios.all([p1,p2]).then(res => console.log( res ))  //得到的是数组
      }
    }
  })
</script>

四.axios的自定义实例

 const ins = axios.create({
    baseURL: 'http://59.110.226.77:3000',//统一设置项目中的后端地址
    timeout: 4000
    headers: { 'Content-Type': 'multipart/form-data'},
  })

五.axios拦截器

<style>
    .loading-box{
      position: fixed;
      left: 0;top:0;
      width: 100%;height: 100%;
      background: rgba(0,0,0,.7);
      color: white;
      display: none;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="loading-box"> 加载中 </div>
  <div id="app">
    <input type="text" v-model="username" placeholder="请输入用户名"> <br>
    <input type="text" v-model="password" placeholder="请输入密码">
    <button @click="postForm"> 动态数据请求 - post-表单提交 </button>
  </div>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="../../lib/vue.js"></script>
<script>
  const loadingBox = document.querySelector('.loading-box')
  loadingBox.style.lineHeight = document.documentElement.clientHeight + 'px'
  const ins = axios.create({
    baseURL: 'http://59.110.226.77:3000',//统一设置项目中的后端地址
    timeout: 4000,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
  })
  ins.interceptors.request.use(function (config) {
    loadingBox.style.display = 'block'
    return config
  },function (err) {
    return Promise.reject(err)
  })
  // 响应拦截器
  ins.interceptors.response.use(function (res) {
    loadingBox.style.display = 'none'
    return res // res就是请求得到的结果
  },function (err) {
    return Promise.reject(err)
  })
  new Vue({
    el: '#app',
    data: {
      username: '',
      password: '',
    },
    methods: {
      postForm () {
        const p = new URLSearchParams()
        p.append('username',this.username)
        p.append('password',this.password)
        ins.post('/api/user/login',p,{
        }).then(res => console.log(res))
          .catch(err => Promise.reject(err))
      },
    }
  })

</script>

暂时的萌新

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
axios学习笔记

文章目录axios学习笔记一.axios的get方式请求接口静态接口数据请求方式动态接口请求方式二.axios的post方式请求接口json格式提交form提交file提交单个文件提交多个文件提交三.axios的并发四.axios的自定义实例五.axios拦截器axios学习笔记使用axios前要引入axios文件一.axios的get方式请求接口静态接口数据请求方式//1 axios.get('url') //获取数据 .then(res => console.log(res)) /
复制链接

扫一扫