vue中关于axios

• 首先在目录中的src中间一个http文件里面建一个request.js
  写上请求拦截和响应拦截

/* eslint-disable prefer-promise-reject-errors */
// eslint-disable-next-line no-unused-vars
import axios from 'axios'
// 创建一个axios实例
const service = axios.create({
  baseURL: 'https://api.it120.cc/wenjie',
  timeout: 2500
})
// 请求拦截
service.interceptors.request.use(config => {
  console.log('请求被拦截')
  return config
}, _error => {
  return Promise.reject('请求出错')
})
// 响应拦截
service.interceptors.response.use(res => {
  console.log('响应拦截')
  return res
}, _error => {
  return Promise.reject('出错了')
})
export default service

下来再main.js中引入然后绑定在vue的实例上面

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './utils/rem'
// 引入http
import http from './http/rewuest'
Vue.config.productionTip = false
// 挂载到原型上
Vue.prototype.$http = http
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

下来就可以在文件中使用axios来请求数据
比如：

 this.$http.post('/shop/goods/list').then(res => {
        console.log(res)
      })

• 也可以将接口进行封装
  1.在刚才建的http文件中建一个api文件，每次写接口是在这里写就可以了

import request from './rewuest'
export function cluss () {
  return request({
    url: '/shop/goods/list',
    method: 'post'
  })
}

2.接着就可以在文件中引用了

import { cluss } from '../http/api'
cluss().then(res => {
        console.log(res)
      })