vue项目中使用axios

下载axios

cnpm install vue-axios --save
cnpm install qs,js --save

在main.js文件中引用并且挂载到vue上

import axios from 'axios'
import qs from qs
Vue.prototype.$axios = axios
Vue.prototype.qs = qs

使用

this.$axios({
	method : 'post',
	url:'这里写你的接口地址',
	data:this.qs.stringify({需要传的参数})
}).then((response)=>{
	console.log(response)
}).catch((error)=>{
	console.log(err)
})

第二种方式(不使用npm install)

  • 在assets下创建一个myaxios.js文件
// 将 axios 封装成为一个组件,全局使用
import router from '../../router/index'
var myaxios = {}
// 添加一个方法 : install
myaxios.install = function (Vue) {
  axios.defaults.baseURL = '接口的通用地址'
  axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
  // 将 axios 挂载到 vue 的原型中
  axios.interceptors.response.use(function (response) {
    // 在接收响应做些什么,例如跳转到登录页
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });
  Vue.prototype.$http = axios
}
export default myaxios
  • 在main.js文件中引用axios
import qs from qs
import myaxios from '@/assets/js/myaxios.js'
Vue.use(myaxios)
Vue.use(qs)

你可能感兴趣的:(vue使用axios,vue)