axios网络封装模块

功能特点

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