vue-cli4.0安装axios并使用

安装axios包

npm i axios

• 在main.js同级创建http.js文件

  import axios from 'axios'
  
  const http = axios.create({
    baseURL: "http://localhost:3000/admin/api"
  })
  
  export  default http

• 在main.js中引入http.js

import http from './http.js'
Vue.prototype.$http = http

• 在vue组件中使用

async fetch(){
	const res = await this.$http.get('categories')
	//const res = await this.$http.post('categories', this.model) //this.model为后端需要的数据，在data中定义
	console.log(res.data)
}

项目中封装axios请求文件

import axios from 'axios'
import ElementUI from 'element-ui' //引入elementui，方便在拦截器中做出提示信息
import 'element-ui/lib/theme-chalk/index.css'

const http = axios.create({
  baseURL: "http://127.0.0.1:3000/api"
})    
//全局请求拦截
http.interceptors.request.use(
  function (config) {
    return config;
  },
  function (err) {
    return Promise.reject(err)
  }
)

//全局响应拦截，可进行操作提示等
http.interceptors.response.use(
  function (res) {
	//在这里可以对服务端的响应进行统一处理
    return res
  },
  function (err) {
    return Promise.reject(err)
  }
)

//get请求
export function getAction(url,params){
	return http.get(url,{params})
}
//post请求
export function postAction(url,data){
	return http.post(url,data)
}
//delete请求
export function deleteAction(url,params){
	return http.delete(url,{params})
}
//put请求
export function putAction(url,data){
	return http.put(url,data)
}