axios的使用

axios是专注于网络数据请求的库。

相比于原生的XMLHttpRequest对象，axios简单易用。

在网页中使用

首先要引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

 // get 的接口地址
  let getUrl = 'http://www.liulongbin.top:3006/api/get'
  // post 的接口地址
let postUrl = 'http://www.liulongbin.top:3006/api/post'
// get params 参数
  let getParams = {
    name:'zs',
    age:20
  }
//
let  postData = {
  location:'北京',
  address:'中关村'
}
  /** axios.get **/
  axios.get(getUrl,{params:getParams}).then(function (res) {
    // res.data 是服务器返回的数据
    console.log(res.data)
  })

/** axios.get **/
axios.post(postUrl,postData).then(function (res) {
  // res.data 是服务器返回的数据
  console.log(res.data)
})


/** axios.get **/
axios({
  method:'GET',
  url:getUrl,
  params: getParams, // GET 要通过params 属性提供
}).then(res =>{
  console.log(res.data)
})

/** axios.get **/
axios({
  method: 'POST',
  url: postUrl,
  data:postData // POST 数据要通过 data 属性提供
}).then(res => {
  console.log(res.data)
})


axios({
  method: 'POST',
  url: 'http://127.0.0.1:8888/api/private/v1/login',
  data:{
    username:'admin',
    password:'123456'
  } // POST 数据要通过 data 属性提供
}).then(res => {
  console.log(res.data)
})

在vue项目中使用 

安装依赖：$ npm install axios

或者运行 vue ui 在可视化配置里安装

 在main.js 全局引入并配置

// 引入网络请求的进度条
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

// 配置axios
import axios from 'axios'
// 请求的根路径
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
// 请求拦截 添加 herders.Authorization 身份字段 并且展示进度条
axios.interceptors.request.use(config =>{
  config.headers.Authorization = window.sessionStorage.getItem('token')
  // 必须在最后 return config
  NProgress.start()
  return config
})

// 响应拦截 中 展示进度条

axios.interceptors.response.use(config =>{
  // 必须在最后 return config
  NProgress.done()
  return config
})

Vue.prototype.$http = axios