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

//把a(bǔ)xios賦值到vue的原型上，方便調(diào)用
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',
    //請(qǐng)求前處理數(shù)據(jù)
 transformRequest:[function(data){
 console.log(data);
 data=qs.stringify(data);
 return data;
 }],
    //請(qǐng)求等待超時(shí)時(shí)間則中斷
 timeout: 1500,
    //請(qǐng)求后的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);
 })

//在要使用網(wǎng)絡(luò)請(qǐng)求的組件中導(dǎo)入axios
import axios from 'axios' 
export default {
 name: 'HelloWorld',
 data () {
  return {
   params:{}
  }
 },
 methods: {
//在這里調(diào)用網(wǎng)絡(luò)請(qǐng)求
  request(){
   axios.get(`url${this.params}`).then(result=>{
    console.log(result)
  })
  }
 }
}

//打開main.js全局導(dǎo)入axios
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
//存在prototype中
Vue.prototype.$http = axios
//需要使用axios的其他組件調(diào)用時(shí)可以通過兩種方法
//Vue.$http.get(`url${params}`)
//this.$http.get(`url${params}`)
//但是這樣使用會(huì)出現(xiàn)一個(gè)問題，在單獨(dú)的js文件中這樣做調(diào)用不了$http,原因是沒有Vue的實(shí)例。大多數(shù)情況下用這種方法就可以滿足大部分需求了
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 template: '<App/>',
 components: { App }
})

//新建一個(gè)JS命名為api
import axios from 'axios' 
//在api中導(dǎo)入axios
let base = '/v1'
//把整個(gè)項(xiàng)目的網(wǎng)絡(luò)請(qǐng)求都寫在這個(gè)文件中用export導(dǎo)出
export const getproduct = params => { return axios.get(`${base}/product/info/${params}`) }
//這樣寫方便管理整個(gè)項(xiàng)目的網(wǎng)絡(luò)請(qǐng)求
//在我們要是用這個(gè)請(qǐng)求時(shí)比如說getproduct
import {
  getproduct
 }from '../api/api';
export default {
 name: 'HelloWorld',
 data () {
  return {
   params:{}
  }
 },
 methods: {
  getProductList(){
   getproduct(this.params).then(result=>{
    console.log(result);
   })
  }
 }
}
//注意我們導(dǎo)出的時(shí)候用的是export 所以導(dǎo)入的時(shí)候必須帶{}