axios安装
npm install --save axios
#使用
在main.js中
import Vue from 'vue' import App from './App' import router from './router' // import axios from 'axios' //UI import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css';; Vue.use(ElementUI); Vue.protoType.$http = axios; //我一般会用$http来代替axios Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, axios, components: { App }, template: '<App/>' })
在组件中使用
this.$http.post(url,data) //请求方式 post get put delete等等 .then(res => { //返回的数据 }) .catch( err=> { //异常捕获 })
封装axios
在src文件夹中新建一个api.js文件
import axios from 'axios' import Vue from 'vue' axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded' // 请求拦截器 axios.interceptors.request.use(function(config) { return config; }, function(error) { return Promise.reject(error); }) // 响应拦截器 axios.interceptors.response.use(function(response) { return response; }, function(error) { return Promise.reject(error); }) // 封装axios的post请求,get请求一样 export function fetch(url, params) { return new Promise((resolve, reject) => { axios.post(url, params) .then(response => { resolve(response.data); }) .catch((error) => { reject(error); }) }) } export default { $http(url, params) { //$http会被调用的方法名,可以按自己喜好命名 return fetch(url, params); } }
这时候在main.js中就可以不用引入axios了,如果你想在组件中使用你封装的方法
import api from './../api.js' //路径根据实际填写 api.$http(url,data) //post请求,因为在api.js中只封装了post的方法 .then(res => { }).catch(err => { })