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

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

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

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

vue init webpack demo

2.cd 項目根目錄，再安裝axios

npm install axios -S

3.在main.js中

//把axios賦值到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',
    //請求前處理數(shù)據(jù)
 transformRequest:[function(data){
 console.log(data);
 data=qs.stringify(data);
 return data;
 }],
    //請求等待超時時間則中斷
 timeout: 1500,
    //請求后的data處理
 transformResponse: [function (data) {
 console.log(data);
        return data;
    }]
})

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

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

補充：vue-cli整合axios的幾種方法

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

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

首選的應該就是axios了

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

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

一、不推薦的方法

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

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

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

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

三、推薦方法

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

這里推薦一種自己平時的做法

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

總結(jié)

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

您可能感興趣的文章: