Vue——axios网络的基本请求

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

axios基本应用">一、axios基本应用

from axios import \'axios\'
axios.get(\'http://iwenwiki.com/api/blueberrypai/getBlueBerryJamInfo.php\')
  .then(res => {
    console.log(res)
  })

二、axios全局配置

#main.js
from axios import \'axios\'
Vue.prototype.&axios = axios #$表示全局配置

this.$axios.get(\'http://iwenwiki.com/api/blueberrypai/getBlueBerryJamInfo.php\')
  .then(res => {
    console.log(res)
  })

三、get请求有参数

this.$axios.get(\'http://iwenwiki.com/api/music/list.php\'，{
 params:{
      type:1,
      count:10,
      offset:0
      }
   })
  .then(res => {
    console.log(res)
  })

四、post请求有参数

import qs from \'querystring\' #防止参数格式转换问题
this.$axios.post(\'http://iwenwiki.com/api/blueberrypai/login.php\'，qs.stringfy({
   user_id:\'123\',
   password:\'er345\',
   verification:\'yrty\'
   }))
  .then(res => {
    console.log(res)
  })
   #异常处理
  .catch(error =>{
  cansole.log(error)
  })

五、多个并发请求

const _this=this #解决this指向问题
function getUserAccount() {
  return _this.axios.get(\'/user/12345\');
}
function getUserPermissions() {
  return _this.axios.get(\'/user/12345/permissions\');
}
this.$axios.all([getUserAccount(), getUserPermissions()])
  .then(this.$axios.spread(function (acct, perms) {
    // 基于两个请求都执行成功后才会执行
      console.log(getUserAccount.data)
      console.log(getUserPermissions.data)
  }));

以上是 Vue——axios网络的基本请求 的全部内容， 来源链接： utcz.com/z/380583.html

回到顶部