axios模块的封装

axios模块的封装

组件里使用axios

<template>
<h2>{{categories}}</h2>
</template>

<script>
  import axios from "axios";

  export default {
    name: "HelloWordVue",
    data() {
      return {
        categories: ''
      }
    },
    created() {
      axios({
        url: 'http://152.136.185.210:7878/api/m5/category'
      }).then(res => {
        this.categories = res;
      })
    }
  }
</script>

<style scoped>

</style>

created生命周期函数.

我们在组件里直接使用axios函数请求对应的url，将请求到的数据直接传给data里的参数。

问题：

每次使用axios框架我们都要使用import导入和重复的创建axios实例，如果组件太多一旦框架修改，重构代价太大。

我们可以将axios模块抽离出来单独封装。

import axios from "axios";

export function request(config,success,failure) {
//1.创建axios的实例
  const instance = axios.create({
    baseURL: 'http://152.136.185.210:7878/api/m5',
    timeout: 5000
  })
//2.发送真正的网络请求
  instance(config)
      .then(res =>{
        success(res)
      })
      .catch(err =>{
        failure(err)
      })
}

import {request} from "./network/request";

request({
  url:'/home/multidata'
},res =>{
  console.log(res);
},err=>{
  console.log(err);
})

request函数可以封装多个，根据不同的baseurl，和响应要求来封装。

在别的组件调用该函数时，我们如何获得请求结果呢？

我们增加两个回调函数，success,failure，当请求成功回调success函数将可以将res传回到组件里，失败也是一样的。

也可以三个参数合一

//5.2封装request模块,一个参数
request({
  baseConfig: {
    url: '/home/multidata'
  },
  success: function (res) {
    console.log(res)
  },
  failure: function (res) {
    console.log(res)
  }
})

import axios from "axios";

export function request(config) {
//1.创建axios的实例
  const instance = axios.create({
    baseURL: 'http://152.136.185.210:7878/api/m5',
    timeout: 5000
  })
//2.发送真正的网络请求
  instance(config.baseConfig)
      .then(res =>{
        config.success(res)
      })
      .catch(err =>{
        config.failure(err)
      })
}

最终解决方案Promise

import axios from "axios";

export function request(config) {
  return new Promise((resolve, reject) => {
    // 1.创建axios的实例
    const instance = axios.create({
      baseURL: 'http://152.136.185.210:7878/api/m5',
      timeout: 5000
    })
    //2.发送真正的网络请求
    instance(config)
        .then(res => {
          resolve(res)
        })
        .catch(err => {
          reject(err)
        })
  })
}

//5.3 promise的使用
request({
  url:'/home/multidata'
}).then(res =>{
  console.log(res);
}).catch(err =>{
  console.log(err);
})

看了上边的代码，我们发现在instacnce里直接可以使用then/catch，这是为什么，

axios实例本身就使用了Promise,那我们何必多此一举，直接返回实例即可。

import axios from "axios";

//最终方案
export function request(config,success,failure) {
//1.创建axios的实例
  const instance = axios.create({
    baseURL: 'http://152.136.185.210:7878/api/m5',
    timeout: 5000
  })
//2.发送真正的网络请求
 return  instance(config)

}