Axios+Vue 网络模块封装

一、axios优点

可以在浏览器中发送XMLHttpRequests，可以在node.js中发送http请求，支持Promise API，拦截请求和响应，etc

二、axios的基本使用

1.安装axiox（开发时依赖--save-dev；运行时依赖--save）

sudo cnpm install axios --save

 2.使用

//基础使用
import axios from 'axios'

//get请求
axios({
        url:'http://httpbin.org/get',
        methods:'get',//默认get请求
        params:{},//get请求参数拼接
      }).then(res=>{
        console.log(res);
      })

//三种post传参请求，get方法传参用params，post方法用data

//1.Content-Type: application/json
let data = {"age":"12","name":"aaa"};
axios.post('http://httpbin.org/post',data)
.then(res=>{
    console.log('res=>',res);            
})

//2.Content-Type: multipart/form-data
let data = new FormData();
data.append('age','12');
data.append('name','aaa');
axios.post('http://httpbin.org/post',data)
.then(res=>{
    console.log('res=>',res);            
})

//3.Content-Type: application/x-www-form-urlencoded
import qs from 'Qs'
let data = {"age":"12","name":"aaa"};
axios.post('http://httpbin.org/post',qs.stringify({
    data
}))
.then(res=>{
    console.log('res=>',res);            
})

3.axios发送并发请求

axios.all([
        axios({
          url:'http://httpbin.org/get',
        }),
        axios({
          url:'http://httpbin.org/get',
        }),
      ]).then(axios.spread((res1,res2)=>{
        console.log('res1',res1);
        console.log('res2',res2);
      }))

 4.axios的相关常见配置信息

//通过改变axios中的defaults中的属性设置全局配置

axios.defaults.baseURL = 'http://httpbin.org' //修改请求跟路径
axios.defaults.timeout= 5000 //修改请求超时时间

5.创建axios实例

//创建axios实例
const instance = axios.create({
    baseURL:'',
    timeout:1000,
})
//使用实例
instance({
    url:'',
    params:{}
}).then(res=>{
    console.log(res)
})

6.axios封装

为了维护方便通常会将axios进行封装，在src下新建axisoConfig目录，在request.js下进行封装

import axios from 'axios'

export function request(config){
  //创建axios实例

  const instance = axios.create({
    baseURL:'http://httpbin.org',
    timeout:1000,
  })

  //拦截器的使用

  //1.请求拦截，常用于以下情况
  //>config中的信息不符合服务器的要求（eg.没有携带token信息）
  //>请求过程中添加loading动画
  instance.interceptors.request.use(
    //请求成功拦截
    config=>{
      console.log(config);//拦截处理
      return config //需要return结果
    },
    //请求失败拦截
    err=>{
      console.log(err);
    }
  )
  //2.响应拦截
  instance.interceptors.response.use(
    //响应成功拦截
    res=>{
      console.log(res);//拦截处理
      return res.data;//返回响应数据
    },
    //响应失败拦截
    err=>{
      console.log(err);
    }
  )

  //发送请求
  return instance(config)
}

 封装后的使用

import {request} from '../axiosConfig/request'

 request({
        url:'/get',
      }).then(res=>{
        console.log(res);
      })