vue-cli 使用axios的操作方法及整合axios的多种方法

//把axios赋值到vue的原型上，方便调用Vue.prototype.$http = axios

methods:{  axiosGet(){  let that = this;  that.$http.post('http://xxx.168.xx.220:5678/api/user/login',{  "UserAccount": "string",   "UserPassword": "string"  }).then(function(response){  console.log(response);  }).catch(function(error){  console.log(error);  })  } }

import qs from 'qs'Vue.prototype.$http = axios.create({ baseURL:'http://192.xx.10.xx:5678/api',    //请求前处理数据 transformRequest:[function(data){ console.log(data); data=qs.stringify(data); return data; }],    //请求等待超时时间则中断 timeout: 1500,    //请求后的data处理 transformResponse: [function (data) { console.log(data);        return data;    }]})

that.$http({ method: 'post',    //这里的路径是和main.js中的baseURL拼接而来的 url: '/user/login', data: {  "UserAccount": "string",  "UserPassword": "string"    } }) .then(function(response){   console.log(response); }).catch(function(error){   console.log(error); })

//在要使用网络请求的组件中导入axiosimport axios from 'axios' export default { name: 'HelloWorld', data () {  return {   params:{}  } }, methods: {//在这里调用网络请求  request(){   axios.get(`url${this.params}`).then(result=>{    console.log(result)  })  } }}

//打开main.js全局导入axiosimport Vue from 'vue'import App from './App'import router from './router'import axios from 'axios'//存在prototype中Vue.prototype.$http = axios//需要使用axios的其他组件调用时可以通过两种方法//Vue.$http.get(`url${params}`)//this.$http.get(`url${params}`)//但是这样使用会出现一个问题，在单独的js文件中这样做调用不了$http,原因是没有Vue的实例。大多数情况下用这种方法就可以满足大部分需求了Vue.config.productionTip = false/* eslint-disable no-new */new Vue({ el: '#app', router, template: '<App/>', components: { App }})

//新建一个JS命名为apiimport axios from 'axios' //在api中导入axioslet base = '/v1'//把整个项目的网络请求都写在这个文件中用export导出export const getproduct = params => { return axios.get(`${base}/product/info/${params}`) }//这样写方便管理整个项目的网络请求//在我们要是用这个请求时比如说getproductimport {  getproduct }from '../api/api';export default { name: 'HelloWorld', data () {  return {   params:{}  } }, methods: {  getProductList(){   getproduct(this.params).then(result=>{    console.log(result);   })  } }}//注意我们导出的时候用的是export 所以导入的时候必须带{}