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)
  }));