vue - axios網路封裝模組

CoderZjz發表於2020-11-09
VueiOS封裝

功能特點

  1. 在瀏覽器中傳送XMLHttpRequests請求
  2. 在node.js總髮送http請求
  3. 支援Promise API
  4. 攔截請求和相應
  5. 轉換請求和響應資料

axios請求方式

支援多種請求方式

axios(config)
axios.request(config)
axios.get(url[,config])
axios.delete(url[,config])
axios.head(url[,config])
axios.post(url[,data[,config]])
axios.put(url[,data[,config]])
axios.patch(url[,data[,config]])

安裝、使用axios框架

npm install axios --save

之後在main.js

import Vue from 'vue'
import App from './App'

import axios from 'axios'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  render: h => h(App)
})

// 這裡預設使用axios(config)方法
axios({
  url:'伺服器地址',
  method:'post' // 請求方法 預設為get
}).then(res => {
  console.log(res); // 返回promise
})

axios({
  url:'伺服器地址',
  // 專門get請求的引數拼接
  params:{
    type:'pop',
    page: 1
  }
}).then(res => {
  console.log(res);
})

傳送併發請求

  • 使用axios.all 可以放入多個請求陣列
  • axios.all([])返回的結果是一個陣列，使用axios.spread可以將陣列[res1,res2]展開

同樣是在main.js下

import Vue from 'vue'
import App from './App'

import axios from 'axios'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  render: h => h(App)
})

axios.all([axios({
  url:'伺服器地址'
}),axios({
    // 專門get請求的引數拼接
  params:{
    type:'pop',
    page: 3
  }
})]).then(result => {
  console.log(result);
  console.log(result[0]);
  console.log(result[0]);
})

/* 使用axios.spread展開result */

axios.all([axios({
  url:'伺服器地址'
}),axios({
    // 專門get請求的引數拼接
  params:{
    type:'pop',
    page: 3
  }
})]).then(axios.spread((res1, res2)) => {
  console.log(res1);
  console.log(res2);
})

對公共部分的抽取

事實上，開發中很多引數是固定的，可以進行抽取或者axios的全域性配置

import Vue from 'vue'
import App from './App'

import axios from 'axios'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  render: h => h(App)
})

// 公共配置
axios.defaults.baseURL = '地址'
axios.defaults.timeout = 100 // 請求訪問超時時間


axios({
  // baseURL: ,  也可以寫在這裡
  url:'伺服器地址',
  method:'post' // 請求方法 預設為get
}).then(res => {
  console.log(res); // 返回promise
})

常見的配置選項

用到再去查文件

方法 語法
請求地址 url:'/user',
請求型別 method:'get',
請求根路徑 baseURL:‘地址’,
請求前的資料處理 transformRequest:[function(data){}],
請求後的資料處理 transformResponse:[function(data){}],
自定義請求頭 headers:{'x-Requested-With':'XMLHttpRequest'},
URL查詢物件 params:{id:123},
查詢物件序列化函式 paramsSerializer:function(params){}
request body data:{key:'aa'},
超時設定s timeout:1000,
跨域是否帶token withCredentials:false,
自定義請求處理 adapter:function(resolve,reject,config){},
身份驗證資訊 auth:{uname:'',pwd:'12'},
響應資料格式 json/blob/docuent/arraybuffer/text/stream responseType:'json',

建立對應的axions例項

import Vue from 'vue'
import App from './App'

import axios from 'axios'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  render: h => h(App)
})

// 建立第一例項
const instance1 = axios.creat({
  baseURL: '伺服器地址',
  timeout: 1000
})

instance1({
  url: '與伺服器地址拼接的後續地址'
}).then(res => {
  console.log(res);
})

instance1({
  url: '可以與上面例項不同的後續地址',
  params:{
    type: 'pop',
    page: 1
  }
}).then(res => {
  console.log(res);
})

//建立不同配置的例項
const instance2 = axios.creat({
  baseURL: '地址',
  timeout: 10000,
  headers: {}
})

封裝網路請求模組

正常在app.vue下複用性很低的請求網路資料

<template>
  <div id="app">
    <div>{{result}}</div>
  </div>
</template>

<script>
	import axios from 'axios'
  
  export default{
    name:'App',
    components:{
    },
    data(){
      return{
        result:''
      }
    },
    created(){
      axios({
        url:'伺服器地址'
      }).then(res => {
        console.log(res);
        this.result = res;
      })
    }
  }
  
</script>

建立network資料夾，並在其中建立request.js的請求配置

import axios from 'axios'

/******************************/
//           方法1            //
/*****************************/
export function request(config, success, failure){
  // 1. 建立axios的例項
  const instance = axios.creat({
    baseURl: '伺服器地址',
    timeout: 100
  })
  
  // 傳送真正的網路請求
  instance(config)
  	.then(res => {
    	//console.log(res);
    	success(res)
  	})
  	.catch(err => {
    	//cnsole.log(err);
    	failure(err)
  }) 	
}


/******************************/
//           方法2            //
/*****************************/
export function request(config){
  // 1. 建立axios的例項
  const instance = axios.creat({
    baseURl: '伺服器地址',
    timeout: 100
  })
  
  // 傳送真正的網路請求
  instance(config.baseConfig)
  	.then(res => {
    	//console.log(res);
    	config.success(res)
  	})
  	.catch(err => {
    	//cnsole.log(err);
    	config.failure(err)
  }) 	
}

/******************************/
//  方法3 promise 方法【推薦】  //
/*****************************/
export new Promise((resolve, reject) => {
  // 1. 建立axios的例項
  const instance = axios.creat({
    baseURl: '伺服器地址',
    timeout: 100
  })
  
  // 傳送真正的網路請求
  instance(config) // 這裡或者直接 return instance(config) 這裡返回值為就為promise
  	.then(res => {
    	resolve(res)
  	})
  	.catch(err => {
    	reject(err)
  }) 	
}

並在需要使用的地方請求



import {request} from "./network/request";

/******************************/
//      方法1對應請求方法       //
/*****************************/
request({
	url: '/home/multidata'
}), res => {
  console.log(res);
}, err => {
  console.log(err);
}


/******************************/
//      方法2對應請求方法       //
/*****************************/
request({
  caseConfig:{
    
  },
  success: function(res){
    
  },
  failure: function(err){
    
  }
})


/******************************/
//   方法3 promise對應請求方法  //
/*****************************/
request({
  url:'地址'
}).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})

攔截網路請求

請求攔截

import axios from 'axios'

export function request(config){
  // 1. 建立axios的例項
  const instance = axios.creat({
    baseURl: '伺服器地址',
    timeout: 100
  })
  
  // 2. axios的攔截器
  instance.interceptors.request.use(config => {
    console.log(config);
    // - 比如config中的一些資訊不符合伺服器的要求
    
    // - 比如每次傳送網路請求時，在介面中顯示請求圖示
    
    // - 某些網路請求（比如登入token）必須攜帶一些東西
    
    return config
  }), err => {
    console.log(err);
  }
  
  
  // 3. 傳送真正的網路請求
  return instance(config) 	
}

響應攔截

import axios from 'axios'

export function request(config){
  // 1. 建立axios的例項
  const instance = axios.creat({
    baseURl: '伺服器地址',
    timeout: 100
  })
  
  // 2. axios的攔截器
  instance.interceptors.response.use(res => {
   	console.log(res);
    
    return res.data // 返回有用的資訊
  }), err => {
    console.log(err);
  }
  
  
  // 3. 傳送真正的網路請求
  return instance(config) 	
}

相關文章