vue - axios网络封装模块
功能特点
- 在浏览器中发送XMLHttpRequests请求
- 在node.js总发送http请求
- 支持Promise API
- 拦截请求和相应
- 转换请求和响应数据
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)
}
