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

更新時(shí)間：2018年09月12日 11:03:12 作者：_高飛_

這篇文章主要介紹了vue-cli 使用axios的操作方法及整合axios的多種方法,vue-cli整合axios的多種方法，小編一一給大家列出來(lái)了，大家根據(jù)自身需要選擇，需要的朋友可以參考下

1.創(chuàng)建vue腳手架

vue init webpack demo

2.cd 項(xiàng)目根目錄，再安裝axios

npm install axios -S

3.在main.js中

//把a(bǔ)xios賦值到vue的原型上，方便調(diào)用
Vue.prototype.$http = axios

4.在調(diào)用處

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);
  })
  }
 }

5.可以在main.js中做一些配置

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;
    }]
})

6.配置后可以在調(diào)用處省略一些代碼

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

補(bǔ)充：vue-cli整合axios的幾種方法

Vue這個(gè)框架現(xiàn)在在單頁(yè)面應(yīng)用方面非常受人歡迎。

基于vue-cli創(chuàng)建的項(xiàng)目怎么樣才能更好地處理網(wǎng)絡(luò)請(qǐng)求？

首選的應(yīng)該就是axios了

這次給剛接觸vue的新手介紹一下axios在vue中如何使用

安裝的話自己去官網(wǎng)看

一、不推薦的方法

//在要使用網(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)
  })
  }
 }
}

這種方法比較麻瓜哪個(gè)文件要用就 import axios from 'axios' ，但是太過(guò)繁瑣，也不利于維護(hù)。

二、網(wǎng)絡(luò)請(qǐng)求較少

//打開(kāi)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í)可以通過(guò)兩種方法
//Vue.$http.get(`url${params}`)
//this.$http.get(`url${params}`)
//但是這樣使用會(huì)出現(xiàn)一個(gè)問(wèn)題，在單獨(dú)的js文件中這樣做調(diào)用不了$http,原因是沒(méi)有Vue的實(shí)例。大多數(shù)情況下用這種方法就可以滿足大部分需求了
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 template: '<App/>',
 components: { App }
})

三、推薦方法

用方法二已經(jīng)可以滿足大部分需求了，寫的時(shí)候也比較爽，但是后期如果接口改變，還要一個(gè)個(gè)去查找修改，會(huì)顯得很雜亂

這里推薦一種自己平時(shí)的做法

//新建一個(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í)比如說(shuō)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í)候必須帶{}

總結(jié)

以上所述是小編給大家介紹的vue-cli 使用axios的操作方法及整合axios的多種方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: