vue http请求工具vue-resource&axios的使用

vue http请求工具vue-resource 和 axios

第一步：下载vue-resource/axios

//vue-resource
npm install vue-resource
//axios(axios 需要下载两个包 axios和vue-axios,下面会讲解为什么)
npm install axios
npm install vue-axios

第二步：在main.js中引入工具

import Vue from 'vue'

//vue-resource
import resource from 'vue-resource'
Vue.use(resource)

//axios
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
//如果只引入axios不能直接像vue-resource一样Vue.use()
//而是通过 Vue.prototype.axios = axios;但是此方法不推荐
//所以通过vue-axios工具将axios绑定到vue实例上

第三步：在组件中引用

//vue-resource
this.$http.get(url).then(res=>{
	console.log('请求成功，结果为：'+res.data)
},err=> {
  console.log('请求失败：' + err);
})
//axios
this.axios.get(url).then(res=>{
	console.log('请求成功，结果为：'+res.data)
},err=> {
  console.log('请求失败：' + err);
})

post 请求参数问题

将参数格式调整为Form data格式 ：content-type: application/x-www-form-urlencoded

//vue-resource 参数
this.$http.post(url, {param1: 'value1'}, {
          "emulateJSON": true //此项必须加上
          }).then(res=>{
	console.log('请求成功，结果为：'+res.data)
},err=> {
  console.log('请求失败：' + err);
})

//axios
// 方法一：
const params = new URLSearchParams();
params.append('param1', 'value1');

//方法二：
const qs = require('qs');
const params = qs.stringify({ 'param1': 'value1' })

this.axios.post(url,params).then(res=>{
  console.log(res);
},err=>{
  console.log(err);
})

axios拦截器配置

猛戳这里 快速查看

我的个人博客,有空来坐坐