Vue---- HTTP 库 Asios

安装与配置

安装
npm install axios --save
 
or 使用cdn 在index.html 中引用asiox.min.js
            
            
在main.js 
// 第三方库
import Axios from "axios"
Vue.prototype.$axios = Axios
 
// 全局默认值
Axios.defaults.baseURL = 'https://api.xxx.com';
Axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
 
 
// 全局默认值取值
getImgUrl(src){
  return this.$axios.defaults.baseURL + src;
},

请求本地数据

this.$axios('data.json')
.then(res => {
  console.log(res)
})

Get

  // get, 可以在url上加参数：?count=1
  this.$axios('/product/getRecent', {
      params: {
          count: 1
      }
  })
  .then(res => {
      console.log(res.data)
      this.products = res.data.data
  })
  .catch(error => {
      console.log(error)
  })

POST

  axios 接受的post 请求参数的格式为form-data 格式, 需要序列化转化， 使用qs
  form-data: ?name=tom&age=10
  x-www-form-urlencoded: { name:'tom', age: 10}
 
  // 全局拦截器， 统一处理参数
    this.$axios.post('/product/getRecent', {
        count: 3
    })
    .then(res => {
        console.log(res.data)
        this.products3 = res.data.data
    })
    .catch(error => {
        console.log(error)
    })
    
 
 
  // 局部拦截器
  this.$axios.post('/product/getRecent', qs.stringify({
      count: 2
  }))
  .then(res => {
      console.log(res.data)
      this.products2 = res.data.data
  })
  .catch(error => {
      console.log(error)
  })