美文网首页前端开发 从基础到框架
Vue-cli项目搭建(axios 配置)

Vue-cli项目搭建(axios 配置)

作者: 不7而遇_ | 来源:发表于2019-01-31 10:37 被阅读11次

在配置了router后我们可以先进性axios 的配置。
如果你没有安装 可以使用

npm i axios -S

现在我们可以在项目的src 目录下 新建一个文件夹,request 并在下面新建index.js,
首先我们先引用axios 然后 用axios.create创建,然后导出 如果你要请求的接口比较多 也可用一个专门的api.js来管理

index.js内容

import axios from 'axios'

const $http = axios.create({
  baseURL: ''
})
//这里是配置请求头的部分
$http.interceptors.request.use(config => {
  var xtoken = JSON.parse(window.localStorage.getItem('token'))
  // console.log(xtoken)
  if (xtoken) {
    xtoken = 'Bearer' + xtoken
    // console.log(xtoken)
    config.headers['Authorization'] = xtoken
  }
  return config
})
$http.interceptors.response.use(res => {
  return res
})
export default $http

写完之后我们需要将axios引入到main.js中
main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import $http from './request'

Vue.config.productionTip = false
Vue.prototype.$http = $http

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

这是你可以在页面的created 和 monted 用

this.$http.get/post('path')
 .then(res => {console.log(res)})

请求一下

下面我们要进行vuex 的使用

https://www.jianshu.com/p/5389210de7fa

相关文章

网友评论

    本文标题:Vue-cli项目搭建(axios 配置)

    本文链接:https://www.haomeiwen.com/subject/twlksqtx.html