axios功能特点在浏览器中发送XMLHttpRequest请求在node.js中发送http请求支持Promise API拦截请求和响应转换请求和响应数据安装 axios

npm install axios --save

axios 基本使用

import axios from 'axios';axios({  url: ';,  method: 'get' // 不指定method时： 默认get请求}).then(res => {  console.log(res);})

axios 发送并发请求

axios.all([axios({  url: 'url1',  params: {    请求参数1: '参数1',    请求参数2: '参数2'  }}),axios({  url: 'url2',  params: {    请求参数1: '参数1'  }})]).then(results => {  console.log(results);})/**发送并发请求，例如这里的两个，返回的数据results是一个数组results[0] === url1  的返回数据results[1] === url2  的返回数据*/

axios.spread

axios.all([axios({  url: 'url1',  params: {    请求参数1: '参数1',    请求参数2: '参数2'  }}),axios({  url: 'url2',  params: {    请求参数1: '参数1'  }})]).then(axios.spread((res1,res2) =>{  console.log(res1)  console.log(res2);}))

axios配置信息全局配置实际上，开发中可能很多参数都是固定的，比如 url前缀这时候可以进行一些抽取，可以利用axios的全局配置

axios.defaults.baseURL = ';   //设置公共urlaxios.defaults.timeout = 5000   //设置请求超时时间，单位毫秒

常见配置选项请求地址url: '/user'请求类型method: 'get'请求根路径baseURL: ;请求前数据处理transformRequest: [function(data){}]请求后数据处理transfromResponse: [function(data){}]自定义请求头headers: {'x-Requested-With':'XMLHttpRequest'}URL查询对象parms: {id: 12}查询对象序列化函数paramsSerializer: function(params){}request bodydata: {key: 'value'}超时设置(单位毫秒)timeout: 1000跨域是否携带TokenwihtCredemtials: false自定义请求处理adapter: function(resolve, reject, config)()身份验证信息auth: {uname: 'uname', pwd: '123'}响应的数据格式 json/blob/document/arraybuffer/text/streamresponseType: 'json'axios 的实例当从axios模块中导入对象时，使用的实例就是默认的实例当给该实例设置一些默认配置时，这些配置就被固定下来了但是后续开发中，某些配置可能会不太一样比如某些请求需要使用特定的 baseURL或者timeout等这个时候，就可以创建新的实例，并且传入属于该实例的配置信息

//使用axios.create创建实例const instance1 = axios.create({  baseURL: ';, //传入公共接口地址  timeout: 5000   //设置此实例得超时时间})

//使用实例instance1({  url: '/home/multidata'}).then(res =>{  console.log(res);});instance1({  url: '/home/data',  params: {   //传入请求参数，params是针对于get请求得    type: 'pop',    page: 1  }}).then(res => {  console.log(res);})//如果有其他请求需要用到其他的配置，这时候就可以使用axios.create创建其他实例

封装一个网络请求模块

/** *  /src/network/request.js 	config:  	这个模块只负责网络请求，对于数据处理交给调用该模块的组件传入的回调函数处理 *//** *  /src/network/request.js */import axios from 'axios';// 封装方式1// export function request(config) {//   return new Promise(((resolve, reject) => {////     //1.创建axios实例//     const instance = axios.create({//       baseURL: ';,//       timeout: 5000//     });////     //发送网络请求//     instance(config)//       .then(res => {//         resolve(res);//       })//       .catch(err => {//         reject(err);//       })//   }))// }//封装方式2export function request(config) {  //1. 创建axios实例  const instance = axios.create({    baseURL: ';,    timeout: 5000  })  // 发送网络请求  return instance(config); //他本身的返回值就是一个promise    //所以直接返回它}

<template>  <div id="app">    <p>{{results}}</p>  </div></template><script>  import {request} from './network/request'export default {  name: 'App',  data(){    return {      results: ''    }  },  created() {      //上面两种封装方式不影响这个地方的使用    request({      url: '/home/multidata'    }).then(res =>{      this.results = res;    }).catch(err =>{      console.log(err);    })  }}</script>

axios拦截器的使用全局拦截

axios.interceptors.request.use()

拦截当前实例

instance.interceptors.request.use

拦截器的作用比如config中的一些信息不符合服务器要求比如每次发送网络请求，都希望在界面中显示一个请求的图标某些网络请求必须携带一些特殊信息，比如登陆 token请求拦截 instance.interceptors.request.use

export function request(config) {  //1. 创建axios实例  const instance = axios.create({    baseURL: ';,    timeout: 5000  })  //请求拦截  instance.interceptors.request.use(config => {    //console.log(config);    //必须返回config    return config;  }, err => {    //console.log(err);  })  //响应拦截  instance.interceptors.response.use(res => {    console.log(res);    return res.data;  }, err => {    console.log(err);  })      // 3. 发送网络请求  return instance(config);}

戳我看VueX使用干货