axios进行二次封装_axios的二次封装

 Web开发中，我们最常用的HTTP库就是Axios了，它的底层基于Ajax进行封装，在浏览器端和服务端都可以使用。如果大家对一些API不是很熟悉可以参考官方地址，或者中文社区。 

  为什么要对axios进行二次封装？

对Axios进行了二次封装，从而让我们更好地管理项目，把时间更多地放在业务开发上，节来省更多的时间

axios进行二次封装主要是要用到请求拦截器和响应拦截器;
请求拦截器：可以在发请求之前可以处理一些业务
响应拦截器：当服务器数据返回以后，可以处理一些事情

请求拦截器：

instance.inteceptors.request.use(config=>{
//不是登录接口，需要携带token
    if(config.url!=='/user/login'){
      config.headers.Authorization=token;
    }
return config;
},error=>{
  return Promise.reject(error)
});

响应拦截器：

instance.interceptors.response.use(response=>{
//响应成功的回调
let res=response.data;//后端返回的数据
return res;
},error=>{
//响应失败的回调
return Promise.reject(error)
});

 快速创建一个名app的vue项目：

在项目路径下安装  Qs

 在项目路径下安装  axios

 

将app运行起来：

 

在src文件夹中创建一个utils文件夹（utils文件夹一般存放自己封装的工具类函数） 并创建一个request.js文件：

在request.js 文件写axios进行二次封装代码：

// 导入axios
import axios from "axios";
// 导入 Qs
import Qs from "qs";
let qs=Qs;
 
// 创建axios实例对象  instance
let instance=axios.create({
    baseURL:"http://xx.xxx.xxx.xx:xxxx",
    timeout:5000
});
 
// 请求拦截器 interceptors
instance.interceptors.request.use(config=>{
    //如果不是登录接口 需要携带token
    if(config.url!=='/user/login'){
        config.headers.Authorization='eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiJNalU9Iiwic3ViIjoiYWRtaW4xIiwiaXNzIjoiMDk4ZjZiY2Q0NjIxZDM3M2NhZGU0ZTgzMjYyN2I0ZjYiLCJpYXQiOjE2NjQ5NTcxMTIsImF1ZCI6InJlc3RhcGl1c2VyIiwiZXhwIjoxNjY1MTI5OTEyLCJuYmYiOjE2NjQ5NTcxMTJ9.aaoYvqD9_rDoSjMeyyvBEt4TFyoMzOYWRi4iErQBUfw'
    }
    return config
},error=>{
    return Promise.reject(error)
});
 
// 响应拦截器 interceptor-----对axios封装响应的数据做拦截
instance.interceptors.response.use(response=>{
    let res=response.data;
    return res
},error=>{
    return Promise.reject(error)
});
 
// 封装get方法
export function get(url,params){
    return instance.get(url,{
        params,
    })
}
 
// 封装postJSON方法。  json格式的数据，一般用于登录接口
export function postJSON(url,data){
    return instance.post(url,data);
}
 
// 封装post方法   表单格式的数据  
export function post(url,data){
    return instance.post(url,qs.stringify(data))
}
 
export default instance 

AboutView.vue文件代码：

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <button @click="getSwipe">获取所有轮播图</button>
  </div>
</template>
<script>
  // 导入get方法
  import {get} from '../utils/request'
  export default{
    methods:{
      getSwipe(){
        get('/carousel/findAll').then(res=>{
          console.log(res,'获取后端响应');
        })
      }
    }
  }
</script>

HomeView.vue代码：

<template>
  <div class="home">
  <button @click="toLogin" >登录</button>
  </div>
</template>
 
<script>
// @ is an alias to /src
 
// 导入postJSON方法
import {postJSON} from '../utils/request'
export default {
  name: 'HomeView',
  data(){
    return{
      user:{
        username:"admin1",
        password:123321
      }
    }
  },
  methods:{
    async toLogin(){
      let res=await postJSON('/user/login',this.user);
      console.log(res);
    }
  }
  
}
</script>

点击登录按钮：

 点击获取所有轮播图按钮：

 

axios的特点：

1.基于promise的http库

2.可以调用promise的API

3.axios默认发送是get请求，发送的数据的默认格式是json格式

4.axios请求头的数据格式会自动转换。

5.axios将响应数据进行封装

6.axios是基于promise对ajax封装